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

import classNames from "classnames";

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

import usePriceInfo from "../../hooks/usePriceInfo";
import { $L } from "../../utils/helperMethods";
import { SpotlightIds } from "../../utils/SpotlightIds";
import css from "./TItemCard.module.less";

const SpottableComponent = Spottable("div");

const TYPE_CONF = {
  VERTICAL: "vertical",
  HORIZONTAL: "horizontal",
};

// @@pyh Todo, 추후 다국어 resource 추가
const STRING_CONF = {
  SOLD_OUT: $L("SOLD OUT"),
  TOP: $L("TOP"),
};

export default memo(function TItemCard({
  children,
  imageAlt,
  imageSource,
  isBestSeller = false,
  onCardClick,
  priceInfo,
  productId,
  productName,
  rank,
  soldoutFlag,
  type = TYPE_CONF.VERTICAL,
  ...rest
}) {
  const { originalPrice, discountedPrice, discountRate } =
    usePriceInfo(priceInfo);

  const handleClick = useCallback(
    (productId) => {
      onCardClick && onCardClick(productId);
    },
    [onCardClick, productId]
  );

  return (
    <SpottableComponent
      {...rest}
      className={classNames(
        type === TYPE_CONF.HORIZONTAL && css.horizontal,
        type === TYPE_CONF.VERTICAL && css.vertical,
        isBestSeller === true && css.homeBestSeller
      )}
      onClick={() => handleClick(productId)}
      spotlightId={SpotlightIds.TITEM_CARD + productId}
    >
      <div>
        <img src={imageSource} alt={imageAlt} />
        {discountRate && <span>{discountRate}</span>}
        {soldoutFlag && soldoutFlag === "Y" && (
          <div>{STRING_CONF.SOLD_OUT}</div>
        )}
      </div>
      <div>
        <h3>{productName}</h3>
        <p>
          {discountRate ? discountedPrice : originalPrice}
          {discountRate && <span>{originalPrice}</span>}
        </p>
      </div>
      {isBestSeller && rank && (
        <div>
          {STRING_CONF.TOP}
          <span>{rank}</span>
        </div>
      )}
    </SpottableComponent>
  );
});
