import React, { useCallback } from 'react';

import classNames from 'classnames';

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

import css from './HomeTodayDeal.module.less';

const SpottableComponent = Spottable("div");

export default function HomeTodayDeal({
  children,
  imageAlt,
  imgName,
  imgPath,
  priceInfo,
  productId,
  productName,
  soldoutFlag,
  isHorizontal,
  rolling,
  ...rest
}) {
  const handleClick = useCallback(
    (productId) => {
      console.log("상세 페이지 이동");
    },
    [productId]
  );

  const parsePriceInfo = useCallback(
    (priceInfo) => {
      const priceParts = priceInfo
        .split("|")
        .filter((part) => part !== "N")
        .map((item) => item.trim());

      let originalPrice, discountedPrice, discountRate;
      if (priceParts.length === 4) {
        [originalPrice, discountedPrice, , discountRate] = priceParts;
      } else if (priceParts.length === 2) {
        [originalPrice, discountedPrice] = priceParts;
        discountRate = null;
      } else {
        originalPrice = null;
        discountedPrice = null;
        discountRate = null;
      }

      return { originalPrice, discountedPrice, discountRate };
    },
    [priceInfo]
  );

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

  return (
    <div
      className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
      onClick={() => handleClick(productId)}
    >
      <div>
        <div className={css.textBox}>{productName}</div>
        <div className={css.accBox}>
          {discountedPrice}
          {discountedPrice != originalPrice ? (
            <span className={css.saleAccBox}>{originalPrice}</span>
          ) : (
            <></>
          )}
        </div>
      </div>
      <div className={css.itemImgBox}>
        <img src={imgPath} />
      </div>

      {rolling == true ? (
        <>
          <div className={css.leftBtn}></div>
          <div className={css.rightBtn}></div>
        </>
      ) : (
        <></>
      )}
    </div>
  );
}
