import React, { memo, useCallback, useMemo } from "react";

import { useDispatch } from "react-redux";

import Spotlight from "@enact/spotlight";
import Spottable from "@enact/spotlight/Spottable";

import { pushPanel, updatePanel } from "../../../../actions/panelActions";
import CustomImage from "../../../../components/CustomImage/CustomImage";
import { removeDotAndColon } from "../../../../components/TItemCard/TItemCard";
import usePriceInfo from "../../../../hooks/usePriceInfo";
import {
  LOG_CONTEXT_NAME,
  LOG_MESSAGE_ID,
  panel_names,
} from "../../../../utils/Config";
import { $L } from "../../../../utils/helperMethods";
import css from "./TodaysDealsCard.module.less";
import { sendLogTotalRecommend } from "../../../../actions/logActions";
import FeaturedCategoryProductGridItem from "../../FeaturedCategory/FeaturedCategoryContents/FeaturedCategoryProductGrid/FeaturedCategoryProductGridItem/FeaturedCategoryProductGridItem";

const SpottableComponent = Spottable("div");

const STRING_CONF = {
  SAVE: "SAVE",
};

export default memo(function TodaysDealsCard({
  brandTsvInfo,
  handleItemFocus,
  spotlightId,
  shelfOrder,
  shelfTitle,
  ...rest
}) {
  const dispatch = useDispatch();

  const {
    freeShippingFlag,
    patnrId,
    prdtId,
    prdtNm,
    priceInfo,
    thumbnailImg,
    todaySpclFlag,
    offerInfo,
    patncNm,
    brndNm,
    catNm,
  } = brandTsvInfo;

  const { originalPrice, discountedPrice, discountRate } =
    usePriceInfo(priceInfo);

  const handleClick = useCallback(() => {
    const lastFocusedTarget = Spotlight.getCurrent();
    const lastFocusedTargetId =
      lastFocusedTarget?.getAttribute("data-spotlight-id");

    if (lastFocusedTargetId) {
      const catCdLv1 = null;
      const catCdLv2 = null;
      const section = "today's-deals";
      const x = 0;

      dispatch(
        updatePanel({
          name: panel_names.FEATURED_BRANDS_PANEL,
          panelInfo: {
            catCdLv1,
            catCdLv2,
            lastFocusedTargetId,
            section,
            x,
          },
        })
      );
    }

    dispatch(
      pushPanel({
        name: panel_names.DETAIL_PANEL,
        panelInfo: { patnrId, prdtId },
      })
    );

    dispatch(
      sendLogTotalRecommend({
        contextName: LOG_CONTEXT_NAME.FEATURED_BRANDS,
        messageId: LOG_MESSAGE_ID.SHELF_CLICK,
        shelfId: spotlightId,
        shelfLocation: shelfOrder,
        shelfTitle: shelfTitle,
        productId: prdtId,
        productTitle: prdtNm,
        partner: patncNm,
        brand: brndNm,
        price: originalPrice,
        discount: discountRate,
        location: 1,
        category: catNm,
      })
    );
  }, [dispatch, patnrId, prdtId]);

  const handleFocus = useCallback(() => {
    if (handleItemFocus) {
      handleItemFocus();
    }
  }, [handleItemFocus]);

  const resolvedOriginalPrice = useMemo(() => {
    if (parseFloat(originalPrice.replace(/[^0-9.-]+/g, "")) === 0) {
      return offerInfo;
    }
    return originalPrice;
  }, [originalPrice]);

  const resolvedDiscountedPrice = useMemo(() => {
    if (parseFloat(discountedPrice.replace(/[^0-9.-]+/g, "")) === 0) {
      return offerInfo;
    }
    return discountedPrice;
  }, [discountedPrice]);

  return (
    <SpottableComponent
      className={css.item}
      onClick={handleClick}
      onFocus={handleFocus}
      spotlightId={
        "today's-deals-card-spotlightId-" + removeDotAndColon(prdtId)
      }
      {...rest}
    >
      <figure>
        <CustomImage src={thumbnailImg} alt="" />
      </figure>

      <div>
        <div>
          {todaySpclFlag === "Y" && <span className={css.specialValue} />}
          {freeShippingFlag === "Y" && <span className={css.freeShipping} />}
        </div>

        <div>
          <h3>{prdtNm}</h3>
          <p>
            {discountRate ? resolvedDiscountedPrice : resolvedOriginalPrice}
            {discountRate && <span>{originalPrice}</span>}
          </p>
        </div>
      </div>

      {discountRate && (
        <div>
          <span>{discountRate}</span>
          <span>{$L(STRING_CONF.SAVE)}</span>
        </div>
      )}
    </SpottableComponent>
  );
});
