daphnis/components/avatarcustomization/page.tsx

"use client";

import React, { FC, useEffect, useState } from "react";
import { chuni_static_avatar } from "@/prisma/schemas/artemis/generated/artemis";
import { Check, ChevronsUpDown } from "lucide-react";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { z } from "zod";
type chunithm_avatar = chuni_static_avatar;
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { toast } from "../ui/use-toast";

type AvatarSelectionProps = {
  avatarHeadSelectionData: {
    avatarParts: chunithm_avatar[];
  };

  avatarFaceSelectionData: {
    avatarParts: chunithm_avatar[];
  };
  avatarItemSelectionData: {
    avatarParts: chunithm_avatar[];
  };
  avatarBackSelectionData: {
    avatarParts: chunithm_avatar[];
  };
  avatarWearSelectionData: {
    avatarParts: chunithm_avatar[];
  };
};

export const AvatarCustomization: FC<AvatarSelectionProps> = ({
  avatarHeadSelectionData,
  avatarFaceSelectionData,
  avatarItemSelectionData,
  avatarBackSelectionData,
  avatarWearSelectionData,
}) => {
  const FormSchema = z.object({
    AvatarHeadAccessory: z.number({
      required_error: "Please select a language.",
    }),
    AvatarFaceAccessory: z.number({
      required_error: "Please select a language.",
    }),
    AvatarItemAccessory: z.number({
      required_error: "Please select a language.",
    }),
    AvatarBackAccessory: z.number({
      required_error: "Please select a language.",
    }),
    AvatarWearAccessory: z.number({
      required_error: "Please select a language.",
    }),
  });

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  });

  function onSubmit(data: z.infer<typeof FormSchema>) {
    toast({
      title: "You submitted the following values:",
      description: (
        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
        </pre>
      ),
    });
  }

  return (
    <main>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="AvatarHeadAccessory"
            render={({ field }) => (
              <FormItem className="flex flex-col">
                <FormLabel>Avatar Head Item</FormLabel>
                <Popover>
                  <PopoverTrigger asChild>
                    <FormControl>
                      <Button
                        variant="outline"
                        role="combobox"
                        className={cn(
                          "w-[300px] justify-between",
                          !field.value && "text-muted-foreground"
                        )}
                      >
                        {field.value
                          ? avatarHeadSelectionData.avatarParts.find(
                              (part) => part.avatarAccessoryId === field.value
                            )?.name
                          : "Select Avatar Head Item"}
                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                      </Button>
                    </FormControl>
                  </PopoverTrigger>
                  <PopoverContent className="w-[300px] p-0">
                    <Command>
                      {/* bugged  */}
                      {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
                      <CommandList>
                        <CommandEmpty>No avatar part found.</CommandEmpty>
                        <CommandGroup>
                          {avatarHeadSelectionData.avatarParts.map((part) => (
                            <CommandItem
                              value={part.name ?? ""}
                              key={part.avatarAccessoryId}
                              onSelect={() => {
                                form.setValue(
                                  "AvatarHeadAccessory",
                                  part.avatarAccessoryId!
                                );
                              }}
                            >
                              <Check
                                className={cn(
                                  "mr-2 h-4 w-4",
                                  part.avatarAccessoryId === field.value
                                    ? "opacity-100"
                                    : "opacity-0"
                                )}
                              />
                              {part.name}
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>

                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="AvatarFaceAccessory"
            render={({ field }) => (
              <FormItem className="flex flex-col">
                <FormLabel>Avatar Face Item</FormLabel>
                <Popover>
                  <PopoverTrigger asChild>
                    <FormControl>
                      <Button
                        variant="outline"
                        role="combobox"
                        className={cn(
                          "w-[300px] justify-between",
                          !field.value && "text-muted-foreground"
                        )}
                      >
                        {field.value
                          ? avatarFaceSelectionData.avatarParts.find(
                              (part) => part.avatarAccessoryId === field.value
                            )?.name
                          : "Select Avatar Face Item"}
                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                      </Button>
                    </FormControl>
                  </PopoverTrigger>
                  <PopoverContent className="w-[300px] p-0">
                    <Command>
                      {/* bugged  */}
                      {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
                      <CommandList>
                        <CommandEmpty>No language found.</CommandEmpty>
                        <CommandGroup>
                          {avatarFaceSelectionData.avatarParts.map((part) => (
                            <CommandItem
                              value={part.name ?? ""}
                              key={part.avatarAccessoryId}
                              onSelect={() => {
                                form.setValue(
                                  "AvatarFaceAccessory",
                                  part.avatarAccessoryId!
                                );
                              }}
                            >
                              <Check
                                className={cn(
                                  "mr-2 h-4 w-4",
                                  part.avatarAccessoryId === field.value
                                    ? "opacity-100"
                                    : "opacity-0"
                                )}
                              />
                              {part.name}
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>

                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="AvatarItemAccessory"
            render={({ field }) => (
              <FormItem className="flex flex-col">
                <FormLabel>Avatar Hand Item</FormLabel>
                <Popover>
                  <PopoverTrigger asChild>
                    <FormControl>
                      <Button
                        variant="outline"
                        role="combobox"
                        className={cn(
                          "w-[300px] justify-between",
                          !field.value && "text-muted-foreground"
                        )}
                      >
                        {field.value
                          ? avatarItemSelectionData.avatarParts.find(
                              (part) => part.avatarAccessoryId === field.value
                            )?.name
                          : "Select Avatar Head Item"}
                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                      </Button>
                    </FormControl>
                  </PopoverTrigger>
                  <PopoverContent className="w-[300px] p-0">
                    <Command>
                      {/* bugged  */}
                      {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
                      <CommandList>
                        <CommandEmpty>No avatar part found.</CommandEmpty>
                        <CommandGroup>
                          {avatarItemSelectionData.avatarParts.map((part) => (
                            <CommandItem
                              value={part.name ?? ""}
                              key={part.avatarAccessoryId}
                              onSelect={() => {
                                form.setValue(
                                  "AvatarItemAccessory",
                                  part.avatarAccessoryId!
                                );
                              }}
                            >
                              <Check
                                className={cn(
                                  "mr-2 h-4 w-4",
                                  part.avatarAccessoryId === field.value
                                    ? "opacity-100"
                                    : "opacity-0"
                                )}
                              />
                              {part.name}
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>

                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="AvatarBackAccessory"
            render={({ field }) => (
              <FormItem className="flex flex-col">
                <FormLabel>Avatar Back Item</FormLabel>
                <Popover>
                  <PopoverTrigger asChild>
                    <FormControl>
                      <Button
                        variant="outline"
                        role="combobox"
                        className={cn(
                          "w-[300px] justify-between",
                          !field.value && "text-muted-foreground"
                        )}
                      >
                        {field.value
                          ? avatarBackSelectionData.avatarParts.find(
                              (part) => part.avatarAccessoryId === field.value
                            )?.name
                          : "Select Avatar Back Item"}
                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                      </Button>
                    </FormControl>
                  </PopoverTrigger>
                  <PopoverContent className="w-[300px] p-0">
                    <Command>
                      {/* bugged  */}
                      {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
                      <CommandList>
                        <CommandEmpty>No avatar part found.</CommandEmpty>
                        <CommandGroup>
                          {avatarBackSelectionData.avatarParts.map((part) => (
                            <CommandItem
                              value={part.name ?? ""}
                              key={part.avatarAccessoryId}
                              onSelect={() => {
                                form.setValue(
                                  "AvatarBackAccessory",
                                  part.avatarAccessoryId!
                                );
                              }}
                            >
                              <Check
                                className={cn(
                                  "mr-2 h-4 w-4",
                                  part.avatarAccessoryId === field.value
                                    ? "opacity-100"
                                    : "opacity-0"
                                )}
                              />
                              {part.name}
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>

                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="AvatarWearAccessory"
            render={({ field }) => (
              <FormItem className="flex flex-col">
                <FormLabel>Avatar Body Item</FormLabel>
                <Popover>
                  <PopoverTrigger asChild>
                    <FormControl>
                      <Button
                        variant="outline"
                        role="combobox"
                        className={cn(
                          "w-[300px] justify-between",
                          !field.value && "text-muted-foreground"
                        )}
                      >
                        {field.value
                          ? avatarWearSelectionData.avatarParts.find(
                              (part) => part.avatarAccessoryId === field.value
                            )?.name
                          : "Select Avatar Body Item"}
                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                      </Button>
                    </FormControl>
                  </PopoverTrigger>
                  <PopoverContent className="w-[300px] p-0">
                    <Command>
                      {/* bugged  */}
                      {/* <CommandInput placeholder="Search Avatar Head Parts..." /> */}
                      <CommandList>
                        <CommandEmpty>No avatar part found.</CommandEmpty>
                        <CommandGroup>
                          {avatarWearSelectionData.avatarParts.map((part) => (
                            <CommandItem
                              value={part.name ?? ""}
                              key={part.avatarAccessoryId}
                              onSelect={() => {
                                form.setValue(
                                  "AvatarWearAccessory",
                                  part.avatarAccessoryId!
                                );
                              }}
                            >
                              <Check
                                className={cn(
                                  "mr-2 h-4 w-4",
                                  part.avatarAccessoryId === field.value
                                    ? "opacity-100"
                                    : "opacity-0"
                                )}
                              />
                              {part.name}
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>

                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit">Submit</Button>
        </form>
      </Form>
    </main>
  );
};

{
  /* <div>State is: {state}</div>
      <div>Server data:</div>
      <div></div>
      <ul>
        {avatarSelectionData.avatarParts.map((part) => (
          <li key={part.avatarAccessoryId}>{part.name}</li>
        ))}
      </ul> */
}