import React, { useCallback, useEffect, useMemo, useState } from "react";

import classNames from "classnames";
import {
  AsYouTypeFormatter,
  PhoneNumberFormat,
  PhoneNumberUtil,
} from "google-libphonenumber";
import { useDispatch, useSelector } from "react-redux";

import { off, on } from "@enact/core/dispatcher";
import spotlight, { Spotlight } from "@enact/spotlight";
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import { Spottable } from "@enact/spotlight/Spottable";

import defaultImage from "../../../assets/images/img-thumb-empty-144@3x.png";
import { types } from "../../actions/actionTypes";
import { clearSMS, sendSms } from "../../actions/appDataActions";
import {
  changeLocalSettings,
  setHidePopup,
  setShowPopup,
} from "../../actions/commonActions";
import {
  clearRegisterDeviceInfo,
  getDeviceAdditionInfo,
  registerDeviceInfo,
} from "../../actions/deviceActions";
import {
  clearCurationCoupon,
  setEventIssueReq,
} from "../../actions/eventActions";
import { sendLogShopByMobile } from "../../actions/logActions";
import { ACTIVE_POPUP, LOG_TP_NO } from "../../utils/Config";
import {
  $L,
  decryptPhoneNumber,
  encryptPhoneNumber,
} from "../../utils/helperMethods";
import CustomImage from "../CustomImage/CustomImage";
import TButton from "../TButton/TButton";
import TPopUp from "../TPopUp/TPopUp";
import HistoryPhoneNumber from "./HistoryPhoneNumber/HistoryPhoneNumber";
import css from "./MobileSendPopUp.module.less";
import SMSNumKeyPad from "./SMSNumKeyPad";

const SECRET_KEY = "fy7BTKuM9eeTQqEC9sF3Iw5qG43Aaip";

const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
);

const InputContainer = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
);

const SpottableComponent = Spottable("div");

export default function MobileSendPopUp({
  open,
  onClose,
  title,
  subTitle,
  productImg,
  productPrice,
  smsTpCd,
  smsText,
  prdtId,
  curationId,
  patnrId,
  evntId,
  evntTpCd,
  isCurationEvnt,
  hotelId,
  hotelNm,
  hotelDtlUrl,
  shopByMobileLogRef,
  spotlightId,
}) {
  const deviceInfo = useSelector((state) => state.device.deviceInfo);
  const [mobileNumber, setMobileNumber] = useState("");
  const [recentSentNumber, setRecentSentNumber] = useState([]);
  const [keyPadOff, setKeyPadOff] = useState(false);
  const [smsRetCode, setSmsRetCode] = useState(undefined);
  const [chkAgreeBtn, setChkAgreeBtn] = useState(false);
  const [popText, setPopText] = useState(false);
  const [spotlightDisabled, setSpotlightDisabled] = useState(true);
  const { httpHeader } = useSelector((state) => state.common);
  const regDeviceInfoRetCode = useSelector(
    (state) => state.device?.regDeviceInfoData?.retCode
  );
  const smsRetCodeResData = useSelector(
    (state) => state.appData.sendSms?.retCode
  );
  const { phoneNumberList } = useSelector(
    (state) => state.localSettings.phoneNumbers
  );
  const curationCouponSuccess = useSelector(
    (state) => state.event.curationCouponSuccess
  );
  const popupVisible = useSelector((state) => state.common.popup.popupVisible);
  const deviceCountryCode = httpHeader["X-Device-Country"];
  const dispatch = useDispatch();

  const getMaxNum = useCallback((_deviceCountryCode) => {
    if (_deviceCountryCode === "DE" || _deviceCountryCode === "GB") {
      return 11;
    } else if (_deviceCountryCode === "KR") {
      return 12;
    } else return 10;
  }, []);

  const MSG_SUCCESS_SENT = $L("Text Send to") + " " + mobileNumber;
  const MSG_SEND_LINK = $L("Send a purchase link for this item via SMS");

  const handleClickSelect = (_phoneNumber) => {
    setKeyPadOff((state) => !state);
    setMobileNumber(_phoneNumber);
  };

  const handleInputClick = () => {
    setKeyPadOff(false);
    if (recentSentNumber && recentSentNumber.length > 0 && keyPadOff) {
      setMobileNumber(recentSentNumber[0]);
    }
  };

  const getRawPhoneNumber = useCallback(
    (key) => {
      let rawPhoneNumber = `${mobileNumber}${key}`.replace(/\D/g, "");
      if (rawPhoneNumber.length === getMaxNum(deviceCountryCode)) {
        Spotlight.focus("agreeAndSend");
      }
      if (rawPhoneNumber.length > getMaxNum(deviceCountryCode)) {
        return;
      }
      const phoneUtil = PhoneNumberUtil.getInstance();
      const asYouTypeFormatter = new AsYouTypeFormatter(deviceCountryCode);

      try {
        let numberProto = phoneUtil.parse(rawPhoneNumber, deviceCountryCode);
        if (
          phoneUtil.isValidNumber(numberProto) &&
          phoneUtil.isValidNumberForRegion(numberProto, deviceCountryCode)
        ) {
          rawPhoneNumber = phoneUtil.format(
            numberProto,
            PhoneNumberFormat.NATIONAL
          );
          if (deviceCountryCode === "RU" && rawPhoneNumber.startsWith("8")) {
            rawPhoneNumber = rawPhoneNumber.substring(1);
          }
        } else {
          let formattedNumber = "";

          for (let i = 0; i < rawPhoneNumber.length; i++) {
            formattedNumber = asYouTypeFormatter.inputDigit(
              Number(rawPhoneNumber[i])
            );
          }

          rawPhoneNumber = formattedNumber;
        }
      } catch (e) {
        rawPhoneNumber = `${mobileNumber}${key}`;
      } finally {
        setMobileNumber(rawPhoneNumber);
      }
    },
    [mobileNumber, deviceCountryCode]
  );

  const getBackspaceRawNumber = useCallback(() => {
    let rawPhoneNumber = mobileNumber.replace(/\D/g, "").slice(0, -1);
    const phoneUtil = PhoneNumberUtil.getInstance();
    const asYouTypeFormatter = new AsYouTypeFormatter(deviceCountryCode);

    try {
      let numberProto = phoneUtil.parse(rawPhoneNumber, deviceCountryCode);
      if (
        phoneUtil.isValidNumber(numberProto) &&
        phoneUtil.isValidNumberForRegion(numberProto, deviceCountryCode)
      ) {
        rawPhoneNumber = phoneUtil.format(
          numberProto,
          PhoneNumberFormat.NATIONAL
        );
      } else {
        let formattedNumber = "";

        for (let i = 0; i < rawPhoneNumber.length; i++) {
          formattedNumber = asYouTypeFormatter.inputDigit(
            Number(rawPhoneNumber[i])
          );
        }

        rawPhoneNumber = formattedNumber;
      }
    } catch (e) {
      rawPhoneNumber = mobileNumber.slice(0, -1);
    } finally {
      setMobileNumber(rawPhoneNumber);
    }
  }, [mobileNumber, deviceCountryCode]);

  const handleKeydown = useCallback(
    (ev) => {
      if (ev && ev.key >= 0 && ev.key <= 9) {
        getRawPhoneNumber(ev.key);
      } else if (ev.key === "Backspace") {
        getBackspaceRawNumber();
      }
    },
    [mobileNumber]
  );

  useEffect(() => {
    on("keydown", handleKeydown);
    return () => {
      off("keydown", handleKeydown);
    };
  }, [handleKeydown]);

  useEffect(() => {
    if (!deviceInfo) {
      dispatch(getDeviceAdditionInfo());
    }
  }, [deviceInfo, dispatch]);

  useEffect(() => {
    if (!chkAgreeBtn) {
      if (recentSentNumber && recentSentNumber.length > 0) {
        setKeyPadOff(true);
        setMobileNumber(recentSentNumber[0]);
      } else {
        setKeyPadOff(false);
        setMobileNumber("");
      }
    }
  }, [recentSentNumber]);

  const numKeypadClicked = useCallback(
    (key) => {
      if (key === "clear") {
        setMobileNumber("");
      } else if (key == "backspace") {
        getBackspaceRawNumber();
      } else {
        getRawPhoneNumber(key);
      }
    },
    [deviceCountryCode, mobileNumber]
  );

  const handleDelete = (selectedIndex) => {
    if (recentSentNumber) {
      const updateItems = recentSentNumber.filter(
        (_, index) => index !== selectedIndex
      );
      setRecentSentNumber(updateItems);

      const encryptedNumbers = updateItems.map(encryptPhoneNumber);

      dispatch(
        changeLocalSettings({
          phoneNumbers: {
            phoneNumberList: encryptedNumbers,
          },
        })
      );
      setTimeout(() => {
        spotlight.focus("history-container");
      });
    }
  };

  const handleAgreeSendClick = useCallback(() => {
    if (!mobileNumber) return;

    let naturalNumber = mobileNumber.replace(/\D/g, "");

    if (deviceCountryCode === "KR") {
      naturalNumber = "82" + naturalNumber;
    }

    if (recentSentNumber && recentSentNumber.length > 0) {
      const updatedNumbers = [...recentSentNumber];

      const existingNumberIndex = updatedNumbers.findIndex(
        (existingNum) => existingNum === mobileNumber
      );
      if (existingNumberIndex !== -1) {
        updatedNumbers.splice(existingNumberIndex, 1);
      }

      if (updatedNumbers.length >= 5) {
        updatedNumbers.pop();
      }

      updatedNumbers.unshift(mobileNumber);
      setChkAgreeBtn(true);
      setRecentSentNumber(updatedNumbers);

      const encryptedNumbers = updatedNumbers.map(encryptPhoneNumber);

      dispatch(
        changeLocalSettings({
          phoneNumbers: {
            phoneNumberList: encryptedNumbers,
          },
        })
      );
    } else {
      setRecentSentNumber([mobileNumber]);
      dispatch(
        changeLocalSettings({
          phoneNumbers: {
            phoneNumberList: [encryptPhoneNumber(mobileNumber)],
          },
        })
      );
    }

    if (isCurationEvnt) {
      dispatch(
        setEventIssueReq({
          evntTpCd,
          evntId,
          mbphNo: naturalNumber,
          cntryCd: deviceCountryCode,
        })
      );
      return;
    }
    if (deviceInfo && smsTpCd) {
      let params = {
        dvcIndex: deviceInfo.dvcIndex,
        mbphNo: naturalNumber,
        smsTpCd,
        patnrId,
        evntId,
        curationId,
        smsText,
        prdtId,
      };

      // 호텔일 경우 날려야 하는 경우
      if (smsTpCd === "APP00205") {
        params = { ...params, hotelId, hotelNm, hotelDtlUrl, curationId };
      }
      if (smsTpCd === "APP00204") {
        params = { ...params, curationId };
      }
      dispatch(sendSms(params));
    }
    // EVT00101 & APP00207(welcome) EVT00103 & APP00209 (welcome+Prizes) : smsTpCd 값을 받지 않음
    if (evntTpCd === "EVT00101" || evntTpCd === "EVT00103") {
      dispatch(
        registerDeviceInfo({
          evntTpCd,
          evntId,
          evntApplcnFlag: "Y",
          entryMenu: "TermsPop",
          mbphNo: naturalNumber,
        })
      );
    }
  }, [
    dispatch,
    mobileNumber,
    smsTpCd,
    evntTpCd,
    deviceInfo,
    deviceCountryCode,
  ]);

  const _onClose = useCallback(
    (e) => {
      if (e.target) {
        dispatch(clearSMS());
        dispatch(clearCurationCoupon());
        setSmsRetCode(undefined);
      }
      onClose();
      dispatch(setShowPopup(ACTIVE_POPUP.smsPopup));

      setTimeout(() => Spotlight.focus("agreeAndSend"));
    },
    [dispatch, smsRetCode]
  );

  useEffect(() => {
    setSmsRetCode(smsRetCodeResData);

    let timer;

    if (
      smsRetCodeResData === 0 ||
      regDeviceInfoRetCode === 0 ||
      curationCouponSuccess === 0
    ) {
      if (shopByMobileLogRef) {
        let params = {
          ...shopByMobileLogRef.current,
          logTpNo: LOG_TP_NO.SHOP_BY_MOBILE.AGREE_AND_SEND,
          mbphNoFlag: "Y",
          trmsAgrFlag: "Y",
        };

        dispatch(sendLogShopByMobile(params));
        shopByMobileLogRef.current = null;
      }

      timer = setTimeout(() => {
        dispatch(setHidePopup());
        if (spotlightId) Spotlight.focus(spotlightId);
        else Spotlight.focus();
      }, 3000);

      return () => clearTimeout(timer);
    }
  }, [
    shopByMobileLogRef,
    smsRetCodeResData,
    regDeviceInfoRetCode,
    curationCouponSuccess,
    spotlightId,
  ]);

  useEffect(() => {
    // retCode initialize
    return () => {
      dispatch(clearSMS());
      dispatch(clearRegisterDeviceInfo());
      dispatch(clearCurationCoupon());
      dispatch(setHidePopup());
    };
  }, [dispatch]);

  const getSmsErrorMsg = useMemo(() => {
    const SMS_ERROR_502 = $L("The event information has not been registered");
    const SMS_ERROR_903 = $L("You have exceeded the daily text limit.");
    const SMS_ERROR_904 = $L(
      "You have exceeded the text limit for this product."
    );
    const SMS_ERROR_905 = $L(
      "This number is currently blocked. To receive a message, please send UNSTOP to the number below. 07860 064195"
    );
    const SMS_ERROR_906 = $L("Sorry. This item is sold out.");
    const SMS_ERROR_600 = $L("This device had received first time coupon.");
    const SMS_ERROR_601 = $L("There is no coupon.");
    const SMS_ERROR_900 = $L("Failed to send text to {mobileNumber}").replace(
      "{mobileNumber}",
      mobileNumber
    );
    const SMS_ERROR_907 = $L(
      "Only {length} digits is permitted. Please check again"
    ).replace("{length}", getMaxNum(deviceCountryCode));

    switch (smsRetCode) {
      case 502:
        return SMS_ERROR_502;
      case 600:
        return SMS_ERROR_600;
      case 601:
        return SMS_ERROR_601;
      case 900:
        return SMS_ERROR_900;
      case 903:
        return SMS_ERROR_903;
      case 904:
        return SMS_ERROR_904;
      case 905:
        return SMS_ERROR_905;
      case 906:
        return SMS_ERROR_906;
      default:
        return SMS_ERROR_900;
    }
  }, [smsRetCode]);

  const getEvntErrorMsg = useMemo(() => {
    if (curationCouponSuccess === 600) {
      return $L("This device had received first time coupon.");
    } else if (curationCouponSuccess === 601) {
      return $L("There is no coupon.");
    } else {
      return $L("Failed to sent text to {mobileNumber}").replace(
        "{mobileNumber}",
        mobileNumber
      );
    }
  }, [curationCouponSuccess, mobileNumber]);

  useEffect(() => {
    if (keyPadOff) {
      setTimeout(() => {
        Spotlight.focus("agreeAndSend");
      });
      setSpotlightDisabled(false);
    } else {
      setSpotlightDisabled(true);
      setTimeout(() => {
        Spotlight.focus("keypad-number-1");
      });
    }
  }, [keyPadOff]);

  const retCodeError =
    (smsRetCode !== undefined && smsRetCode !== 0) ||
    (curationCouponSuccess !== undefined && curationCouponSuccess !== 0);

  useEffect(() => {
    if (phoneNumberList) {
      const decryptedNumbers = phoneNumberList.map(decryptPhoneNumber);
      setRecentSentNumber(decryptedNumbers);
    }
  }, [phoneNumberList]);

  return (
    <>
      {smsRetCode === undefined &&
        open &&
        regDeviceInfoRetCode === undefined &&
        curationCouponSuccess === undefined && (
          <TPopUp
            kind={"mobileSendPopup"}
            className={css.container}
            open={open}
            onClose={onClose}
            hasText
          >
            <div className={css.header}>
              {productImg && (
                <p className={css.productImg}>
                  <CustomImage
                    className={css.img}
                    src={productImg}
                    fallbackSrc={defaultImage}
                  />
                </p>
              )}
              <div
                className={classNames(
                  css.textBox,
                  !productImg && css.textBoxOnly
                )}
              >
                {title && <div className={css.smsTitle}>{title}</div>}
                {subTitle && (
                  <div
                    className={classNames(
                      css.subTitle,
                      !productImg && css.subTitleOnly
                    )}
                  >
                    {subTitle}
                  </div>
                )}
                {productPrice && (
                  <div className={css.price}>{productPrice}</div>
                )}
              </div>
            </div>
            <div className={css.smsArea}>
              <div className={css.smsContainer}>
                <InputContainer className={css.smsNumLayer}>
                  <SpottableComponent
                    className={css.inputNum}
                    onClick={handleInputClick}
                    spotlightDisabled={spotlightDisabled}
                  >
                    {deviceCountryCode && deviceCountryCode === "RU" && (
                      <span className={css.rucInput}>{"+7 "}</span>
                    )}
                    <span>{mobileNumber}</span>
                  </SpottableComponent>
                </InputContainer>
                {keyPadOff ? (
                  <Container spotlightId="history-container">
                    <HistoryPhoneNumber
                      handleClickSelect={handleClickSelect}
                      handleDelete={handleDelete}
                      recentSentNumber={recentSentNumber}
                    />
                  </Container>
                ) : (
                  <Container>
                    <SMSNumKeyPad onKeyDown={numKeypadClicked} />
                  </Container>
                )}
              </div>
              <div className={css.instruction}>
                {deviceCountryCode && (
                  <span
                    dangerouslySetInnerHTML={{
                      __html: `${$L(
                        "By clicking Agree and Send button, I agree that LGE may collect and store my cell phone number to send text messages as I requested, for data analysis and for feature-enhancement purposes. By entering my cell phone number, I agree to receive messages from LGE with information on how to purchase the product I selected. Message and data rates may apply."
                      )}`,
                    }}
                    className={deviceCountryCode === "RU" && css.instructionRu}
                  />
                )}
              </div>
            </div>
            <Container className={css.btnContainer}>
              <TButton
                onClick={handleAgreeSendClick}
                spotlightId={"agreeAndSend"}
              >
                {$L("Agree and Send")}
              </TButton>
              <TButton onClick={onClose}>{$L("Cancel")}</TButton>
            </Container>
          </TPopUp>
        )}
      {retCodeError && (
        <TPopUp
          kind="textPopup"
          open={popupVisible}
          hasText
          text={smsTpCd ? getSmsErrorMsg : getEvntErrorMsg}
          onClick={_onClose}
          hasButton
          button1Text={$L("OK")}
        />
      )}
      {(smsRetCode === 0 ||
        regDeviceInfoRetCode === 0 ||
        regDeviceInfoRetCode === 0) && (
        <TPopUp
          kind="textPopup"
          open={popupVisible}
          hasText
          text={MSG_SUCCESS_SENT}
        />
      )}
    </>
  );
}