import React from "react";

import classNames from "classnames";
import { useSelector } from "react-redux";

import TScroller from "../../../../../../components/TScroller/TScroller";
import useScrollTo from "../../../../../../hooks/useScrollTo";
import { $L } from "../../../../../../utils/helperMethods";
import MyInfoNoResults from "../MyInfoNoResults/MyInfoNoResults";
import MyInfoTabContentsContainer from "../MyInfoTabContentsContainer";
import CouponListItem from "./CouponListItem";
import css from "./CouponTab.module.less";

export default function CouponTab() {
  const couponDatas = useSelector(
    (state) => state.coupon.productCouponInfoData
  );
  const { cursorVisible } = useSelector((state) => state.common.appStatus);

  const { getScrollTo, scrollTop } = useScrollTo();

  return (
    <TScroller
      className={css.scroller}
      verticalScrollbar="auto"
      cbScrollTo={getScrollTo}
    >
      <div
        className={classNames(
          css.container,
          couponDatas && couponDatas.length > 0 && css.listContainer
        )}
      >
        {couponDatas && couponDatas.length > 0 && (
          <h2
            className={css.title}
            aria-label={"coupon " + couponDatas[0].total + "items"}
          >
            {$L("COUPON")}
            {couponDatas && couponDatas.length > 0 && (
              <span className={css.total}>
                {`(${couponDatas[0].total})`}{" "}
                {couponDatas.length === 1 ? $L("ITEM") : $L("ITEMS")}
              </span>
            )}
          </h2>
        )}

        {couponDatas && couponDatas.length > 0 ? (
          couponDatas.map((coupon, index) => {
            const {
              cpnTtl,
              cpnDesc,
              cpnAplyStrtDtt,
              cpnAplyEndDtt,
              cpnUseYn,
              cpnDctrt,
              ordNo,
              cpnAplyMaxDcAmt,
              cpnAplyMinPurcAmt,
              currSign,
              shptmDcTpCd,
              dcAmt,
            } = coupon;

            return (
              <CouponListItem
                key={index}
                index={index}
                scrollTop={scrollTop}
                cpnDctrt={cpnDctrt}
                cpnTtl={cpnTtl}
                cpnDesc={cpnDesc}
                cpnAplyStrtDtt={cpnAplyStrtDtt}
                cpnAplyEndDtt={cpnAplyEndDtt}
                cpnAplyMaxDcAmt={cpnAplyMaxDcAmt}
                cpnAplyMinPurcAmt={cpnAplyMinPurcAmt}
                cpnUseYn={cpnUseYn}
                currSign={currSign}
                dcAmt={dcAmt}
                shptmDcTpCd={shptmDcTpCd}
                ordNo={ordNo}
                length={couponDatas[0]?.total}
              />
            );
          })
        ) : (
          <MyInfoNoResults type="COUPON" />
        )}
      </div>
    </TScroller>
  );
}
