import React from 'react'
import { RadioIcon, SwitchIcon, HeartIcon } from 'atoms/Icons'
import { ToggleProps } from './typings'
import {
  Wrapper,
  IconWrapper,
  StyledLabel,
  StyledCheckboxIcon,
  SwitchIconWrapper,
  SwitchLabel,
} from './styled'

function defaultRenderIcon(props: ToggleProps) {
  const {
    iconType,
    breed,
    isAnimated,
    borderColor,
    bgColor,
    tickColor,
    onToggle,
    isSelected,
  } = props
  const attributes = {
    isSelected,
    isAnimated,
    onClick: onToggle,
  }
  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 content={isSelected ? 'ON' : 'OFF'} />
        )
        return (
          <SwitchIconWrapper isSelected={isSelected}>
            <SwitchIcon {...attributes} />
            {switchLabelView}
          </SwitchIconWrapper>
        )
      case 'heart':
        return <HeartIcon {...attributes} />
      case 'radio':
      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 }