import {
  Checkbox,
  Dialog,
  DialogBody,
  DialogFooter,
  DialogHeader,
  IconButton,
  Typography,
} from "@material-tailwind/react";
import React, { useEffect, useState } from "react";

import ButtonCustom from "../../components/Button";
import { _useScopedI18n } from "../../i18n/client";

export type NowpaymentsDepositNoticeDialogProps = {
  open: boolean;
  setOpen: (value: boolean) => void;
  actionLoading: boolean;
  onConfirm: () => void;
};

export function NowpaymentsDepositNoticeDialog({
  open,
  setOpen,
  actionLoading,
  onConfirm,
}: NowpaymentsDepositNoticeDialogProps) {
  const scopeT = _useScopedI18n("payment.nowpaymentsDepositNoticeDialog");
  const [confirmed, setConfirmed] = useState(false);

  useEffect(() => {
    if (open) {
      setConfirmed(false);
    }
  }, [open]);

  return (
    <Dialog
      open={open}
      size="xs"
      handler={() => {
        if (!actionLoading) setOpen(false);
      }}
      className="p-2 md:p-5 overflow-y-auto max-h-[92vh] nowpayments-deposit-notice-dialog"
    >
      <DialogHeader className="flex flex-col gap-2 p-0 pb-2 shrink-0">
        <div className="text-right size-full">
          <IconButton
            color="blue-gray"
            size="sm"
            variant="text"
            disabled={actionLoading}
            onClick={() => setOpen(false)}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
              className="h-5 w-5"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </IconButton>
        </div>
        <Typography
          variant="h4"
          className="text-base md:text-xl font-semibold text-black-500 text-left w-full"
        >
          {scopeT("header")}
        </Typography>
      </DialogHeader>
      <DialogBody className="flex flex-col gap-3 pl-1 pr-2 overflow-y-auto max-h-[55vh] md:max-h-[60vh]">
        <Typography className="text-xs md:text-sm text-black-500 font-medium">
          {scopeT("p1")}
        </Typography>
        <Typography className="text-xs md:text-sm text-black-500 font-medium">
          {scopeT("p2")}
        </Typography>
        <Typography className="text-xs md:text-sm text-black-500 font-medium">
          {scopeT("p3")}
        </Typography>
        <Typography className="text-xs md:text-sm text-black-500 font-medium">
          {scopeT("p4")}
        </Typography>
        <Typography className="text-xs md:text-sm text-black-500 font-medium">
          {scopeT("p5")}
        </Typography>
        <div className="flex items-center gap-2 pt-2">
          <Checkbox
            color="green"
            checked={confirmed}
            onChange={() => setConfirmed(!confirmed)}
            disabled={actionLoading}
            crossOrigin={undefined}
            className="mt-0.5"
          />
          <Typography className="text-xs md:text-sm text-black-500 font-medium">
            {scopeT("checkbox")}
          </Typography>
        </div>
      </DialogBody>
      <DialogFooter className="flex justify-center items-center pt-2 shrink-0">
        <ButtonCustom
          icon={undefined}
          disabled={actionLoading || !confirmed}
          onClick={onConfirm}
          loading={actionLoading}
        >
          {scopeT("nextBtn")}
        </ButtonCustom>
      </DialogFooter>
    </Dialog>
  );
}
