import React, { useCallback } from "react";

import classNames from "classnames";

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

import { $L } from "../../utils/helperMethods";
import css from "./SMSNumKeyPad.module.less";

const Container = SpotlightContainerDecorator(
  { defaultElement: `[data-spotlight-id="keypad-number-1"]` },
  "div"
);

const SpottableComponent = Spottable("div");

export default function SMSNumKeyPad({ onKeyDown }) {
  const renderButton = (value, idx) => {
    return (
      <SpottableComponent
        className={css.btn}
        onClick={_onKeyDown(value)}
        key={`button : ${idx}`}
        spotlightId={"keypad-number-" + value}
      >
        {value}
      </SpottableComponent>
    );
  };

  const _onKeyDown = useCallback(
    (value) => () => {
      if (onKeyDown) {
        onKeyDown(value);
      }
    },
    [onKeyDown]
  );

  return (
    <Container className={css.container}>
      {[...Array(9).keys()].map((num, idx) => renderButton(num + 1, idx))}
      <SpottableComponent
        className={classNames(css.btn, css.btnDelete)}
        onClick={_onKeyDown("backspace")}
        aria-label="Delete Key"
      />
      <SpottableComponent
        className={css.btn}
        onClick={_onKeyDown(0)}
        spotlightId="keypad-number-0"
      >
        0
      </SpottableComponent>
      <SpottableComponent
        className={classNames(css.btn, css.btnBack)}
        onClick={_onKeyDown("clear")}
        aria-label="Clear Key"
      >
        {$L("Clear")}
      </SpottableComponent>
    </Container>
  );
}
