"use client";
import Toasts from "@/components/Toasts";
import ValidationError from "@/components/ValidationError";
import { User } from "@/interfaces/User";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { Accordion, Card, Spinner } from "flowbite-react";
import { useRouter } from "next/navigation";
import { FC, useRef } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { HiArrowLeft } from "react-icons/hi";
import Button from "../Button";
import PageHeader from "../PageHeder";
import {
  TSmacResellerSchema,
  macResellerSchema,
} from "../forms/schema/mac-reseller";
import AdvanceForm from "./advance-form";
import BasicForm from "./basic-form";
import BillingForm from "./billing-form";

type Props = {
  macReseller?: TSmacResellerSchema;
  isEdit?: boolean;
};

const MacResellerForm: FC<Props> = ({ macReseller, isEdit = false }) => {
  const queryClient = useQueryClient();
  const router = useRouter();
  const macResellerForm = useForm<TSmacResellerSchema>({
    resolver: zodResolver(macResellerSchema),
    mode: "onChange",
    defaultValues: macReseller as TSmacResellerSchema,
  });

  const inputRef = useRef<HTMLInputElement>(null);

  const {
    handleSubmit,
    reset,
    control,
    formState: { errors },
  } = macResellerForm;

  const {
    mutate: submitClient,
    isPending,
    error,
    isError,
    isSuccess,
  } = useMutation({
    mutationFn: async (macResellerData: TSmacResellerSchema) => {
      const api_url = isEdit
        ? `/api/mac-resellers/${macReseller?.id}`
        : `/api/mac-resellers`;
      const method = isEdit ? "put" : "post";
      const { data } = await axios({
        method: method,
        url: api_url,
        data: macResellerData,
      });
      return data.data as User;
    },
    onSuccess: (data) => {
      reset();
      router.push("/mac-resellers");
    },
    onError: (error: any) => {
      reset();
    },
  });
  const onSubmit = async (data: TSmacResellerSchema) => {
    console.log(data);
    submitClient(data);
  };

  const onError = async (data: any) => {
    console.log(data);
  };

  return (
    <>
      {isError && (
        <ValidationError
          message={error.message}
          data={error?.response?.data?.error?.errors}
        />
      )}
      {isSuccess && <Toasts message="macReseller update successful!" />}
      <PageHeader>
        <div className="flex justify-between px-2">
          <h1 className="font-semibold text-xl text-gray-900 mt-1">
            {isEdit ? "Edit Mac Reseller" : "Add New Mac Reseller"}
          </h1>
          <Button
            onClick={() => router.push("/mac-resellers")}
            className="mb-2"
          >
            <HiArrowLeft className="mr-2" />
            Back
          </Button>
        </div>
      </PageHeader>
      <Card className="rounded-none">
        <FormProvider {...macResellerForm}>
          <form onSubmit={handleSubmit(onSubmit, onError)}>
            <Accordion>
              <Accordion.Panel>
                <Accordion.Title className="py-2 text-lg">
                  Basic Information
                </Accordion.Title>
                <Accordion.Content>
                  <BasicForm macReseller={macReseller as TSmacResellerSchema} />
                </Accordion.Content>
              </Accordion.Panel>
              <Accordion.Panel>
                <Accordion.Title className="py-2 text-lg text-gray-900">
                  Billing Information
                </Accordion.Title>
                <Accordion.Content>
                  <BillingForm
                    macReseller={macReseller as TSmacResellerSchema}
                  />
                </Accordion.Content>
              </Accordion.Panel>
              <Accordion.Panel>
                <Accordion.Title className="py-2 text-lg text-gray-900">
                  Advance
                </Accordion.Title>
                <Accordion.Content>
                  <AdvanceForm
                    macReseller={macReseller as TSmacResellerSchema}
                  />
                </Accordion.Content>
              </Accordion.Panel>
            </Accordion>
            <input className="opacity-0" type="submit" ref={inputRef} />
          </form>
        </FormProvider>
        <Button
          color="blue"
          onClick={() => inputRef.current?.click()}
          disabled={isPending}
        >
          {isPending && (
            <Spinner aria-label="Spinner button" size="sm" className="mr-1" />
          )}
          Submit
        </Button>
      </Card>
    </>
  );
};

export default MacResellerForm;