import React, { useMemo } from "react";

import classNames from "classnames";
import { useSelector } from "react-redux";

import TQRCode from "../../../components/TQRCode/TQRCode";
import css from "./PlayerOverlayQRCode.module.less";
import { getQRCodeUrl, scaleH, scaleW } from "../../../utils/helperMethods";

export default function PlayerOverlayQRCode({
  qrCurrentItem,
  type,
  modalScale,
}) {
  const { cntry_cd } = useSelector((state) => state.common.httpHeader);
  const deviceInfo = useSelector((state) => state.device.deviceInfo);

  const serverHOST = useSelector((state) => state.common.appStatus.serverHOST);
  const serverType = useSelector((state) => state.localSettings.serverType);
  const { entryMenu, nowMenu } = useSelector((state) => state.common.menu);

  const label = useMemo(() => {
    let text = "";
    switch (cntry_cd) {
      case "US":
        text = "SCAN TO SHOP";
        break;
      case "GB":
        text = "SCAN TO SHOP";
        break;
      case "DE":
        text = "ZUM EINKAUFEN SCANNEN";
        break;
      case "RU":
        text = "ОТСКАНИРОВАТЬ кОД ДЛЯ ПОКУПКИ";
        break;
    }
    return text;
  }, [cntry_cd]);

  const innerStylePosition = useMemo(() => {
    const { patnrId } = qrCurrentItem || {};
    let top, bottom, right, left;
    let transformOrigin = "";
    if (cntry_cd === "US" && (patnrId === "4" || patnrId === "11")) {
      top = 64;
      right = 80;
      transformOrigin = "top right";
    } else if (cntry_cd === "GB" && patnrId === "1") {
      bottom = 64;
      right = 120;
      transformOrigin = "bottom right";
    } else if (cntry_cd === "DE" && patnrId === "1") {
      bottom = 25;
      right = 41;
      transformOrigin = "bottom right";
    } else if (cntry_cd === "RU") {
      if (patnrId === "12") {
        top = 280;
        right = 84;
        transformOrigin = "top right";
      }
      if (type === "LIVE") {
        top = 90;
        left = 74;
        transformOrigin = "top left";
      }
    }
    if (!transformOrigin) {
      return null;
    }
    return {
      position: "absolute",
      top: top ? scaleH(top * modalScale) + "px" : undefined,
      bottom: bottom ? scaleH(bottom * modalScale) + "px" : undefined,
      right: right ? scaleW(right * modalScale) + "px" : undefined,
      left: left ? scaleW(left * modalScale) + "px" : undefined,
      transform: `scale(${modalScale})`,
      transformOrigin: transformOrigin,
    };
  }, [qrCurrentItem, cntry_cd, modalScale, type]);

  const { width, height } = useMemo(() => {
    if (cntry_cd === "GB") return { width: "132", height: "131" };
    return { width: "156", height: "156" };
  }, [cntry_cd]);

  const { detailUrl } = useMemo(() => {
    return getQRCodeUrl({
      serverHOST,
      serverType,
      index: deviceInfo?.dvcIndex,
      patnrId: qrCurrentItem?.patnrId,
      prdtId: qrCurrentItem?.prdtId,
      entryMenu: entryMenu,
      nowMenu: nowMenu,
      liveFlag: "Y",
      qrType: "billingDetail",
    });
  }, [serverHOST, serverType, deviceInfo, entryMenu, nowMenu, qrCurrentItem]);

  const QRCodeUrl = useMemo(() => {
    if (type === "LIVE" && qrCurrentItem?.patncNm === "ShopLC") {
      return detailUrl;
    }
    return qrCurrentItem?.qrcodeUrl;
  }, [detailUrl, qrCurrentItem, type]);

  return (
    <>
      {innerStylePosition && QRCodeUrl && (
        <div
          className={classNames(
            css.container,
            cntry_cd === "US" && css.us,
            cntry_cd === "GB" && css.gb,
            cntry_cd === "RU" && css.ru,
            cntry_cd === "DE" && css.de
          )}
          style={innerStylePosition}
        >
          <div>
            <TQRCode
              text={QRCodeUrl}
              width={width}
              height={height}
              ariaLabel="QR CODE, “SCAN TO SHOP” go to Shoptime App"
            />
            <div className={css.text}>{label}</div>
          </div>
        </div>
      )}
    </>
  );
}
