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

import { useDispatch } from "react-redux";

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

import { updateSelectedShippingAddr } from "../../../actions/checkoutActions";
import { changeAppStatus } from "../../../actions/commonActions";
import TCheckBox from "../../../components/TCheckBox/TCheckBox";
import TScroller from "../../../components/TScroller/TScroller";
import CheckOutContainer from "./CheckOutContainer";
import css from "./ShippingAddressCard.module.less";

const ItemContainer = SpotlightContainerDecorator("li");

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

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

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

  const handleSelectAddress = useCallback(
    (dlvrAddrSno) => {
      if (dlvrAddrSno !== selected) {
        setSelected(dlvrAddrSno);
        dispatch(updateSelectedShippingAddr(dlvrAddrSno));
      }
    },
    [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(
              (
                {
                  dlvrOdrFnm,
                  dlvrOdrLnm,
                  dlvrZpcd,
                  dlvrStatNm,
                  dlvrCityNm,
                  dlvrDtlAddr,
                  dlvrCtpt,
                  dlvrEmalAddr,
                  dlvrAddrSno,
                },
                index
              ) => {
                return (
                  <ItemContainer
                    className={css.itemContainer}
                    key={index}
                    {...rest}
                  >
                    <TCheckBox
                      className={css.checkBox}
                      selected={selected === dlvrAddrSno}
                      onToggle={() => handleSelectAddress(dlvrAddrSno)}
                      onFocus={_onFocus}
                      spotlightId={"shipping-checkbox-" + index}
                    />
                    <h2 className={css.title}>
                      {dlvrOdrFnm} {dlvrOdrLnm}
                    </h2>
                    <div className={css.addressWrap}>
                      <p>
                        {dlvrZpcd} {dlvrStatNm}, <br />
                        {dlvrCityNm} <br />
                        {dlvrDtlAddr}
                      </p>
                    </div>
                    <div className={css.cardFooter}>
                      <p className={css.callNumber}>
                        <span />
                        {dlvrCtpt?.replace(
                          /^(\d{2,3})(\d{3,4})(\d{4})$/,
                          `$1-$2-$3`
                        )}
                      </p>
                      <p className={css.email}>
                        <span />
                        {dlvrEmalAddr}
                      </p>
                    </div>
                  </ItemContainer>
                );
              }
            )}
        </ul>
      </TScroller>
    </CheckOutContainer>
  );
});
