import React from 'react'
import RadioIcon from 'atoms/Icons/RadioIcon'
import CheckboxIcon from 'atoms/Icons/CheckBoxIcon'
import { ToggleItemProps } from './typings'
import {
  ToggleItemIconWrapper,
  ToggleItemLabel,
  ToggleItemWrapper,
} from './styled'

/**
 * TOGGLE ITEM COMPONENT RENDER PROPS
 */
export function defaultRenderIcon(props: ToggleItemProps) {
  console.debug('[ToggleList] renderIcon', props)

  const iconView = props.isCheckBox ? (
    <CheckboxIcon isSelected={props.isSelected} onClick={props.onClick} />
  ) : (
      <RadioIcon isSelected={props.isSelected} onClick={props.onClick} />
    )

  return <ToggleItemIconWrapper>{iconView}</ToggleItemIconWrapper>
}

export function defaultRenderText(props: ToggleItemProps) {
  return <ToggleItemLabel content={props.label} />
}

export function defaultRenderWrap(props: ToggleItemProps) {
  return (
    <ToggleItemWrapper className={props.className}>
      {props.children}
    </ToggleItemWrapper>
  )
}