import React from 'react'
import ArrowIcon from 'icons/ArrowIcon'
import { SelectableState } from 'src/state/SelectionState'
import { toText } from '../meta/_deps'
import { OptionState } from '../Option/typings'
import { ActiveOptionProps } from './typings'
import { StyledSelectText } from './styled'

export function defaultRenderActiveAfterText(props: ActiveOptionProps, state: SelectableState) {
  // isAnimated <- has dom ref issues
  return <ArrowIcon up={props.isVisible} down={!props.isVisible} breed={'arrowV1'} />
}

export function defaultRenderActiveBeforeText(props: ActiveOptionProps, state: SelectableState) {
  return ''
}

export function defaultRenderText(props: ActiveOptionProps, state: OptionState) {
  const text = toText(props, state)
  return (
    <StyledSelectText isSelected={props.isSelected} isDisabled={props.isDisabled}>
      {text}
    </StyledSelectText>
  )
}