"use client";
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 { toast } from "react-toastify";
import Button from "../Button";
import PageHeader from "../PageHeder";
import ActionButton from "../action-button";
import { TSresellerSchema, resellerSchema } from "../forms/schema/reseller";
import AdvanceForm from "./advance-form";
import BasicForm from "./basic-form";
import BillingForm from "./billing-form";

type Props = {
  reseller?: TSresellerSchema;
  isEdit?: boolean;
};

const ResellerForm: FC<Props> = ({ reseller, isEdit = false }) => {
  const queryClient = useQueryClient();
  const router = useRouter();
  const resellerForm = useForm<TSresellerSchema>({
    resolver: zodResolver(resellerSchema),
    mode: "onChange",
    defaultValues: reseller as TSresellerSchema,
  });

  const inputRef = useRef<HTMLInputElement>(null);

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

  const {
    mutate: submitClient,
    isPending,
    error,
    isError,
    isSuccess,
  } = useMutation({
    mutationFn: async (resellerData: TSresellerSchema) => {
      const api_url = isEdit
        ? `/api/resellers/${reseller?.id}`
        : `/api/resellers`;
      const method = isEdit ? "put" : "post";
      const { data } = await axios({
        method: method,
        url: api_url,
        data: resellerData,
      });
      return data.data as User;
    },
    onSuccess: (data) => {
      reset();
      toast.success(`Reseller ${isEdit ? "Edit" : "create"} successful!`);
      router.push("/resellers");
    },
    onError: (error: any) => {
      //  reset();
    },
  });
  const onSubmit = async (data: TSresellerSchema) => {
    console.log(data);
    submitClient(data);
  };

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

  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 Reseller" : "Add New  Reseller"}
          </h1>
          <ActionButton type="back" href="/resellers" />
        </div>
      </PageHeader>
      <div className="rounded-none shadow-none">
        <FormProvider {...resellerForm}>
          <form onSubmit={handleSubmit(onSubmit, onError)}>
            <Accordion>
              <Accordion.Panel>
                <Accordion.Title className="py-2 text-lg">
                  Basic Information
                </Accordion.Title>
                <Accordion.Content>
                  <BasicForm
                    reseller={reseller as TSresellerSchema}
                    isEdit={isEdit}
                  />
                </Accordion.Content>
              </Accordion.Panel>
              <Accordion.Panel>
                <Accordion.Title className="py-2 text-lg text-gray-900">
                  Billing Information
                </Accordion.Title>
                <Accordion.Content>
                  <BillingForm reseller={reseller as TSresellerSchema} />
                </Accordion.Content>
              </Accordion.Panel>
              <Accordion.Panel>
                <Accordion.Title className="py-2 text-lg text-gray-900">
                  Advance
                </Accordion.Title>
                <Accordion.Content>
                  <AdvanceForm reseller={reseller as TSresellerSchema} />
                </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>
      </div>
    </>
  );
};

export default ResellerForm;