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

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

import useScrollReset from "../../../../../../hooks/useScrollReset";
import { $L, formatCurrencyValue } from "../../../../../../utils/helperMethods";
import css from "./CouponListItem.module.less";

const SpottableListItem = Spottable("div");

export default function CouponListItem({
  scrollTop,
  cpnTtl,
  cpnDesc,
  cpnAplyStrtDtt,
  cpnAplyEndDtt,
  cpnAplyMinPurcAmt,
  cpnAplyMaxDcAmt,
  cpnUseYn,
  cpnDctrt,
  ordNo,
  length,
  currSign,
  dcAmt,
  shptmDcTpCd,
  index,
}) {
  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);

  const formatDate = useCallback((datetimeStr) => {
    return datetimeStr.split(" ")[0];
  }, []);

  const dcCount = useCallback((shptmDcTpCd) => {
    switch (shptmDcTpCd) {
      case "CPN00401":
        return `${currSign}${dcAmt}`;

      case "CPN00402":
        return `${cpnDctrt}%`;

      default:
        return null;
    }
  }, []);

  return (
    <SpottableListItem
      className={css.itemContainer}
      onFocus={index === 0 ? handleScrollReset : null}
      onBlur={handleStopScrolling}
      aria-label={
        cpnTtl +
        ", " +
        cpnDesc +
        ", " +
        `${formatDate(cpnAplyStrtDtt)}~${formatDate(cpnAplyEndDtt)}` +
        ", " +
        (index * 1 + 1) +
        " of " +
        length
      }
    >
      <div className={css.cpnDctrt}>{dcCount(shptmDcTpCd)}</div>
      <div className={css.cpnTtl}>{cpnTtl}</div>
      <div className={css.cpnDesc}>
        {$L("Purchase over ${cpnAplyMinPurcAmt} (up to ${cpnAplyMaxDcAmt} off)")
          .replace("{cpnAplyMinPurcAmt}", cpnAplyMinPurcAmt)
          .replace("{cpnAplyMaxDcAmt}", cpnAplyMaxDcAmt)}
      </div>
      <div className={css.cpnDate}>{`${formatDate(cpnAplyStrtDtt)}~${formatDate(
        cpnAplyEndDtt
      )}`}</div>
      <div className={css.orderBox}>
        {cpnUseYn === "Y" && ordNo && (
          <span className={css.orderNum}>{ordNo}</span>
        )}
      </div>
    </SpottableListItem>
  );
}
