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

  const AvatarTextures: Record<string, { src: string; className: string }> = {
    AvatarFaceStatic: {
      src: "avatarStatic/CHU_UI_Avatar_Tex_Face.png",
      className: "avatar_face_static",
    },
    AvatarSkin: {
      src: `avatarAccessory/CHU_UI_Avatar_Tex_0${1400001}.png`,
      className: "avatar_skin",
    },
    AvatarRightHand: {
      src: "avatarStatic/CHU_UI_Avatar_Tex_RightHand.png",
      className: "avatar_hand_r",
    },
    AvatarLeftHand: {
      src: "avatarStatic/CHU_UI_Avatar_Tex_LeftHand.png",
      className: "avatar_hand_l",
    },
    AvatarSkinFootL: {
      src: "avatarAccessory/CHU_UI_Avatar_Tex_01400001.png",
      className: "avatar_skinfoot_l",
    },
    AvatarSkinFootR: {
      src: "avatarAccessory/CHU_UI_Avatar_Tex_01400001.png",
      className: "avatar_skinfoot_r",
    },

    AvatarHeadAccessory: {
      src: "avatarAccessory/CHU_UI_Avatar_Tex_06202301.png",
      className: "avatar_head",
    },

    AvatarItemAccessoryR: {
      src: "avatarAccessory/CHU_UI_Avatar_Tex_06502401.png",
      className: "avatar_item_r",
    },
    AvatarItemAccessoryL: {
      src: "avatarAccessory/CHU_UI_Avatar_Tex_06502401.png",
      className: "avatar_item_l",
    },
    AvatarBackAccessory: {
      src: "avatarAccessory/CHU_UI_Avatar_Tex_06703301.png",
      className: "avatar_back",
    },
    AvatarWearAccessory: {
      src: "avatarAccessory/CHU_UI_Avatar_Tex_04103101.png",
      className: "avatar_wear",
    },

    AvatarFace: {
      src: "avatarAccessory/CHU_UI_Avatar_Tex_02300003.png",
      className: "avatar_face",
    },
    // not in use
    AvatarFront: {
      src: "avatarAccessory/CHU_UI_Avatar_Tex_01600001.png",
      className: "avatar_front",
    },
  };

  return (
    <main className="flex">
      {" "}
      <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>
                        {/* 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!
                                  );
                                  console.log(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>
      </div>
      {/* Avatar Customization Section */}
      <div className="w-1/2 flex flex-col items-center">
        <div className="avatar_base">
          {Object.entries(AvatarTextures).map(([key, { className, src }]) => (
            <div className={className} key={key}>
              <img src={src} alt={key} />
            </div>
          ))}
        </div>
      </div>
    </main>
  );
};