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

/**
 * @todo @deprecated styled-components ftw
 */
export 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,
      // @todo remove this for renderprops - this is causing `undefined` className
      [className as string]: true,
    }),
    wrap: toClassName({
      // @todo remove this for renderprops - this is causing `undefined` className
      [wrapperClassName]: true,
      'input-box-wrapper': true,
      'active': state.value !== '' || props.isLabelOnTop,
    }),
  }

  return classList
}