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

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 : TextBoxWrapper
}