"use client"
import { FormField, FormItem, FormLabel, FormMessage, FormControl, Form } from "@/components/ui/form"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { ComponentProps, useState } from "react"
import { useForm, UseFormReturn } from "react-hook-form"
import { CellContext } from "@tanstack/react-table"
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
import { toast } from "@/components/ui/use-toast"
import GenreBadges from "app/ui/genreBadges"
import { updateField, updateGenres } from "app/lib/update"
export default function GenrePickerInputCell(props: CellContext<any, any>) {



  const table = props.table.options.meta.tableName
  const pathname = props.table.options.meta.pathname
  const id = props.row.original.id
  const column = props.column.id
  const value = props.cell.getValue()
  const genres = props.table.options.meta.genres
  const [isActive, setIsActive] = useState(false)

  async function onSubmit({ genres }: { genres: number[] }) {
    const genresArray = genres.map((e) => { return { id: e } })
    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(genresArray, null, 2)}</code>
        </pre>
      ),
    })
    const res = await updateGenres({
      id,
      table,
      genres: genresArray,
      pathname
    })
    setIsActive(false)
  }

  function onErrors(errors) {
    toast({
      title: "You have errors",
      description: (
        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
          <code className="text-white">{JSON.stringify(errors, null, 2)}</code>
        </pre>
      ),
    })
    console.log(JSON.stringify(errors))
  }
  const formSchema = z.object({
    genres: z.array(z.number())
  })
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      genres: value.map(e => e.id)
    }
  })
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit, onErrors)} id="editGenresForm">

        <Popover modal={true}>
          <FormField
            control={form.control}
            name="genres"
            render={({ field }) => (
              <FormItem className="flex flex-col">
                <PopoverTrigger>
                  {value.length > 0 ? <GenreBadges genres={value} /> : <Button variant="ghost">Add genres</Button>
                  }
                </PopoverTrigger>



                <PopoverContent align="start">
                  {genres.map((item) => (
                    < FormField
                      key={item.id}
                      control={form.control}
                      name="genres"
                      render={({ field }) => {
                        return (
                          <FormItem
                            key={item.id}
                            className="flex flex-row items-start space-x-3 space-y-0"
                          >
                            <FormControl>
                              <Checkbox
                                checked={field.value?.includes(item.id)}
                                onCheckedChange={(checked) => {
                                  console.log(field.value)
                                  return checked
                                    ? field.onChange([...field.value, item.id])
                                    : field.onChange(
                                      field.value?.filter(
                                        (value) => value !== item.id
                                      )
                                    )
                                }}
                              />
                            </FormControl>
                            <FormLabel className="text-sm font-normal">
                              {item.name}
                            </FormLabel>
                          </FormItem>
                        )
                      }}
                    />
                  ))}
                  <Button variant="ghost" form="editGenresForm">Submit</Button>
                  <Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
                </PopoverContent>
                <FormMessage />
              </FormItem>
            )}
          />
        </Popover>

      </form>
    </Form>
  )
}