import React, { useCallback } from "react";

import { useDispatch } from "react-redux";

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

import defaultImage from "../../../../../assets/images/img-thumb-empty-product@3x.png";
import { popPanel, pushPanel } from "../../../../actions/panelActions";
import CustomImage from "../../../../components/CustomImage/CustomImage";
import usePriceInfo from "../../../../hooks/usePriceInfo";
import { panel_names } from "../../../../utils/Config";
import { $L } from "../../../../utils/helperMethods";
import css from "./HomeOnSaleItem.module.less";
import { sendLogTotalRecommend } from "../../../../actions/logActions";

const SpottableComponent = Spottable("div");

export default function HomeOnSaleItem({
  homeOnSaleInfos,
  spotlightId,
  itemData,
  label,
  lastLabel,
  contextName,
  messageId,
  shelfLocation,
  shelfId,
  shelfTitle,
  productId,
  productName,
  patnerName,
  brandName,
  catNm,
  order,
  ...rest
}) {
  const { originalPrice, discountedPrice, discountRate } =
    usePriceInfo(itemData.priceInfo) || {};

  const dispatch = useDispatch();

  const handleCardClick = useCallback(
    (itemData) => {
      dispatch(popPanel());
      dispatch(
        pushPanel({
          name: panel_names.ON_SALE_PANEL,
          panelInfo: {
            lgCatCd: itemData.lgCatCd,
            lgCatNm: itemData.catNm,
            prdtId: itemData.prdtId,
            nowShelf: spotlightId,
          },
        })
      );

      if (contextName && messageId) {
        const params = {
          contextName: contextName,
          messageId: messageId,
          shelfLocation: shelfLocation,
          shelfId: shelfId,
          shelfTitle: shelfTitle,
          productId: productId,
          productTitle: productName,
          partner: patnerName,
          brand: brandName,
          price: originalPrice,
          discount: discountRate,
          location: order,
          category: catNm,
        };
        dispatch(sendLogTotalRecommend(params));
      }
    },
    [dispatch, itemData, contextName, messageId]
  );
  const prdtNum = label ? label : "";
  const discountLabel = discountRate ? discountRate + " discount," : "";
  const discountpriceLabel = discountRate
    ? ", Sale price " + discountedPrice
    : "";
  const priceLabel = originalPrice
    ? ", Original price " + originalPrice + ", "
    : "";
  const lastLabeltext = lastLabel ? lastLabel : "";

  const ariaLabel =
    discountLabel +
    itemData.prdtNm +
    "," +
    itemData.catNm +
    discountpriceLabel +
    priceLabel +
    prdtNum +
    lastLabeltext;
  return (
    <SpottableComponent
      className={css.onSaleItemList}
      onClick={() => handleCardClick(itemData)}
      spotlightId={"home_onsale_item_" + itemData.prdtId}
      aria-label={ariaLabel}
      {...rest}
    >
      <CustomImage
        delay={0}
        src={itemData.imgUrl ? itemData.imgUrl : defaultImage}
        animationSpeed="fast"
        className={css.onSaleItemListImg}
        fallbackSrc={defaultImage}
      />

      <div className={css.onSaleItemListBox}>
        <div className={css.onSaleItemListBoxTitle}>{itemData.catNm}</div>
        {discountRate && (
          <div className={css.onSaleItemListBoxSaleBox}>
            {$L("up to ")}
            <span className={css.onSaleItemListBoxSaleBoxPer}>
              {discountRate}
            </span>
          </div>
        )}
        <div className={css.onSaleItemListBoxName}>{itemData.prdtNm}</div>
        <div className={css.onSaleItemListBoxPrice}>
          {discountedPrice}
          {discountRate && (
            <span className={css.onSaleItemListBoxPriceStripe}>
              {originalPrice}
            </span>
          )}
        </div>
      </div>
    </SpottableComponent>
  );
}
