/* eslint-disable @typescript-eslint/no-unused-vars */
import {
  Button,
  LoadingOverlay,
  Modal,
  ModalProps,
  PasswordInput,
  TextInput,
} from "@mantine/core";
import { useForm, zodResolver } from "@mantine/form";
import _ from "lodash";
import { useEffect, useRef, useState } from "react";
import { z } from "zod";
import { updateWebBid } from "../../apis/web-bid";
import { useConfirmStore } from "../../lib/zustand/use-confirm";
import { IWebBid } from "../../system/type";
export interface IWebBidModelProps extends ModalProps {
  data: IWebBid | null;
  onUpdated?: () => void;
}

const schema = z.object({
  username: z.string().min(1, { message: "Username is required" }),
  password: z
    .string()
    .min(6, { message: "Password must be at least 6 characters long" }),
});

export default function WebAccountModal({
  data,
  onUpdated,
  ...props
}: IWebBidModelProps) {
  const form = useForm({
    validate: zodResolver(schema),
  });

  const [loading, setLoading] = useState(false);

  const prevData = useRef<IWebBid | null>(data);

  const { setConfirm } = useConfirmStore();

  const handleSubmit = async (values: typeof form.values) => {
    if (data) {
      setConfirm({
        title: "Update ?",
        message: `This account will be update`,
        handleOk: async () => {
          setLoading(true);
          const result = await updateWebBid(values);
          setLoading(false);

          if (!result) return;

          props.onClose();

          if (onUpdated) {
            onUpdated();
          }
        },
        okButton: {
          color: "blue",
          value: "Update",
        },
      });
    } else {
      setLoading(true);
      const result = await updateWebBid(values);
      setLoading(false);

      if (!result) return;

      props.onClose();

      if (onUpdated) {
        onUpdated();
      }
    }
  };

  useEffect(() => {
    form.reset();
    if (!data) return;

    form.setValues(data);

    prevData.current = data;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);

  useEffect(() => {
    if (!props.opened) {
      form.reset();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.opened]);

  return (
    <Modal
      className="relative"
      classNames={{
        header: "!flex !item-center !justify-center w-full",
      }}
      {...props}
      size={"xl"}
      title={<span className="text-xl font-bold">Account</span>}
      centered
    >
      <form
        onSubmit={form.onSubmit(handleSubmit)}
        className="grid grid-cols-2 gap-2.5"
      >
        <TextInput
          withAsterisk
          className="col-span-2"
          size="sm"
          label="Username"
          {...form.getInputProps("username")}
        />
        <PasswordInput
          withAsterisk
          className="col-span-2"
          size="sm"
          label="Password"
          {...form.getInputProps("password")}
        />

        <Button
          disabled={_.isEqual(form.getValues(), prevData.current)}
          className="col-span-2"
          type="submit"
          fullWidth
          size="sm"
          mt="md"
        >
          {data ? "Update" : "Create"}
        </Button>
      </form>

      <LoadingOverlay
        visible={loading}
        zIndex={1000}
        overlayProps={{ blur: 2 }}
      />
    </Modal>
  );
}