daphnis/components/(customization)/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 { getCurrentAvatarParts } from "./actions";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  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";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { toast } from "../../ui/use-toast";

const getAvatarTextureSrc = (id: number | undefined) => {
  if (id === undefined) return "";
  return `avatarAccessory/CHU_UI_Avatar_Tex_0${id}.png`;
};

type chunithm_avatar = chuni_static_avatar;

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 an Avatar Head Item.",
    }),
    AvatarFaceAccessory: z.number({
      required_error: "Please select an Avatar Face Item.",
    }),
    AvatarItemAccessory: z.number({
      required_error: "Please select an Avatar Item.",
    }),
    AvatarBackAccessory: z.number({
      required_error: "Please select an Avatar Back Item.",
    }),
    AvatarWearAccessory: z.number({
      required_error: "Please select an Avatar Wear Item.",
    }),
  });

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

  const [avatarFaceId, setAvatarFaceId] = useState<number | undefined>(
    undefined
  );

  const [avatarSkinId, setAvatarSkinId] = useState<number | undefined>(
    undefined
  );
  const [avatarHeadId, setAvatarHeadId] = useState<number | undefined>(
    undefined
  );
  const [avatarWearId, setAvatarWearId] = useState<number | undefined>(
    undefined
  );
  const [avatarBackId, setAvatarBackId] = useState<number | undefined>(
    undefined
  );
  const [avatarItemId, setAvatarItemId] = useState<number | undefined>(
    undefined
  );

  useEffect(() => {
    const fetchAvatarParts = async () => {
      try {
        const data = await getCurrentAvatarParts();
        if (data.length > 0) {
          setAvatarFaceId(data[0].avatarFace!);
          setAvatarSkinId(data[0].avatarSkin!);
          setAvatarHeadId(data[0].avatarHead!);
          setAvatarWearId(data[0].avatarWear!);
          setAvatarBackId(data[0].avatarBack!);
          setAvatarItemId(data[0].avatarItem!);
        }
      } catch (error) {
        console.error("Error fetching avatar parts:", error);
      }
    };

    fetchAvatarParts();
  }, []);

  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>
      ),
    });
  }

  const getTexture = (id: number | undefined, defaultSrc: string) => {
    return id ? getAvatarTextureSrc(id) : defaultSrc;
  };

  const AvatarTextures = {
    AvatarHeadAccessory: {
      src: getTexture(
        form.watch("AvatarHeadAccessory"),
        `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarHeadId}.png`
      ),
      className: "avatar_head",
    },
    AvatarFaceAccessory: {
      src: getTexture(
        form.watch("AvatarFaceAccessory"),
        `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarFaceId}.png`
      ),
      className: "avatar_face",
    },
    AvatarItemAccessoryR: {
      src: getTexture(
        form.watch("AvatarItemAccessory"),
        `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarItemId}.png`
      ),
      className: "avatar_item_r ",
    },
    AvatarItemAccessoryL: {
      src: getTexture(
        form.watch("AvatarItemAccessory"),
        `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarItemId}.png`
      ),
      className: "avatar_item_l ",
    },
    AvatarBackAccessory: {
      src: getTexture(
        form.watch("AvatarBackAccessory"),
        `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarBackId}.png`
      ),
      className: "avatar_back",
    },
    AvatarWearAccessory: {
      src: getTexture(
        form.watch("AvatarWearAccessory"),
        `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarWearId}.png`
      ),
      className: "avatar_wear",
    },
    avatarSkinAccessory: {
      src: getTexture(
        avatarSkinId,
        `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarSkinId}.png`
      ),
      className: "avatar_skin",
    },
    AvatarRightHand: {
      src: "avatarStatic/CHU_UI_Avatar_Tex_RightHand.png",
      className: "avatar_hand_r",
    },

    AvatarSkinFootR: {
      src: `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarSkinId}.png`,
      className: "avatar_skinfoot_r",
    },
    AvatarLeftHand: {
      src: "avatarStatic/CHU_UI_Avatar_Tex_LeftHand.png",
      className: "avatar_hand_l",
    },
    AvatarSkinFootL: {
      src: `avatarAccessory/CHU_UI_Avatar_Tex_0${avatarSkinId}.png`,

      className: "avatar_skinfoot_l",
    },
    AvatarFaceStatic: {
      src: "avatarStatic/CHU_UI_Avatar_Tex_Face.png",
      className: "avatar_face_static",
    },
  };

  return (
    <main className="flex flex-col items-center space-y-6">
      {/* Avatar Customization Section */}
      <div className="w-full flex justify-center">
        <div className="avatar_base">
          {Object.entries(AvatarTextures).map(([key, { className, src }]) => (
            <div className={className} key={key}>
              <img src={src} alt={""} />
            </div>
          ))}
        </div>
      </div>
      <div>
        <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>
                        <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>
                        <CommandList>
                          <CommandEmpty>No avatar part 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 Face Item"}
                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                        </Button>
                      </FormControl>
                    </PopoverTrigger>
                    <PopoverContent className="w-[300px] p-0">
                      <Command>
                        <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>
                        <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 Clothing 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 Clothing Item"}
                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                        </Button>
                      </FormControl>
                    </PopoverTrigger>
                    <PopoverContent className="w-[300px] p-0">
                      <Command>
                        <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>
              )}
            />
            <div className="flex justify-end">
              <Button type="submit">Submit</Button>
            </div>
          </form>
        </Form>
      </div>
      {/* Avatar Customization Section */}
    </main>
  );
};