"use client";
import ValidationError from "@/components/ValidationError";
import { User } from "@/interfaces/User";
import { usePermission } from "@/utils/auth/permission";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation } from "@tanstack/react-query";
import axios from "axios";
import { Accordion, Card } from "flowbite-react";
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 { TSclientSchema, clientSchema } from "../forms/schema/client-sync";
import AdvanceForm from "./advance-form";
import BasicForm from "./basic-form";
import ConnectivityForm from "./connectivity-form";

type Props = {
  client?: TSclientSchema;
  isEdit?: boolean;
};

const ClientSyncForm: FC<Props> = ({ client, isEdit = false }) => {
  const router = useRouter();
  const clientForm = useForm<TSclientSchema>({
    resolver: zodResolver(clientSchema),
    mode: "onChange",
    defaultValues: client || {},
  });

  const inputRef = useRef<HTMLInputElement>(null);

  const { handleSubmit, setValue } = clientForm;

  const {
    mutate: submitClient,
    isPending,
    error,
    isError,
    isSuccess,
  } = useMutation<User, any, TSclientSchema>({
    mutationFn: async (clientData) => {
      const api_url = `/api/mikrotik-auto-sync/${client?.id}`;
      const method = "post";
      const { data } = await axios({
        method,
        url: api_url,
        data: clientData,
      });
      return data.data;
    },
    onSuccess: () => {
      toast.success(`Client Import Successfully!`);
      router.push("/import-client");
    },
    onError: () => { },
  });

  const onSubmit = async (data: TSclientSchema) => {
    console.log(data);
    submitClient(data);
  };

  const onError = async (data: any) => {
    const item = Object.keys(data).at(0);
    console.log(item);
    console.log(data);
  };

  useEffect(() => {
    const status = client?.disabled === "true" ? 0 : 1;
    setValue("pppoe_password", client?.password);
    setValue("pppoe_username", client?.name);
    setValue("ip_address", client?.ipv6_routes);
    setValue("action", "import");
    setValue("mikrotik_profile", client?.profile);
    setValue("status", status);
  }, [client]);

  return (
    <>
      {isError && (
        <ValidationError
          message={error.message}
          data={error?.response?.data?.error?.errors}
        />
      )}
      <PageHeader>
        <div className="flex justify-between px-2">
          <h1 className="font-semibold text-xl text-gray-900 mt-1">
            {isEdit ? "Edit Client" : "Add New Client"}
          </h1>
          <ActionButton type="back" href={"/mikrotik-auto-sync"} />
        </div>
      </PageHeader>
      <Card className="rounded-none">
        <FormProvider {...clientForm}>
          <form onSubmit={handleSubmit(onSubmit, onError)}>
            <Accordion>
              <Accordion.Panel>
                <Accordion.Title className="py-2 text-lg">
                  Basic Information
                </Accordion.Title>
                <Accordion.Content>
                  <BasicForm client={client as TSclientSchema} />
                </Accordion.Content>
              </Accordion.Panel>
              <Accordion.Panel>
                <Accordion.Title className="py-2 text-lg text-gray-900">
                  Connectivity
                </Accordion.Title>
                <Accordion.Content>
                  <ConnectivityForm client={client as TSclientSchema} />
                </Accordion.Content>
              </Accordion.Panel>
              <Accordion.Panel>
                <Accordion.Title className="py-2 text-lg text-gray-900">
                  Advance
                </Accordion.Title>
                <Accordion.Content>
                  <AdvanceForm client={client as TSclientSchema} />
                </Accordion.Content>
              </Accordion.Panel>
            </Accordion>
            <input className="opacity-0" type="submit" ref={inputRef} />
          </form>
        </FormProvider>
        {usePermission("sync-clients.import") && (
          <ActionButton
            isLoading={isPending}
            type="submit"
            onClick={() => inputRef.current?.click()}
          />
        )}
      </Card>
    </>
  );
};
export default ClientSyncForm;