/* eslint-disable no-console */

import { Modal, ModalHeader, ModalTitle } from "@/components/ui/modal/modal";
import { useModal } from "@/components/ui/modal/modal.hook";
import { OtpModal } from "@/components/widget/payment/otp-modal/otp-modal";
import { useLocale } from "@/hooks/useLocale";
import { useMasterpassStore } from "@/store/masterpass-store/use-masterpass-store";

import { MasterpassLoading } from "./masterpass-loading";

interface MasterpassOtpModalProps {
  setValidationCode: (value: string) => void;
  loading: boolean;
  closeModal?: () => void;
  onResendButton: () => void;
}

const MasterpassOtpModal = (props: MasterpassOtpModalProps) => {
  const { closeModal, modalOpen } = useModal({ open: true });
  const { masterpassState } = useMasterpassStore();

  const { t } = useLocale();
  return (
    <Modal
      size="xl"
      open={modalOpen}
      onClose={() => {
        if (props.closeModal) {
          props.closeModal();
          closeModal();
        } else {
          closeModal();
        }
      }}
      shouldCloseOnOverlayClick={false}
      header={
        <ModalHeader>
          <ModalTitle>{t("Phone Number Verification")}</ModalTitle>
        </ModalHeader>
      }
      footer
    >
      {props.loading ? (
        <div className="flex min-h-[250px] items-center justify-center">
          <MasterpassLoading />
        </div>
      ) : (
        <div className="flex min-h-[250px] flex-col items-center justify-center">
          <div className="mb-4 flex w-[312px] items-center justify-center">
            <span className="text-center text-sm text-gray-600">
              {t("Enter the verification code sent to {{phone}}.", {
                phone:
                  masterpassState.data?.payload?.masterpassUserData.msisdn!.substring(
                    1,
                  ),
              })}
            </span>
          </div>

          <OtpModal
            onResendButton={props.onResendButton}
            onSubmit={(validationCode: string) => {
              props.setValidationCode(validationCode);
            }}
          />
        </div>
      )}
    </Modal>
  );
};

export { MasterpassOtpModal };