import { FC, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import Button from "./Button";
import DefaulModal from "./DefaulModal";
import Input from "./Input";

type Props = {
  isOpen: boolean;
  close: () => void;
  onConfirm: () => void;
  isLoading?: boolean;
  itemName: string;
  message?: string;
};

const DeleteNameConfirmModal: FC<Props> = ({
  isOpen,
  close,
  onConfirm,
  isLoading = false,
  itemName,
  message,
}) => {
  const { t } = useTranslation("global");
  const [typedName, setTypedName] = useState("");

  useEffect(() => {
    if (!isOpen) {
      setTypedName("");
    }
  }, [isOpen]);

  const isNameMatched = typedName.trim() === itemName.trim();

  return (
    <DefaulModal
      open={isOpen}
      close={close}
      title_header={t("confrim.subject")}
      isHeader
    >
      <div className="mt-6">
        <div className="text-sm text-center">
          {message ?? t("taskmanager.delete_confirm_message", { name: itemName })}
        </div>

        <div className="mt-5">
          <Input
            value={typedName}
            onChange={(e) => setTypedName(e.target.value)}
            placeholder={t("taskmanager.delete_confirm_placeholder")}
            className="text-center"
          />
        </div>

        <div className="flex gap-4 justify-center mt-10">
          <Button
            label={t("confrim.yes")}
            onClick={onConfirm}
            isLoading={isLoading}
            disabled={!isNameMatched}
          />
          <Button
            label={t("confrim.cancel")}
            className="bg-transparent text-black border border-primary"
            onClick={close}
          />
        </div>
      </div>
    </DefaulModal>
  );
};

export default DeleteNameConfirmModal;
