import React from 'react'
import { isFunction } from 'exotic'
import { CommonState } from 'src/state'
import RadioIcon from 'atoms/Icons/RadioIcon'
import { ToggleProps } from './typings'
import { Wrapper, IconWrapper, StyledLabel, StyledCheckboxIcon } from './styled'

function defaultRenderIcon(props: ToggleProps, state: CommonState) {
  const { iconType, breed, onToggle, borderColor, bgColor, tickColor } = props
  const { isSelected, handleToggleSelected } = state

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

  const attributes = {
    isSelected,
    onClick: handleToggleClick,
  }

  const deselectedIconAttributes = {
    bgColor: 'transparent',
    borderColor,
    tickColor: 'transparent',
  }

  const selectedIconAttributes = {
    bgColor,
    borderColor: 'transparent',
    tickColor,
  }
  const svgAttributes = isSelected
    ? selectedIconAttributes
    : deselectedIconAttributes

  const iconView =
    iconType === 'checkbox' ? (
      <StyledCheckboxIcon breed={breed} {...attributes} {...svgAttributes} />
    ) : (
      <RadioIcon {...attributes} />
    )

  return <IconWrapper>{iconView}</IconWrapper>
}

function defaultRenderLabel(props: ToggleProps) {
  const { label } = props
  return <StyledLabel>{label}</StyledLabel>
}

function defaultRenderWrapper(props: ToggleProps) {
  const { children, className } = props
  const passthroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa'],
  })
  return <Wrapper {...passthroughProps}>{children}</Wrapper>
}

export { defaultRenderIcon, defaultRenderLabel, defaultRenderWrapper }