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

// NOTE: leaving this animated switch as is, everything else uses MaterialIcon
function defaultRenderSwitch(props: ToggleProps) {
  const {
    isAnimated,
    onToggle,
    isSelected,
    defaultLabel = 'ON',
    toggleLabel = 'OFF',
    defaultLabelDataQa,
    toggleLabelDataQa,
  } = props
  const attributes = {
    isSelected,
    isAnimated,
    onClick: onToggle,
  }
  const switchLabelView = (
    <SwitchLabel
      data-qa={isSelected === true ? defaultLabelDataQa : toggleLabelDataQa}
      content={isSelected === true ? defaultLabel : toggleLabel}
    />
  )
  return (
    <SwitchIconWrapper isSelected={isSelected}>
      <StyledSwitchIcon {...attributes} />
      {switchLabelView}
    </SwitchIconWrapper>
  )
}

function defaultRenderCheckBox(props: ToggleProps) {
  const { onToggle, isSelected } = props
  const breed = isSelected === true ? 'check_on' : 'check_off'
  const attributes = {
    type: breed,
    onClick: onToggle,
    isSelected: isSelected,
  }
  return <MaterialIcon {...attributes} />
}

function defaultRenderHeart(props: ToggleProps) {
  const { onToggle, isSelected } = props
  const breed = isSelected ? 'favorite' : 'favorite_border'
  const attributes = {
    type: breed,
    onClick: onToggle,
    isSelected: isSelected,
  }
  return <MaterialIcon {...attributes} />
}

function defaultRenderRadio(props: ToggleProps) {
  const { onToggle, isSelected } = props
  const breed = isSelected ? 'radio_on' : 'radio_off'
  const attributes = {
    type: breed,
    onClick: onToggle,
    isSelected: isSelected,
  }
  return <MaterialIcon {...attributes} />
}

// NOTE: visually this is identical to the defaultRenderSwitch...
function defaultRenderToggle(props: ToggleProps) {
  const { onToggle, isSelected } = props
  const breed = isSelected ? 'toggle_on' : 'toggle_off'
  const attributes = {
    type: breed,
    onClick: onToggle,
    isSelected: isSelected,
  }
  return <MaterialIcon {...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 'toggle':
        return defaultRenderToggle(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 }