import { zodResolver } from "@hookform/resolvers/zod"

import { useMutation, useQueryClient } from "@tanstack/react-query"

import { Pencil } from "lucide-react"

import { useState } from "react"

import { useForm } from "react-hook-form"

import { z } from "zod"

import { type ItemPublic, ItemsService } from "@/client"

import { Button } from "@/components/ui/button"

import {

  Dialog,

  DialogClose,

  DialogContent,

  DialogDescription,

  DialogFooter,

  DialogHeader,

  DialogTitle,

} from "@/components/ui/dialog"

import { DropdownMenuItem } from "@/components/ui/dropdown-menu"

import {

  Form,

  FormControl,

  FormField,

  FormItem,

  FormLabel,

  FormMessage,

} from "@/components/ui/form"

import { Input } from "@/components/ui/input"

import { LoadingButton } from "@/components/ui/loading-button"

import useCustomToast from "@/hooks/useCustomToast"

import { handleError } from "@/utils"

const formSchema = z.object({

  title: z.string().min(1, { message: "Title is required" }),

  description: z.string().optional(),

})

type FormData = z.infer<typeof formSchema>

interface EditItemProps {

  item: ItemPublic

  onSuccess: () => void

}

const EditItem = ({ item, onSuccess }: EditItemProps) => {

  const [isOpen, setIsOpen] = useState(false)

  const queryClient = useQueryClient()

  const { showSuccessToast, showErrorToast } = useCustomToast()

  const form = useForm<FormData>({

    resolver: zodResolver(formSchema),

    mode: "onBlur",

    criteriaMode: "all",

    defaultValues: {

      title: item.title,

      description: item.description ?? undefined,

    },

  })

  const mutation = useMutation({

      ItemsService.updateItem({ id: item.id, requestBody: data }),

    onSuccess: () => {

      showSuccessToast("Item updated successfully")

      setIsOpen(false)

      onSuccess()

    },

    onError: handleError.bind(showErrorToast),

    onSettled: () => {

      queryClient.invalidateQueries({ queryKey: ["items"] })

    },

  })

  const onSubmit = (data: FormData) => {

    mutation.mutate(data)

  }

  return (

    <Dialog open={isOpen} onOpenChange={setIsOpen}>

      <DropdownMenuItem

        onSelect={(e) => e.preventDefault()}

        onClick={() => setIsOpen(true)}

      >

        <Pencil />

        Edit Item

      </DropdownMenuItem>

      <DialogContent className="sm:max-w-md">

        <Form {...form}>

          <form onSubmit={form.handleSubmit(onSubmit)}>

            <DialogHeader>

              <DialogTitle>Edit Item</DialogTitle>

              <DialogDescription>

                Update the item details below.

              </DialogDescription>

            </DialogHeader>

            <div className="grid gap-4 py-4">

              <FormField

                control={form.control}

                name="title"

                render={({ field }) => (

                  <FormItem>

                    <FormLabel>

                      Title <span className="text-destructive">*</span>

                    </FormLabel>

                    <FormControl>

                      <Input placeholder="Title" type="text" {...field} />

                    </FormControl>

                    <FormMessage />

                  </FormItem>

                )}

              />

              <FormField

                control={form.control}

                name="description"

                render={({ field }) => (

                  <FormItem>

                    <FormLabel>Description</FormLabel>

                    <FormControl>

                      <Input placeholder="Description" type="text" {...field} />

                    </FormControl>

                    <FormMessage />

                  </FormItem>

                )}

              />

            </div>

            <DialogFooter>

              <DialogClose asChild>

                <Button variant="outline" disabled={mutation.isPending}>

                  Cancel

                </Button>

              </DialogClose>

              <LoadingButton type="submit" loading={mutation.isPending}>

                Save

              </LoadingButton>

            </DialogFooter>

          </form>

        </Form>

      </DialogContent>

    </Dialog>

  )

}

export default EditItem