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

import classNames from "classnames";

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

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

const SpottableComponent = Spottable("div");

export default function TCheckBox({
  className,
  spotlightDisabled,
  spotlightId,
  onFocus,
  onToggle,
  selected = true,
  ariaLabel,
  ...rest
}) {
  const [focus, setFocus] = useState(false);

  const _onClick = useCallback(() => {
    if (onToggle) {
      onToggle({ selected: !selected });
    }
  }, [onToggle, selected]);

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

  const _onBlur = useCallback(() => {
    setFocus(false);
  }, []);

  return (
    <SpottableComponent
      {...rest}
      className={classNames(
        className,
        css.tCheckBox,
        focus && css.focus,
        selected && css.selected,
        focus && selected && css.selectedFocus
      )}
      spotlightDisabled={spotlightDisabled}
      onClick={_onClick}
      onFocus={_onFocus}
      onBlur={_onBlur}
      spotlightId={spotlightId}
      aria-label={ariaLabel}
    ></SpottableComponent>
  );
}
