import React from 'react'
import { MaterialIcon } from 'atoms/MaterialIcon'
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 <MaterialIcon type={props.isVisible ? 'up' : 'down'} />
}

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>
  )
}