"use client";
import { Modal, } from "flowbite-react";
import { FC, useEffect, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "react-toastify";
import { Select, Textarea } from "../forms/Inputs";
import { TSticketSchema, ticketSchema } from "../forms/schema/ticket";
import dynamic from "next/dynamic";
import ActionButton from "../action-button";
import getData, { postData, putData } from "@/utils/fetch";
import { useParseError } from "@/utils/lib/helpers";
import { usePermission } from "@/utils/auth/permission";
import { TSclientSchema } from "../forms/schema/client";
import { useSearchParams } from "next/navigation";
const DropdownList = dynamic(() => import("../common/Dropdown"));

interface Props {
  isOpen: boolean;
  setOpen: (value: boolean) => void;
  ticket_id?: string;
  mode?: "create" | "edit";
  api?: string;
}

const TicketForm: FC<Props> = ({ isOpen, setOpen, ticket_id, mode = "create", api = "/api/v1/tickets" }) => {
  const searchParams = useSearchParams();
  const clientId = searchParams.get("client_id");
  const queryClient = useQueryClient();
  const inputRef = useRef<HTMLInputElement>(null);
  const [ticket, setTicket] = useState<TSticketSchema>(null);
  const has_ticket_create_permission = usePermission("tickets.create");
  const [client, setClient] = useState(null);

  const getClient = async (client_id: string): Promise<TSclientSchema> => {
    const response = await getData(`/api/v1/dropdown-clients?uuid=${client_id}`);
    const data = response?.data;
    setClient(data);
    setValue('client_id', data?.id);
    return response.data;
  }

  const getTicket = async (): Promise<TSticketSchema> => {
    if (mode === "edit" && isOpen) {
      const response = await getData(`/api/v1/tickets/${ticket_id}`);
      setTicket(response?.data);
      console.log(response?.data, 'ticket');
      return response?.data;
    }
    return {}
  }

  const ticketForm = useForm<TSticketSchema>({
    resolver: zodResolver(ticketSchema),
    mode: "onChange",
    defaultValues: async () => getTicket(),
  });


  const {
    handleSubmit,
    reset,
    setValue,
    formState: { errors },
  } = ticketForm;


  const { mutate: submitTicket, isPending } = useMutation({
    mutationFn: async (ticketForm: TSticketSchema) => {
      if (mode === "create") {
        const data = await postData(
          `${api}`,
          ticketForm as any
        );
        if (!data.success) {
          throw data;
        }
        return data;
      } else {
        const { data } = await putData(
          `${api}/${ticket_id}`,
          ticketForm as any
        );
        return data;
      }
    },
    onSuccess: (data) => {
      queryClient.invalidateQueries({ queryKey: ["tickets"] });
      toast.success(`Ticket ${mode} successfully!`);
      setOpen(false);
      reset();
    },
    onError: (error: any) => {
      toast.error(useParseError(error));
    },
  });


  const onSubmit = (data: TSticketSchema) => {
    console.log(data, 'form data');
    submitTicket(data);
  };
  const onError = (data: any) => {
    console.log(data);
  };

  useEffect(() => {
    if (clientId?.length && clientId.length > 0) {
      setOpen(true);
      getClient(clientId);
    }
  }, [clientId])

  return (
    <Modal show={isOpen} onClose={() => setOpen(false)}>
      <Modal.Header>
        {mode === "edit" ? "Edit Ticket" : "Create New Ticket"}
      </Modal.Header>
      <Modal.Body>
        <FormProvider {...ticketForm}>
          <form onSubmit={handleSubmit(onSubmit, onError)} className="space-y-4">
            {has_ticket_create_permission && (
              <div>
                <label htmlFor="subject_id" className="block mb-2">Client</label>
                <DropdownList
                  name="client"
                  idName="client_id"
                  getLabel={(option: any) => option.name}
                  defaultItems={ticket?.client?.name || client?.name}
                  placeholder="Select Client"
                  isMulti={false}
                  key={ticket?.client?.id}
                />
              </div>
            )}
            <div>
              <label htmlFor="tag_id" className="block mb-2">Tags</label>
              <DropdownList
                name="tag"
                idName="tag_id"
                placeholder="Select Tag"
                getLabel={(option: any) => option.name}
                defaultItems={ticket?.tag}
                key={ticket?.tag?.[0]?.id}
              />
            </div>
            {has_ticket_create_permission && (
              <div>
                <label htmlFor="assigned_to" className="block mb-2">Assign To</label>
                <DropdownList
                  name="staff"
                  idName="assigned_to"
                  getLabel={(option: any) => option.name}
                  defaultItems={ticket?.staff}
                  isMulti={false}
                  key={ticket?.staff?.id}
                  placeholder="Select Assign To"
                />
              </div>
            )}
            <div>
              <label htmlFor="subject_id" className="block mb-2">Subject</label>
              <DropdownList
                name="subject"
                idName="subject_id"
                placeholder="Select Subject"
                getLabel={(option: any) => option.name}
                defaultItems={ticket?.subject}
                key={ticket?.subject?.id}
                isMulti={false}
              />
            </div>

            <div>
              <Textarea name="message" labelText="Message" placeholder="Enter message" errors={errors} />
            </div>

            <div className="mt-1">
              <Select
                defaultValue={"medium"}
                options={[
                  {
                    value: "medium",
                    label: "Medium"
                  },
                  { value: "high", label: "High" },
                  { value: "low", label: "Low" },
                ]}
                labelText="Priority"
                name="priority"
                errors={errors}
              />
            </div>
            {has_ticket_create_permission && (
              <div className="mt-1">
                <Select
                  defaultValue={"open"}
                  options={[
                    { value: "open", label: "Open" },
                    { value: "in_progress", label: "In Progress" },
                    { value: "resolved", label: "Resolved" },
                    { value: "closed", label: "Closed" },
                  ]}
                  labelText="Status"
                  name="status"
                  errors={errors}
                />
              </div>
            )}
            <input className="opacity-0" type="submit" ref={inputRef} />
          </form>
        </FormProvider>
      </Modal.Body>
      <Modal.Footer>
        <ActionButton
          onClick={() => inputRef.current?.click()}
          type="submit"
          title="Save"
          isLoading={isPending}
        />
      </Modal.Footer>
    </Modal>
  );
};

export default TicketForm;