/* eslint-disable no-console */
import type { RefObject } from "react";
import { 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 { TabPaymentOption } from "@/components/widget/payment/tab-payment-option/tab-payment-option";
import { WhatIsAMasterpassDialog } from "@/components/widget/payment/what-is-a-masterpass-dialog/what-is-a-masterpass-dialog";
import { usePayment } from "@/features/modules/hotel/payment/hooks/use-hotel-payment";
import { useBreakpoints } from "@/hooks/useBreakpoints";
import { useLocale } from "@/hooks/useLocale";
import { useGetMasterpassDataForPhoneMutation } from "@/services/eva-booking/payment/payment.service";
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 { MasterpassAlreadyRegister } from "./masterpass-already-register";
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 MasterpassSignUpNowProps {
  masterpassFormRef: RefObject<FormHandles>;
}

const MasterpassSignUpNow = (props: MasterpassSignUpNowProps) => {
  const { masterpassState, setMasterpassData } = useMasterpassStore();
  const openOtp = useBoolean(false);
  const loading = useBoolean(true);
  const [validateTransactionToken, setValidateTransactionToken] = useState("");
  const {
    modalOpenMasterpassModal,
    openMasterpassErrorModal,
    closeMasterpassErrorModal,
    errorMessage,
    setErrorMessage,
  } = useMasterpassErrorModal();
  const { CheckListManagementCardStatus } = useMasterpass();
  const { t } = useLocale();
  const methods = useForm<FormType>();
  const { paymentState } = usePayment();
  const { isDesktop } = useBreakpoints();
  const registerCard = useRegisterMutation({
    onSuccess: (data) => {
      if (data.success) {
        if (data.responseCode === "5008") {
          setValidateTransactionToken(data.token);
          loading.setFalse();
        } else {
          openOtp.setFalse();
          setErrorMessage(data.responseDesc);
          openMasterpassErrorModal();
        }
      }
    },
  });
  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();
        }
      }
    },
  });
  const validateTransactionService = useValidateTransactionMutation({
    onSuccess(data) {
      if (data.success) {
        if (data.responseCode === "5001") {
          setValidateTransactionToken(data.token);
          openOtp.setTrue();
        } else {
          listManagementService.mutate({
            referenceNo:
              masterpassState.data?.payload.masterpassUserData.referenceNumber!,
            token: masterpassState.data?.payload?.masterpassUserData.token!,
            msisdn: masterpassState.data?.payload?.masterpassUserData.msisdn!,
          });
        }
      }
    },
  });
  const [activeTab, setActiveTab] = useState<"1" | "2">("1");

  const getMasterpassDataForPhoneMutateService =
    useGetMasterpassDataForPhoneMutation({
      onSuccess(data) {
        if (data.data.success) {
          setMasterpassData({
            moduleName: "Hotel",
            payload: {
              ...masterpassState!.data!.payload,
              masterpassLoginState: false,
              masterpassOtherUser: true,
              cardList: [],
              masterpassUserData: data.data.result,
            },
          });
          registerCard.mutate({
            cardHolderName: methods.watch("cardHolderName"),
            token: data.data.result.token!,
            msisdn:
              methods.watch("msisdn").dialCode +
              methods.watch("msisdn").phoneNumber,
            expiryDate:
              methods.watch("expiryDate").substr(2, 2) +
              methods.watch("expiryDate").substr(0, 2),
            cvc: RSA.encrypt(methods.watch("cvc")),
            rtaPan: RSA.encrypt(methods.watch("rtaPan")),
            accountAliasName: methods.watch("accountAliasName"),
          });
        }
      },
    });

  const resendOtpMutation = useResendOtpMutation({
    onSuccess: (data) => {
      if (data.success) {
        if (data.responseCode === "5001") {
          loading.setFalse();
          setValidateTransactionToken(data.token);
        }
      }
    },
  });
  return (
    <div className="relative mt-6">
      <TabPaymentOption
        defaultValue={activeTab}
        setActiveTab={(value: string) => setActiveTab(value as "1" | "2")}
        firstTabTitle={t("Register now")}
        secondTabTitle={t("Are you already registered?")}
        firstTab={
          <MasterpassRegisterForm
            masterpassFormRef={props.masterpassFormRef}
            methods={methods}
            onSubmit={(value) => {
              openOtp.setTrue();
              getMasterpassDataForPhoneMutateService.mutate({
                phone: value.msisdn.dialCode + value.msisdn.phoneNumber,
                cartId: paymentState.payload.cartId!,
              });
            }}
          />
        }
        secondTab={
          <MasterpassAlreadyRegister
            masterpassFormRef={props.masterpassFormRef}
            setActiveTab={(value: string) => setActiveTab(value as "1" | "2")}
          />
        }
      />
      <div
        className={`absolute right-0 ${isDesktop ? "top-[2%]" : "top-[1%]"}`}
      >
        <WhatIsAMasterpassDialog />
      </div>
      {openOtp.value && (
        <MasterpassOtpModal
          loading={loading.value}
          onResendButton={() => {
            loading.setTrue();
            resendOtpMutation.mutate({
              validationRefNo: validateTransactionToken,
            });
          }}
          closeModal={() => openOtp.setFalse()}
          setValidationCode={(value) => {
            validateTransactionService.mutate({
              validationRefNo: validateTransactionToken,
              userId: masterpassState.data?.payload?.masterpassUserData.msisdn!,
              referenceNo:
                masterpassState.data?.payload.masterpassUserData
                  .referenceNumber!,
              validationCode: value,
            });
            openOtp.setFalse();
          }}
        />
      )}
      {modalOpenMasterpassModal && (
        <MasterpassErrorModal
          modalState={modalOpenMasterpassModal}
          closeMasterpassErrorModal={() => closeMasterpassErrorModal()}
          message={errorMessage}
        />
      )}
    </div>
  );
};

export { MasterpassSignUpNow };