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

function defaultRenderCheckBox(props: ToggleProps) {
  const { breed, borderColor, bgColor, tickColor, onToggle, isSelected } = props
  const attributes = {
    isSelected,
    onClick: onToggle,
  }
  const deselectedIconAttributes = {
    bgColor: 'transparent',
    borderColor,
    tickColor: 'transparent',
  }
  const selectedIconAttributes = {
    bgColor,
    borderColor: 'transparent',
    tickColor,
  }
  const svgAttributes = isSelected
    ? selectedIconAttributes
    : deselectedIconAttributes
  return <StyledCheckboxIcon breed={breed} {...attributes} {...svgAttributes} />
}

function defaultRenderSwitch(props: ToggleProps) {
  const {
    isAnimated,
    onToggle,
    isSelected,
    defaultLabel = 'ON',
    toggleLabel = 'OFF',
  } = props
  const attributes = {
    isSelected,
    isAnimated,
    onClick: onToggle,
  }
  const switchLabelView = (
    <SwitchLabel content={isSelected === true ? defaultLabel : toggleLabel} />
  )
  return (
    <SwitchIconWrapper isSelected={isSelected}>
      <StyledSwitchIcon {...attributes} />
      {switchLabelView}
    </SwitchIconWrapper>
  )
}

function defaultRenderHeart(props: ToggleProps) {
  const { onToggle, isSelected } = props
  const attributes = {
    isSelected,
    onClick: onToggle,
  }
  return <HeartIcon {...attributes} />
}

function defaultRenderRadio(props: ToggleProps) {
  const { onToggle, isSelected } = props
  const attributes = {
    isSelected,
    onClick: onToggle,
  }
  return <RadioIcon {...attributes} />
}

function defaultRenderIcon(props: ToggleProps) {
  const { iconType } = props

  const switchIconType = (type?: string) => {
    switch (type) {
      case 'checkbox':
        return defaultRenderCheckBox(props)
      case 'switch':
        return defaultRenderSwitch(props)
      case 'heart':
        return defaultRenderHeart(props)
      case 'radio':
      default:
        return defaultRenderRadio(props)
    }
  }

  const iconView = switchIconType(iconType)
  return <IconWrapper>{iconView}</IconWrapper>
}

function defaultRenderLabel(props: ToggleProps) {
  const { label } = props
  return isSafe(label) && <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 }