import React from 'react'
import { TextBoxProps, TextBoxState, TextBoxComponent } from './typings'
import { toPlaceholder } from './deps'
import { StyledLabel, StyledErrorMessage, TextBoxWrap } from './_elements'

export function toPlaceholderProps(props: TextBoxProps, state: TextBoxState) {
  const isLabelOnTop = state.value !== ''
  const placeholderText = toPlaceholder(props, state)
  const shouldAnimatePlaceholder = props.animatePlaceholder || props.shouldAnimatePlaceholder

  return {
    ...props,
    shouldAnimatePlaceholder,
    isLabelOnTop,
    placeholderText,
  }
}
export function renderPlaceholder(props: TextBoxProps, state: TextBoxState) {
  const {isLabelOnTop, placeholderText, shouldAnimatePlaceholder} = toPlaceholderProps(props, state)

  if (shouldAnimatePlaceholder === false) {
    return ''
  }

  return (
    <StyledLabel className={'input-box-label'} isLabelOnTop={props.isLabelOnTop}>
      {placeholderText}
    </StyledLabel>
  )
}

export function renderError(props: TextBoxProps, state: TextBoxState) {
  return state.isValidInput === false && (
    <StyledErrorMessage text={state.errorMessage} />
  )
}

// @todo also renderWrap if needed
export function toWrap(props: TextBoxProps) {
  return props.nowrap === true ? React.Fragment : TextBoxWrap
}