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

import { useDispatch } from "react-redux";

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

import { updateSelectedBillingAddr } from "../../../actions/checkoutActions";
import TCheckBox from "../../../components/TCheckBox/TCheckBox";
import TScroller from "../../../components/TScroller/TScroller";
import css from "./BillingAddressCard.module.less";
import CheckOutContainer from "./CheckOutContainer";

const ItemContainer = SpotlightContainerDecorator("li");

export default memo(function BillingAddressCard({ list, onFocus, ...rest }) {
  const dispatch = useDispatch();

  const [selected, setSelected] = useState(null);

  useEffect(() => {
    if (list) {
      setSelected(list[0].bilAddrSno);
      dispatch(updateSelectedBillingAddr(list[0]?.bilAddrSno));
    }
  }, [dispatch, list]);

  const handleSelectAddress = useCallback(
    (bilAddrSno) => {
      if (bilAddrSno !== selected) {
        setSelected(bilAddrSno);
        dispatch(updateSelectedBillingAddr(bilAddrSno));
      }
    },
    [dispatch, selected]
  );

  const _onFocus = useCallback(() => {
    if (onFocus) {
      onFocus();
    }
  }, [onFocus]);

  return (
    <CheckOutContainer className={css.shippingBox}>
      <TScroller
        className={css.shipping}
        direction="horizontal"
        noScrollByWheel
      >
        <ul>
          {list &&
            list.map(
              (
                {
                  bilAddrSno,
                  bilCityNm,
                  bilCtpt,
                  bilDtlAddr,
                  bilEmalAddr,
                  bilOdrFnm,
                  bilOdrLnm,
                  bilStatNm,
                  bilStatPvc,
                  bilZpcd,
                  chgDt,
                  cntryCd,
                  cntryNm,
                  mbrNo,
                  regDt,
                  useFlag,
                },
                index
              ) => {
                return (
                  <ItemContainer
                    className={css.itemContainer}
                    key={index}
                    {...rest}
                  >
                    <TCheckBox
                      className={css.checkBox}
                      selected={selected === bilAddrSno}
                      onToggle={() => handleSelectAddress(bilAddrSno)}
                      onFocus={_onFocus}
                      spotlightId={"billing-checkbox-" + index}
                    />
                    <h2 className={css.title}>
                      {bilOdrFnm} {bilOdrLnm}
                    </h2>
                    <div className={css.addressWrap}>
                      <p>
                        {bilZpcd} {bilStatNm}, <br />
                        {bilCityNm} <br />
                        {bilDtlAddr}
                      </p>
                    </div>
                    <div className={css.cardFooter}>
                      <p className={css.callNumber}>
                        <span />
                        {bilCtpt.replace(
                          /^(\d{2,3})(\d{3,4})(\d{4})$/,
                          `$1-$2-$3`
                        )}
                      </p>
                      <p className={css.email}>
                        <span />
                        {bilEmalAddr}
                      </p>
                    </div>
                  </ItemContainer>
                );
              }
            )}
        </ul>
      </TScroller>
    </CheckOutContainer>
  );
});
