import React from 'react'
import { isFunction } from 'exotic'
import { CommonState } from 'src/state'
import RadioIcon from 'atoms/Icons/RadioIcon'
import SwitchIcon from 'atoms/Icons/SwitchIcon'
import { ToggleProps } from './typings'
import { Wrapper, IconWrapper, StyledLabel, StyledCheckboxIcon, SwitchIconWrapper, SwitchLabel } 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

  function switchIconType(type) {
    switch (type) {
      case 'checkbox':
        return (<StyledCheckboxIcon breed={breed} {...attributes} {...svgAttributes} />)
      case 'switch':
        const switchLabelView = <SwitchLabel className={isSelected ? 'Selected' : ''} content={isSelected ? 'ON' : 'OFF'} />
        return (
          <SwitchIconWrapper>
            <SwitchIcon {...attributes} />
            {switchLabelView}
          </SwitchIconWrapper>
        )
      default:
        return (
          <RadioIcon {...attributes} />)
    }
  }

  const iconView = switchIconType(iconType)
  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 }