"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,
  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";
import { getCurrentTrophies } from "./actions";
import { cozynet_chuni_static_trophies } from "@/prisma/schemas/artemis/generated/artemis";
const getAvatarTextureSrc = (id: number | undefined) => {
  if (id === undefined) return "";
  return `avatarAccessory/CHU_UI_Avatar_Tex_0${id}.png`;
};

type static_trophies = cozynet_chuni_static_trophies;

type AvatarSelectionProps = {
  allTrophies: {
    statictrophies: static_trophies[];
  };
};

export const TrophyCustomization: FC<AvatarSelectionProps> = ({
  allTrophies,
}) => {
  const FormSchema = z.object({
    trophies: z.number({
      required_error: "Please select a trophy",
    }),
  });

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

  const [trophyID, setTrophyId] = useState<number | undefined>(undefined);

  useEffect(() => {
    const fetchAvatarParts = async () => {
      try {
        const data = await getCurrentTrophies();
        if (data.length > 0) {
          setTrophyId(data[0].trophyId!);
        }
      } 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>
      ),
    });
  }

  return (
    <main className="flex">
      <div>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <FormField
              control={form.control}
              name="trophies"
              render={({ field }) => (
                <FormItem className="flex flex-col">
                  <FormLabel>Select Trophy</FormLabel>
                  <Popover>
                    <PopoverTrigger asChild>
                      <FormControl>
                        <Button
                          variant="outline"
                          role="combobox"
                          className={cn(
                            "w-[300px] justify-between",
                            !field.value && "text-muted-foreground"
                          )}
                        >
                          {field.value
                            ? allTrophies.statictrophies.find(
                                (part) => part.id === field.value
                              )?.str
                            : "Select Trophy"}
                          <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>
                            {allTrophies.statictrophies.map((part) => (
                              <CommandItem
                                value={part.id.toString()}
                                key={part.id}
                                onSelect={() => {
                                  form.setValue("trophies", part.id);
                                }}
                              >
                                <Check
                                  className={cn(
                                    "mr-2 h-4 w-4",
                                    part.id === field.value
                                      ? "opacity-100"
                                      : "opacity-0"
                                  )}
                                />
                                {part.str}
                              </CommandItem>
                            ))}
                          </CommandGroup>
                        </CommandList>
                      </Command>
                    </PopoverContent>
                  </Popover>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit">Submit</Button>
          </form>
        </Form>
      </div>
    </main>
  );
};
