import toClassName from 'classnames'
import { TextBoxProps, TextBoxState, TextBoxComponent } from '../typings'

/**
 * @todo @deprecated styled-components ftw
 */
interface ClassList {
  input: string
  wrap: string
}

export function toClassList(props: TextBoxProps, state: TextBoxState): ClassList {
  const { className, wrapperClassName } = props
  // Sometimes we will not need to pass validations for atom so this property is optional
  // const errorInputClass = (isValidInput === false ? ' input-error' : '')

  const classList = {
    input: toClassName({
      'input-box': true,
      'input-error': state.isValidInput === false,
      // [errorInputClass]: true,
      [className]: true,
    }),
    wrap: toClassName({
      [wrapperClassName]: true,
      'input-box-wrapper': true,
      'active': state.value !== '' || props.isLabelOnTop,
    }),
  }

  return classList
}