/* eslint-disable react/jsx-no-bind */
/* eslint-disable no-console */
import Image from "next/image";
import type { RefObject } from "react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useBoolean } from "usehooks-ts";

import FormPhoneInput from "@/components/form/components/related/form-phone-input";
import type { FormHandles } from "@/components/form/form";
import Form from "@/components/form/form";
import { Button } from "@/components/ui/button/button";
import { usePayment } from "@/features/modules/hotel/payment/hooks/use-hotel-payment";
import { useLocale } from "@/hooks/useLocale";
import { useGetMasterpassDataForPhoneMutation } from "@/services/eva-booking/payment/payment.service";
import { useLinkCardToClientMutation } from "@/services/masterpass/link-card-to-client/link-card-to-client.service";
import { useListManagementMutation } from "@/services/masterpass/list-management/list-management.service";
import { useResendOtpMutation } from "@/services/masterpass/resend-otp/resend-otp.service";
import { useUpdateUserMutation } from "@/services/masterpass/update-user/update-user.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 { MasterpassErrorModal } from "./masterpass-error-modal";
import { MasterpassOtpModal } from "./masterpass-otp-modal";

interface FormType {
  msisdn: {
    phoneNumber: string;
    dialCode: string;
  };
}
interface MasterpassAlreadyRegisterProps {
  setActiveTab: (value: string) => void;
  masterpassFormRef: RefObject<FormHandles>;
}

const MasterpassAlreadyRegister = (props: MasterpassAlreadyRegisterProps) => {
  const { masterpassState, setMasterpassData } = useMasterpassStore();
  const { paymentState } = usePayment();
  const openOtp = useBoolean(false);
  const loading = useBoolean(true);
  const methods = useForm<FormType>();
  const [validateTransactionToken, setValidateTransactionToken] = useState("");
  const {
    CheckListManagement,
    CheckUpdateUser,
    CheckListManagementCardStatus,
  } = useMasterpass();
  const {
    modalOpenMasterpassModal,
    openMasterpassErrorModal,
    closeMasterpassErrorModal,
    errorMessage,
    setErrorMessage,
  } = useMasterpassErrorModal();
  const { t } = useLocale();
  const updateUserServices = useUpdateUserMutation({
    onSuccess(data) {
      const errorCodes = ["1051", "1078", "1408", "6005"];
      if (errorCodes.includes(data.responseCode)) {
        openOtp.setFalse();
        setErrorMessage(data.responseDesc);
        openMasterpassErrorModal();
      } else if (data.responseCode) {
        const { showOtp } = CheckUpdateUser(data.responseCode);
        if (showOtp) {
          setValidateTransactionToken(data.token);
          loading.setFalse();
        }
      }
    },
  });
  const listManagementService = useListManagementMutation({
    onSuccess(data) {
      if (data.success) {
        const { updateUser } = CheckListManagement(data.responseCode);
        if (updateUser) {
          loading.setTrue();
          updateUserServices.mutate({
            token: masterpassState.data?.payload?.masterpassUserData.token!,
            msisdn: masterpassState.data?.payload.masterpassUserData.msisdn!,
            referenceNumber:
              masterpassState.data?.payload?.masterpassUserData
                .referenceNumber!,
            theNewValue:
              masterpassState.data?.payload?.masterpassUserData.userId!,
          });
        }
        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 linktoCartToClientService = useLinkCardToClientMutation({
    onSuccess(data) {
      if (data.responseCode === "1051") {
        openOtp.setFalse();
        setErrorMessage(data.responseDesc);
        openMasterpassErrorModal();
      } else if (data.responseCode === "3838") {
        listManagementService.mutate({
          referenceNo:
            masterpassState.data?.payload.masterpassUserData.referenceNumber!,
          token: masterpassState.data?.payload?.masterpassUserData.token!,
          msisdn: masterpassState.data?.payload?.masterpassUserData.msisdn!,
        });
      }
    },
  });
  const validateTransactionService = useValidateTransactionMutation({
    onSuccess(data) {
      if (data.success) {
        setTimeout(() => {
          listManagementService.mutate({
            referenceNo:
              masterpassState.data?.payload.masterpassUserData.referenceNumber!,
            token: masterpassState.data?.payload?.masterpassUserData.token!,
            msisdn: masterpassState.data?.payload?.masterpassUserData.msisdn!,
          });
        }, 10000);
      }
    },
  });

  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,
            },
          });
          updateUserServices.mutate({
            token: data.data.result.token!,
            msisdn: data.data.result.msisdn!,
            referenceNumber: data.data.result.referenceNumber!,
            theNewValue: data.data.result.userId!,
          });
        }
      },
    });

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

  return (
    <div className="mt-6">
      <Form
        ref={props.masterpassFormRef}
        mode="onSubmit"
        methods={methods}
        onSubmit={(value: FormType) => {
          const newMsisdn: string =
            value.msisdn.dialCode + value.msisdn.phoneNumber;
          if (
            newMsisdn !==
            masterpassState.data?.payload?.masterpassUserData.msisdn!
          ) {
            openOtp.setTrue();
            getMasterpassDataForPhoneMutateService.mutate({
              phone: newMsisdn,
              cartId: paymentState.payload.cartId!,
            });
          } else {
            openOtp.setTrue();
            linktoCartToClientService.mutate({
              msisdn: value.msisdn.dialCode + value.msisdn.phoneNumber,
              token: masterpassState.data?.payload?.masterpassUserData.token!,
              referenceNo:
                masterpassState.data?.payload?.masterpassUserData
                  .referenceNumber!,
            });
          }
        }}
      >
        <div className="flex flex-col gap-4">
          <div className="flex w-[440px] flex-col gap-4">
            <span className="text-sm text-gray-800">
              {t(
                "We could not find a Masterpass record for the phone number you specified on the previous screen. You can use your cards by entering your registered phone number.",
              )}
            </span>
            <div className="w-[344px]">
              <FormPhoneInput
                fullWidth
                name="msisdn"
                size="lg"
                rules={{
                  validate: (value) => {
                    if (!value || value?.phoneNumber === "")
                      return t("This field is required");
                    const phoneNumberRegex = /^[0-9]{10}$/;
                    if (!phoneNumberRegex.test(value.phoneNumber)) {
                      return t("Phone number is wrong");
                    }
                    return true;
                  },
                }}
                label={`${t("Telephone")}*`}
              />
            </div>
          </div>

          <div className="mt-6 flex items-center justify-between">
            <figure className="h-full">
              <Image
                src="/assets/images/masterpass-logo.png"
                alt="chip"
                width={154}
                height={10}
              />
            </figure>

            <Button
              className="min-w-[220px]"
              disabled={methods.watch("msisdn")?.phoneNumber === ""}
              onClick={(e) => {
                props.masterpassFormRef.current?.submit();
                e.preventDefault();
              }}
              size="xl"
              variant="primary"
            >
              {t("Continue")}
            </Button>
          </div>
        </div>
      </Form>
      {openOtp.value && (
        <MasterpassOtpModal
          loading={loading.value}
          onResendButton={() => {
            loading.setTrue();
            resendOtpMutation.mutate({
              validationRefNo: validateTransactionToken,
            });
          }}
          closeModal={() => openOtp.setFalse()}
          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 { MasterpassAlreadyRegister };