import React, {
  useCallback,
  useEffect,
  useState,
  useMemo,
  useRef,
} from "react";
import classNames from "classnames";
import { $L } from "../../utils/helperMethods";
import { Job } from "@enact/core/util";
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import Spotlight from "@enact/spotlight";
import Spottable from "@enact/spotlight/Spottable";

import { getOnSaleInfo } from "../../api/onSaleApi";

import css from "./OnSale.module.less";

const SpottableComponent = Spottable("div");

const Container = SpotlightContainerDecorator(
  {
    enterTo: "default-element",
  },
  "div"
);

const OnSale = ({
  isOnTop,
  spotlightId,
  onScrollTop,
  onScrollShelf,
  ...rest
}) => {
  const [currentSaleData, setCurrentSaleData] = useState([]);
  const [originalPrice, setOriginalPrice] = useState(null);

  const setSaleView = async (categoryIncFlag, lgCatCd) => {
    try {
      const saleData = await getOnSaleInfo({ lgCatCd, categoryIncFlag });
      if (saleData) {
        setCurrentSaleData(saleData.homeOnSaleInfos);
      }
    } catch (error) {
      console.error("Error saleData: ", error);
    }
  };

  useEffect(() => {
    setSaleView("Y", "");
  }, []);

  return (
    <Container {...rest} spotlightId={spotlightId} className={css.container}>
      <div className={css.bestSeller}>
        <h2 className={css.subTitle}>{$L("ON SALE")}</h2>
        <ul className={css.onSaleItem}>
          {currentSaleData &&
            currentSaleData.map((item, index) => {
              const priceInfo = item.priceInfo;
              let salePrice;
              const originalPrice = priceInfo.split("|")[0];
              if (priceInfo.split("|")[3] == "") {
                salePrice = priceInfo.split("|")[1];
              } else {
                salePrice = priceInfo.split("|")[1];
              }
              item.priceInfo.split("|")[0];
              return (
                <li key={index} className={css.onSaleItemList}>
                  <img src={item.imgUrl} className={css.onSaleItemListImg} />
                  <div className={css.onSaleItemListBox}>
                    <div className={css.onSaleItemListBoxTitle}>
                      {item.catNm}
                    </div>
                    <div className={css.onSaleItemListBoxSaleBox}>
                      up to&nbsp;
                      <span className={css.onSaleItemListBoxSaleBoxPer}>
                        {item.dcRate}%
                      </span>
                    </div>
                    <div className={css.onSaleItemListBoxName}>
                      {item.prdtNm}
                    </div>
                    <div className={css.onSaleItemListBoxPrice}>
                      {salePrice}
                      <span className={css.onSaleItemListBoxPriceStripe}>
                        {originalPrice}
                      </span>
                    </div>
                  </div>
                </li>
              );
            })}
        </ul>
      </div>
    </Container>
  );
};

export default OnSale;
