import React, { useCallback } from "react";

import { useSelector } from "react-redux";

import TVirtualGridList from "../../../../../../components/TVirtualGridList/TVirtualGridList";
import useScrollTo from "../../../../../../hooks/useScrollTo";
import { ITEM_SIZE } from "../BillingAddressTab/BillingAddressTab";
import MyInfoNoResults from "../MyInfoNoResults/MyInfoNoResults";
import MyInfoTabContentsContainer from "../MyInfoTabContentsContainer";
import ShippingAddressItem from "./ShippingAddressItem";
import css from "./ShippingAddressTab.module.less";

export default function ShippingAddressTab() {
  const shippingDatas = useSelector((state) => state.shipping.shippingData);
  const { dlvrInfo } = shippingDatas || {};

  const { getScrollTo, scrollLeft } = useScrollTo();

  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const {
        chgDt,
        cntryCd,
        cntryNm,
        dlvrAddSno,
        dlvrCityNm,
        dlvrCtpt,
        dlvrDtlAddr,
        dlvrEmalAddr,
        dlvrOdrFnm,
        dlvrOdrLnm,
        dlvrStatNm,
        dlvrStatPvc,
        dlvrZpcd,
        mbrNo,
        regDt,
        useFlag,
      } = dlvrInfo[index];

      return (
        <ShippingAddressItem
          {...rest}
          key={index}
          dlvrOdrFnm={dlvrOdrFnm}
          dlvrOdrLnm={dlvrOdrLnm}
          dlvrZpcd={dlvrZpcd}
          dlvrStatNm={dlvrStatNm}
          dlvrCityNm={dlvrCityNm}
          dlvrDtlAddr={dlvrDtlAddr}
          dlvrCtpt={dlvrCtpt}
          dlvrEmalAddr={dlvrEmalAddr}
          index={index}
          length={dlvrInfo.length}
        />
      );
    },
    [shippingDatas]
  );

  return (
    <MyInfoTabContentsContainer>
      {shippingDatas && dlvrInfo && dlvrInfo.length > 0 ? (
        <TVirtualGridList
          cbScrollTo={getScrollTo}
          className={css.grid}
          dataSize={dlvrInfo.length}
          renderItem={renderItem}
          direction="horizontal"
          itemWidth={ITEM_SIZE.itemWidth}
          itemHeight={ITEM_SIZE.itemHeight}
          spacing={ITEM_SIZE.spacing}
        />
      ) : (
        <MyInfoNoResults type="SHIPPING ADDRESS" />
      )}
    </MyInfoTabContentsContainer>
  );
}
