import React from "react";

import classNames from "classnames";

import { InputField } from "@enact/sandstone/Input";
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";

import TIconButton from "../TIconButton/TIconButton";
import css from "./TInput.module.less";

const Container = SpotlightContainerDecorator("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,
  disabled,
  onIconClick,
  ...rest
}) {
  return (
    <Container
      className={classNames(css.container, className ? className : null)}
    >
      <InputField
        {...rest}
        spotlightDisabled={spotlightDisabled}
        className={classNames(css.input)}
      />
      {kind === "withIcon" && (
        <TIconButton
          className={classNames(icon && css[icon])}
          onClick={onIconClick}
        />
      )}
    </Container>
  );
}

export { BORDER, COLOR, ICONS, KINDS };
