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

import alertIcon from "../../../public/img/alert-Icon.png";
import ButtonCustom from "../../components/Button";
import CustomNextImage from "../../components/CustomNextImage";
import { ROUTES } from "../../constants/routes";
import { _useScopedI18n } from "../../i18n/client";

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

export function DisclaimerAlertDialog({
  open,
  setOpen,
  actionLoading,
  onConfirm,
}: DisclaimerAlertDialogProps) {
  //
  const scopeT = _useScopedI18n("payment.disclaimerAlertDialog");

  const [allChecked, setAllChecked] = useState(false);
  const [isPrivacyChecked, setIsPrivacyChecked] = useState(false);
  const [isTermsChecked, setIsTermsChecked] = useState(false);
  const [isRiskChecked, setIsRiskChecked] = useState(false);
  const [legalDocs, setLegalDocs] = useState(false);

  useEffect(() => {
    // Check if all checkboxes are checked
    if (isPrivacyChecked && isTermsChecked && isRiskChecked && legalDocs) {
      (async () => await setAllChecked(true))();
    } else {
      (async () => await setAllChecked(false))();
    }
  }, [isPrivacyChecked, isTermsChecked, isRiskChecked, legalDocs]);

  return (
    <>
      <Dialog
        open={open}
        size="xs"
        handler={() => {
          setOpen(false);
        }}
        className="p-2 md:p-5 overflow-y-auto h-fit disclaimer-alert-dialog"
      >
        <DialogHeader className="flex flex-col gap-2 p-0 pb-0">
          <div className="text-right size-full">
            <IconButton
              color="blue-gray"
              size="sm"
              variant="text"
              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>
          <CustomNextImage
            src={alertIcon.src}
            alt={"alertIcon"}
            width={45}
            height={45}
          ></CustomNextImage>
          <Typography
            variant="h4"
            className="text-base md:text-xl font-semibold text-black-500"
          >
            {scopeT("header")}
          </Typography>
        </DialogHeader>
        <DialogBody className="disclaimer-body pl-1 pr-3">
          <div className="flex items-center">
            <Checkbox
              color="green"
              checked={isTermsChecked}
              onChange={() => setIsTermsChecked(!isTermsChecked)}
              crossOrigin={undefined}
            />
            <Typography className="text-xs md:text-sm text-black-500 font-medium">
              {scopeT("acceptCheckboxTerms")}
              <Typography
                as="a"
                href={ROUTES.dashboard.termsAndConditions}
                target="_blank"
                className="inline underline text-xs md:text-sm font-medium transition-colors text-purple-500 hover:text-purple-400 hover:underline"
              >
                &nbsp;{scopeT("termsAndC")}
              </Typography>
              .
            </Typography>
          </div>

          <div className="flex items-center">
            <Checkbox
              color="green"
              checked={isRiskChecked}
              onChange={() => setIsRiskChecked(!isRiskChecked)}
              crossOrigin={undefined}
            />
            <Typography className="text-xs md:text-sm text-black-500 font-medium">
              {scopeT("acceptCheckboxRickDisclosure")}
              <Typography
                as="a"
                href={ROUTES.dashboard.riskDisclosure}
                target="_blank"
                className="inline underline text-xs md:text-sm font-medium transition-colors text-purple-500 hover:text-purple-400 hover:underline"
              >
                &nbsp;{scopeT("riskDisclosure")}
              </Typography>
              .
            </Typography>
          </div>

          <div className="flex items-center">
            <Checkbox
              color="green"
              checked={isPrivacyChecked}
              onChange={() => setIsPrivacyChecked(!isPrivacyChecked)}
              crossOrigin={undefined}
            />
            <Typography className="text-xs md:text-sm text-black-500 font-medium">
              {scopeT("acceptCheckboxTerms")}
              <Typography
                as="a"
                href={ROUTES.dashboard.privacyPolicy}
                target="_blank"
                className="inline underline text-xs md:text-sm font-medium transition-colors text-purple-500 hover:text-purple-400 hover:underline"
              >
                &nbsp;{scopeT("privacyP")}
              </Typography>
              .
            </Typography>
          </div>

          <div className="flex items-center">
            <Checkbox
              color="green"
              checked={legalDocs}
              onChange={() => setLegalDocs(!legalDocs)}
              crossOrigin={undefined}
            />
            <Typography className="text-xs md:text-sm text-black-500 font-medium">
              {scopeT("legalTermsAccept")}
              <Typography
                as="a"
                href="https://docs.horystech.com/legal-documents/terms-and-conditions"
                target="_blank"
                className="inline underline text-xs md:text-sm font-medium transition-colors text-purple-500 hover:text-purple-400 hover:underline"
              >
                &nbsp;{scopeT("termsAndC")}&nbsp;
              </Typography>
              {scopeT("legalOtherTermsAccept")}
              <Typography
                as="a"
                href="https://docs.horystech.com/"
                target="_blank"
                className="inline underline text-xs md:text-sm font-medium transition-colors text-purple-500 hover:text-purple-400 hover:underline"
              >
                &nbsp;{scopeT("here")}
              </Typography>
              .
            </Typography>
          </div>
        </DialogBody>
        <DialogFooter className="flex justify-center items-center">
          <ButtonCustom
            icon={undefined}
            disabled={actionLoading || !allChecked}
            onClick={onConfirm}
            loading={actionLoading}
          >
            {scopeT("confirmBtn")}
          </ButtonCustom>
        </DialogFooter>
      </Dialog>
    </>
  );
}
