import React, { memo } from "react";

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

import css from "./ShippingAddressItem.module.less";

const ItemContainer = Spottable("div");

export default memo(function ShippingAddressItem({
  dlvrOdrFnm,
  dlvrOdrLnm,
  dlvrZpcd,
  dlvrStatNm,
  dlvrCityNm,
  dlvrDtlAddr,
  dlvrCtpt,
  dlvrEmalAddr,
  index,
  length,
  ...rest
}) {
  const ariaLabel =
    dlvrOdrFnm +
    dlvrOdrLnm +
    ", " +
    dlvrDtlAddr +
    dlvrCityNm +
    dlvrStatNm +
    ", phone number " +
    dlvrCtpt +
    "," +
    (index * 1 + 1) +
    " of " +
    length;
  return (
    <ItemContainer
      className={css.itemContainer}
      aria-label={ariaLabel}
      {...rest}
    >
      <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>
  );
});
