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

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

import { Plus } from "lucide-react"

import { useState } from "react"

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

import { z } from "zod"

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

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

import {

  Dialog,

  DialogClose,

  DialogContent,

  DialogDescription,

  DialogFooter,

  DialogHeader,

  DialogTitle,

  DialogTrigger,

} from "@/components/ui/dialog"

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>

const AddItem = () => {

  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: "",

      description: "",

    },

  })

  const mutation = useMutation({

    mutationFn: (data: ItemCreate) =>

      ItemsService.createItem({ requestBody: data }),

    onSuccess: () => {

      showSuccessToast("Item created successfully")

      form.reset()

    },

    onError: handleError.bind(showErrorToast),

    onSettled: () => {

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

    },

  })

  const onSubmit = (data: FormData) => {

    mutation.mutate(data)

  }

  return (

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

      <DialogTrigger asChild>

        <Button className="my-4">

          <Plus className="mr-2" />

          Add Item

        </Button>

      </DialogTrigger>

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

        <DialogHeader>

          <DialogTitle>Add Item</DialogTitle>

          <DialogDescription>

            Fill in the details to add a new item.

          </DialogDescription>

        </DialogHeader>

        <Form {...form}>

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

            <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}

                        required

                      />

                    </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 AddItem