"use client";
import ValidationError from "@/components/ValidationError";
import { User } from "@/interfaces/User";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation } from "@tanstack/react-query";
import axios from "axios";
import { useRouter } from "next/navigation";
import { FC, useEffect, useRef } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { toast } from "react-toastify";
import PageHeader from "../PageHeder";
import ActionButton from "../action-button";
import { TSstaffSchema, staffSchema } from "../forms/schema/staff";
import { Accordion } from "flowbite-react";
import BasicStaffForm from "./basic-staff-form";
import StaffSalaryForm from "./staff-salary";

type Props = {
  staff?: TSstaffSchema;
  isEdit?: boolean;
};

const StaffForm: FC<Props> = ({ staff, isEdit = false }) => {
  console.log(staff);
  const router = useRouter();
  const salaryItems = {
    items_label: "", items_value: 0
  }
  const salaryDeductions = {
    deductions_label: "", deductions_value: 0
  }
  const storeForm = useForm<TSstaffSchema>({
    resolver: zodResolver(staffSchema),
    mode: "onChange",
    defaultValues: isEdit
      ? {
        ...staff,
      }
      : {
        ...staff,
        salary_items: [salaryItems],
        salary_deductions: [salaryDeductions],
      },
  });

  const inputRef = useRef<HTMLInputElement>(null);

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

  const {
    mutate: submitStaff,
    isPending,
  } = useMutation({
    mutationFn: async (storeData: TSstaffSchema) => {
      const api_url = isEdit ? `/api/staffs/${staff?.id}` : `/api/staffs`;
      const method = isEdit ? "put" : "post";
      const { data } = await axios({
        method: method,
        url: api_url,
        data: storeData,
      });
      return data.data;
    },
    onSuccess: (data) => {
      reset();
      router.push("/staffs");
      toast.success(`Staff ${isEdit ? "update" : "create"} successfully!`);
    },
    onError: (error: any) => {
      console.log(error);
    },
  });
  const onSubmit = async (data: TSstaffSchema) => {
    console.log(data);
    submitStaff(data);
  };

  const onError = async (data: any) => {
    console.log(data);
    Object.keys(data).map((item: any) => {
      toast.error(`${item} is required`);
    });
  };

  useEffect(() => {
    if (staff?.user) {
      setValue("username", staff?.user?.username);
    }
  }, [staff]);
  return (
    <>
      <PageHeader>
        <div className="flex justify-between px-2">
          <h1 className="font-semibold text-xl text-gray-900 mt-1 dark:text-gray-200">
            {isEdit ? "Edit Staff" : "Add New Staff"}
          </h1>
          <ActionButton href="/staffs" type="back" />
        </div>
      </PageHeader>
      <div className=" bg-white dark:bg-gray-800 dark:text-gray-200 pb-10">
        <FormProvider {...storeForm}>
          <form onSubmit={handleSubmit(onSubmit, onError)}>
            <Accordion>
              <Accordion.Panel>
                <Accordion.Title className="py-2 text-lg">
                  Basic Information
                </Accordion.Title>
                <Accordion.Content>
                  <BasicStaffForm isEdit={isEdit} staff={staff} />
                </Accordion.Content>
              </Accordion.Panel>
              <Accordion.Panel>
                <Accordion.Title className="py-2 text-lg text-gray-900">
                  <div className="flex gap-10">
                    <div>Salary Information
                    </div>
                    {errors?.salary_items && (
                      <div className="text-red-600">Salary Information is required!</div>
                    )}
                  </div>
                </Accordion.Title>
                <Accordion.Content>
                  <StaffSalaryForm salaryItems={salaryItems} salaryDeductions={salaryDeductions} />
                </Accordion.Content>
              </Accordion.Panel>

            </Accordion>
            <input className="opacity-0" type="submit" ref={inputRef} />
          </form>
        </FormProvider>
        <ActionButton
          isLoading={isPending}
          type="submit"
          onClick={() => inputRef.current?.click()}
        />
      </div>
    </>
  );
};

export default StaffForm;