import React, { memo, useEffect } from "react";

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

import IcBlackCall from "../../../assets/images/icons/ic-wh-call@3x.png";
import { $L } from "../../utils/helperMethods";
import css from "./VideoOverlayWithPhoneNumber.module.less";

const CALL_TO_ORDER_STRING = "Call to Order";
const PHONE_STRING = "Phone";

/**
 *  default, position: absolute;
 *  top, right, bottom, left 중 필요한 위치 설정
 *  @param {string} className
 *  @param {boolean} show
 */

export default memo(function VideoOverlayWithPhoneNumber({
  className,
  orderPhnNo,
  patnerName,
  chanId,
  modal,
}) {
  const countryCode = useSelector((state) => state.common.httpHeader.cntry_cd);
  const panels = useSelector((state) => state.panels);

  return (
    <>
      {orderPhnNo && (
        <div
          className={classNames(
            className && className,
            css.callBox,
            countryCode === "RU" && chanId === "RUJUVELIROCHKA" && css.ru,
            countryCode === "DE" && !modal && css.hsn,
            countryCode === "US" && patnerName === "HSN" && css.hsn,
            countryCode === "US" && patnerName === "QVC" && css.qvc,
            modal &&
              panels.panels[panels.panels.length - 2]?.name !== "detailpanel" &&
              (panels.panels[0]?.name === "trendingnowpanel" ||
                panels.panels[0]?.name === "featuredbrandspanel") &&
              css.widePanel
          )}
        >
          <div className={css.callToOrder}>{$L(CALL_TO_ORDER_STRING)}</div>
          <div className={css.callNum}>
            <img src={IcBlackCall} alt={PHONE_STRING} />
            <span>{orderPhnNo}</span>
          </div>
        </div>
      )}
    </>
  );
});
