import React, { forwardRef, useCallback, useRef, useEffect } from "react";
import css from "./TInput.module.less";
import { InputField } from "@enact/sandstone/Input";
import Spottable from "@enact/spotlight/Spottable";
import classNames from "classnames";
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";

const Container = SpotlightContainerDecorator("div");

const SpottableInputIcon = Spottable("div");

const KINDS = { withIcon: "withIcon" };
const ICONS = { search: "search" };
const BORDER = { none: "none" };
const COLOR = { transparent: "transparent" };

export default function TInput({
  kind,
  icon,
  border,
  color,
  className,
  spotlightDisabled,
  ...rest
}) {
  const handleIconClick = useCallback(() => {}, []);

  return (
    <Container
      className={classNames(css.container, className ? className : null)}
    >
      <InputField
        {...rest}
        spotlightDisabled={spotlightDisabled}
        className={classNames(css.input)}
        spotlightId="input"
      />
      {kind === "withIcon" && (
        <SpottableInputIcon
          className={classNames(icon && css[icon])}
          onClick={handleIconClick}
        />
      )}
    </Container>
  );
}

export { KINDS, ICONS, BORDER, COLOR };
