import React from 'react'
import { ToggleProps } from 'molecules/Toggle'
import { ThemedCheckBox, StyledIconWrapper, ThemedRadioIcon } from './styled'
import { CommonState } from 'src/state'
import { isFunction } from 'exotic'
import { ToggleThemedProps } from './typings'

function defaultRenderIcon(props: ToggleThemedProps, state: CommonState) {
  const { iconType, breed, onToggle, fillColor } = props
  const { isSelected, handleToggleSelected } = state

  const handleToggleClick = event => {
    handleToggleSelected()
    if (isFunction(onToggle)) {
      const args = { isSelected: state.isSelected }
      onToggle(args)
    }
  }

  const attributes = {
    isSelected,
    fillColor,
    onClick: handleToggleClick,
  }

  const iconView =
    iconType === 'checkbox' ? (
      <ThemedCheckBox breed={breed} {...attributes} />
    ) : (
      <ThemedRadioIcon {...attributes} />
    )

  return <StyledIconWrapper>{iconView}</StyledIconWrapper>
}

export { defaultRenderIcon }