/* eslint-disable no-console */
import { useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { useBoolean } from "usehooks-ts";

import type { FormHandles } from "@/components/form/form";
import { MasterpassRegisterForm } from "@/components/widget/payment/masterpass-register-form/masterpass-register-form";
import { useListManagementMutation } from "@/services/masterpass/list-management/list-management.service";
import { useRegisterMutation } from "@/services/masterpass/register/register.service";
import { useResendOtpMutation } from "@/services/masterpass/resend-otp/resend-otp.service";
import { useValidateTransactionMutation } from "@/services/masterpass/validate-transaction/validate-transaction.service";
import { useMasterpassStore } from "@/store/masterpass-store/use-masterpass-store";

import { useMasterpass } from "../hooks/use-check-masterpass";
import { useMasterpassErrorModal } from "../hooks/use-masterpass-error-modal";
import { RSA } from "../lib/rsa/rsa";
import { MasterpassErrorModal } from "./masterpass-error-modal";
import { MasterpassOtpModal } from "./masterpass-otp-modal";

interface FormType {
  rtaPan: string;
  cardHolderName: string;
  expiryDate: string;
  cvc: string;
  accountAliasName: string;
  msisdn: {
    phoneNumber: string;
    dialCode: string;
  };
}

interface MasterpassNewCardProps {
  setActiveTab: (value: string) => void;
}

const MasterpassNewCard = (props: MasterpassNewCardProps) => {
  const { masterpassState, setMasterpassData } = useMasterpassStore();
  const [validateTransactionToken, setValidateTransactionToken] = useState("");
  const formRef = useRef<FormHandles>(null);
  const methods = useForm<FormType>();
  const openOtp = useBoolean(false);
  const loading = useBoolean(true);

  const {
    modalOpenMasterpassModal,
    openMasterpassErrorModal,
    closeMasterpassErrorModal,
    errorMessage,
    setErrorMessage,
  } = useMasterpassErrorModal();
  const { CheckListManagementCardStatus } = useMasterpass();
  const registerCard = useRegisterMutation({
    onSuccess: (data) => {
      if (data.success) {
        if (data.responseCode === "1444") {
          openOtp.setFalse();
          setErrorMessage(data.responseDesc);
          openMasterpassErrorModal();
        } else if (data.responseCode === "1441") {
          openOtp.setFalse();
          setErrorMessage(data.responseDesc);
          openMasterpassErrorModal();
        } else if (data.responseCode === "5310") {
          openOtp.setFalse();
          setErrorMessage(data.responseDesc);
          openMasterpassErrorModal();
        } else if (data.responseCode === "5001") {
          setValidateTransactionToken(data.token);
          loading.setFalse();
        }
      }
    },
  });
  const listManagementService = useListManagementMutation({
    onSuccess(data) {
      if (data.success) {
        if (data.cardList?.ListItem?.length > 0) {
          const cardList = CheckListManagementCardStatus(
            data.cardList.ListItem,
          );
          setMasterpassData({
            moduleName: "Hotel",
            payload: {
              ...masterpassState!.data!.payload,
              masterpassLoginState: true,
              cardList: cardList ?? [],
              selectedCard: cardList[0],
            },
          });
          loading.setFalse();
          openOtp.setFalse();
          props.setActiveTab("1");
        }
      }
    },
  });
  const validateTransactionService = useValidateTransactionMutation({
    onSuccess(data) {
      if (data.success) {
        listManagementService.mutate({
          referenceNo:
            masterpassState.data?.payload.masterpassUserData.referenceNumber!,
          token: masterpassState.data?.payload?.masterpassUserData.token!,
          msisdn: masterpassState.data?.payload?.masterpassUserData.msisdn!,
        });
      }
    },
  });

  const resendOtpMutation = useResendOtpMutation({
    onSuccess: (data) => {
      if (data.success) {
        if (data.responseCode === "5001") {
          loading.setFalse();
          setValidateTransactionToken(data.token);
        }
      }
    },
  });

  return (
    <div className="mt-6">
      <MasterpassRegisterForm
        masterpassFormRef={formRef}
        methods={methods}
        onSubmit={(value) => {
          openOtp.setTrue();
          registerCard.mutate({
            cardHolderName: value.cardHolderName,
            token: masterpassState.data?.payload?.masterpassUserData.token!,
            msisdn: value.msisdn.dialCode + value.msisdn.phoneNumber,
            expiryDate:
              value.expiryDate.substr(2, 2) + value.expiryDate.substr(0, 2),
            cvc: RSA.encrypt(value.cvc),
            rtaPan: RSA.encrypt(value.rtaPan),
            accountAliasName: value.accountAliasName,
          });
        }}
      />

      {openOtp.value && (
        <MasterpassOtpModal
          loading={loading.value}
          onResendButton={() => {
            loading.setTrue();
            resendOtpMutation.mutate({
              validationRefNo: validateTransactionToken,
            });
          }}
          setValidationCode={(value) => {
            loading.setTrue();
            validateTransactionService.mutate({
              validationRefNo: validateTransactionToken,
              userId: masterpassState.data?.payload?.masterpassUserData.msisdn!,
              referenceNo:
                masterpassState.data?.payload.masterpassUserData
                  .referenceNumber!,
              validationCode: value,
            });
          }}
        />
      )}
      {modalOpenMasterpassModal && (
        <MasterpassErrorModal
          modalState={modalOpenMasterpassModal}
          closeMasterpassErrorModal={() => closeMasterpassErrorModal()}
          message={errorMessage}
        />
      )}
    </div>
  );
};

export { MasterpassNewCard };