import React from "react"
import cx from "classnames"

const STATES = {
  default: "border-gray-200 focus:outline-blue",
  error: "border-red-600 outline-red",
  success: "border-green-600 outline-green",
}

function Pend({ item, className }) {
  if (!item) return null
  const classes = `text-gray-700 whitespace-pre flex items-center ${className}`

  return <div className={classes}>{item}</div>
}

const Input = React.forwardRef(
  (
    { name, state = "default", className, style, append, prepend, ...props },
    ref
  ) => {
    className = cx(
      className,
      "flex text-sm border rounded px-3 py-2 w-full",
      STATES[state]
    )

    if (props.type === "hidden") {
      return <input ref={ref} name={name} {...props} />
    }

    return (
      <div className={className}>
        <Pend item={prepend} className="pr-2" />
        <input
          ref={ref}
          style={{ lineHeight: "22px", ...style }}
          className="w-full focus:outline-none design-input"
          name={name}
          {...props}
        />
        <Pend item={append} className="pl-2" />
      </div>
    )
  }
)

export default Input
