"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 { EventType, 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"
import { Genre } from "@prisma/client"
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[] }, event: Event) {
    event.preventDefault()
    try {
      const genresArray = genres.map((e) => { return { id: e } })
      const res = await updateGenres({
        id,
        table,
        genres: genresArray,
        pathname
      })
      if (res === undefined) throw new Error("Something went wrong.")
      toast({ title: "Field updated successfully." })
      window.location.reload()
    } catch (error) {
      console.error(error)
      toast({ title: "Something went wrong." })
    }
    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.coerce.number())
  })
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      genres: value.map(e => e.id)
    }
  })

  const formId = "editGenresForm" + props.cell.id

  return (

    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit, onErrors)} id={formId}>
        <Popover modal={true} open={isActive} onOpenChange={() => setIsActive(prev => !prev)} >
          <FormField
            control={form.control}
            name="genres"
            render={({ field }) => (
              <FormItem className="w-full max-w-xs flex flex-col">
                <PopoverTrigger asChild>
                  {value.length > 0 ? <Button variant="ghost" className="h-fit"><GenreBadges genres={value} className="w-full" /></Button> : <Button variant="outline" type="button" className="w-fit m-auto">Add genres</Button>
                  }
                </PopoverTrigger>



                <PopoverContent align="start">
                  {genres.map((item: Genre) => (
                    < 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) => {
                                  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={formId}>Submit</Button>
                  <Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
                </PopoverContent>
                <FormMessage />
              </FormItem>
            )}
          />
        </Popover>
      </form>
    </Form>

  )
}