"use client";
import ValidationError from "@/components/ValidationError";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { Modal, Spinner } from "flowbite-react";
import { FC, useRef } from "react";
import { FormProvider, useForm } from "react-hook-form";
import Button from "../Button";
import Toasts from "../Toasts";
import { InputField, Radio, Textarea } from "../forms/Inputs";
import { TSnetworkSchema, networkSchema } from "../forms/schema/network";

type Props = {
  network?: TSnetworkSchema;
  mode?: string;
  isOpen: boolean;
  setOpen: (x: boolean) => void;
};

const NetworkForm: FC<Props> = ({
  network,
  isOpen,
  setOpen,
  mode = "create",
}) => {
  const queryClient = useQueryClient();

  const networkForm = useForm<TSnetworkSchema>({
    resolver: zodResolver(networkSchema),
    mode: "onChange",
    defaultValues: network as TSnetworkSchema,
  });

  const inputRef = useRef<HTMLInputElement>(null);

  const {
    handleSubmit,
    reset,
    register,
    formState: { errors },
  } = networkForm;

  const {
    mutate: submitNetwork,
    isPending,
    isError,
    error,
    isSuccess,
  } = useMutation({
    mutationFn: async (networkData: TSnetworkSchema) => {
      const api_url =
        mode === "create" ? `/api/networks` : `/api/networks/${network?.id}`;
      const method = mode === "create" ? "post" : "put";
      const { data } = await axios({
        method: method,
        url: api_url,
        data: networkData,
      });
      return data?.data as TSnetworkSchema;
    },
    onSuccess: () => {
      setOpen(false);
      reset();
      queryClient.invalidateQueries({ queryKey: ["networks"] });
    },
    onError: (error: any) => {
      setOpen(false);
      reset();
    },
  });
  const onSubmit = async (data: TSnetworkSchema) => {
    console.log(data);
    submitNetwork(data);
  };

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

  return (
    <>
      {isError && (
        <ValidationError
          message={error?.message}
          data={error?.response?.data?.error?.errors}
        />
      )}
      {isSuccess && <Toasts message="Network created successful!" />}
      <Modal onClose={() => setOpen(false)} show={isOpen}>
        <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
          {mode === "create" ? (
            <p className="font-normal">Add new network</p>
          ) : (
            <p className="font-normal">Edit network</p>
          )}
        </Modal.Header>
        <Modal.Body>
          <FormProvider {...networkForm}>
            <form onSubmit={handleSubmit(onSubmit, onError)}>
              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div className="left">
                  <div className="mt-1">
                    <InputField
                      labelText="Name"
                      name="name"
                      placeholder="Network Name"
                      errors={errors}
                      mandatory={true}
                    />
                  </div>
                  <div className="mt-1">
                    <InputField
                      labelText="Mikrotik User"
                      name="mikrotik_user"
                      placeholder="Mikrotik User"
                      errors={errors}
                      mandatory={true}
                    />
                  </div>
                  <div className="mt-1">
                    <InputField
                      labelText="Mikrotik Password"
                      name="mikrotik_password"
                      placeholder="Mikrorik Password"
                      errors={errors}
                      mandatory={true}
                    />
                  </div>
                  <div className="mt-1">
                    <InputField
                      labelText="Web Port"
                      name="web_port"
                      placeholder="IP>Service>www"
                      errors={errors}
                    />
                  </div>
                </div>
                <div className="right">
                  <div className="mt-1">
                    <InputField
                      labelText="IP Address"
                      name="ip_address"
                      placeholder="IP address"
                      errors={errors}
                      mandatory={true}
                    />
                  </div>
                  <div className="mt-1">
                    <Radio
                      groupLabel="Mikrotik sync status"
                      options={[
                        { label: "Yes", value: 1 },
                        { label: "No", value: 0 },
                      ]}
                      defaultValue={network?.auto_client_mikrotik_status ?? 0}
                      name="auto_client_mikrotik_status"
                    />
                  </div>
                  <div className="mt-1">
                    <Radio
                      groupLabel="Auto Sync status"
                      options={[
                        { label: "Yes", value: 1 },
                        { label: "No", value: 0 },
                      ]}
                      defaultValue={network?.auto_sync_status ?? 0}
                      name="auto_sync_status"
                    />
                  </div>
                  <div className="mt-1">
                    <Radio
                      groupLabel="Graph status"
                      options={[
                        { label: "Yes", value: 1 },
                        { label: "No", value: 0 },
                      ]}
                      defaultValue={network?.graph_status ?? 0}
                      name="graph_status"
                    />
                  </div>
                </div>
              </div>
              <div>
                <Textarea labelText="Note" name="notes" rows={2} />
              </div>
              <input
                className="opacity-0"
                type="submit"
                ref={inputRef}
                placeholder="Notes"
              />
            </form>
          </FormProvider>
        </Modal.Body>
        <Modal.Footer>
          <Button color="blue" onClick={() => inputRef.current?.click()}>
            {isPending && (
              <Spinner aria-label="Spinner button example" size="sm" />
            )}
            Submit
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default NetworkForm;