import React, { useCallback } from "react";

import { useSelector } from "react-redux";

import TVirtualGridList from "../../../../../../components/TVirtualGridList/TVirtualGridList";
import useScrollTo from "../../../../../../hooks/useScrollTo";
import MyInfoNoResults from "../MyInfoNoResults/MyInfoNoResults";
import MyInfoTabContentsContainer from "../MyInfoTabContentsContainer";
import BillingAddressItem from "./BillingAddressItem";
import css from "./BillingAddressTab.module.less";

export const ITEM_SIZE = {
  itemWidth: 444,
  itemHeight: 348,
  spacing: 18,
};

export default function BillingAddressTab() {
  const billingDatas = useSelector((state) => state.billing.billingData);
  const { billingInfo } = billingDatas || {};

  const { getScrollTo, scrollLeft } = useScrollTo();

  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const {
        bilAddrSno,
        bilCityNm,
        bilCtpt,
        bilDtlAddr,
        bilEmalAddr,
        bilOdrFnm,
        bilOdrLnm,
        bilStatNm,
        bilStatPvc,
        bilZpcd,
        chgDt,
        cntryCd,
        cntryNm,
        mbrNo,
        regDt,
        useFlag,
      } = billingInfo[index];

      return (
        <BillingAddressItem
          {...rest}
          key={index}
          bilOdrFnm={bilOdrFnm}
          bilOdrLnm={bilOdrLnm}
          bilZpcd={bilZpcd}
          bilStatNm={bilStatNm}
          bilCityNm={bilCityNm}
          bilDtlAddr={bilDtlAddr}
          bilCtpt={bilCtpt}
          bilEmalAddr={bilEmalAddr}
          index={index}
          length={billingInfo.length}
        />
      );
    },
    [billingInfo]
  );

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