import React from 'react'
import RadioIcon from 'atoms/Icons/RadioIcon'
import CheckBoxIcon from 'atoms/Icons/CheckBoxIcon'
import { ToggleProps } from './typings'
import { ToggleWrapper, ToggleIconWrapper, ToggleLabelText } from './styled'
import { CommonState } from 'src/state'
import { isFunction } from 'uxui-modules/exotic'

function defaultRenderIcon(props: ToggleProps, state: CommonState) {
  console.debug('[Toggle] renderIcon')

  const {iconType, breedTheme, onToggle} = props;
  const {isSelected, handleToggleSelected } = state;

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

  const iconView = props.iconType === 'checkbox' ? (
    <CheckBoxIcon isSelected={isSelected} breedTheme={breedTheme} onClick={handleToggleClick}/>
  ) : (
    <RadioIcon isSelected={isSelected} onClick={handleToggleClick} />
  )

  return <ToggleIconWrapper>{iconView}</ToggleIconWrapper>
}

function defaultRenderText(props: ToggleProps) {
  const {label} = props;
  return <ToggleLabelText>{label}</ToggleLabelText>
}

function defaultRenderWrapper(props: ToggleProps) {
  const {children, className} = props;
  return <ToggleWrapper className={className}>{children}</ToggleWrapper>
}

export { defaultRenderIcon, defaultRenderText, defaultRenderWrapper }