import React, { useCallback } from "react";

import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import { Spottable } from "@enact/spotlight/Spottable";

import TButton from "../../TButton/TButton";
import css from "./HistoryPhoneNumber.module.less";

const SpottableComponent = Spottable("div");

const Container = SpotlightContainerDecorator(
  { enterTo: "default-element" },
  "div"
);

export default function HistoryPhoneNumber({
  handleClickSelect,
  handleDelete,
  recentSentNumber,
}) {
  const handleClickNumber = useCallback(
    (number) => () => {
      if (handleClickSelect) {
        handleClickSelect(number);
      }
    },
    [handleClickSelect]
  );

  const handleClickDelete = useCallback(
    (index) => () => {
      if (handleDelete) {
        handleDelete(index);
      }
    },
    [handleDelete]
  );

  return (
    <>
      {recentSentNumber &&
        recentSentNumber.filter((number) => number !== "")?.length > 0 &&
        recentSentNumber.map((number, index) => {
          return (
            <Container
              className={css.container}
              key={"history-phone-number-" + index}
            >
              <SpottableComponent
                onClick={handleClickNumber(number)}
                className={css.phoneNumberList}
              >
                {number}
              </SpottableComponent>
              <TButton
                className={css.deleteButton}
                onClick={handleClickDelete(index)}
              />
            </Container>
          );
        })}
    </>
  );
}
