import React, { MouseEvent, KeyboardEvent } from 'react'
import { isFunction, isSafe } from 'exotic'
import { Empty } from 'atoms/Empty'
import { MaterialIcon } from 'atoms/MaterialIcon'
import { CommonState } from 'src/state'
import { ToggleProps } from './typings'
import { handleClick, isEnter } from 'molecules/deps'
import {
  Wrapper,
  LabelWrapper,
  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}
      onClick={onToggle}
    />
  )
  return (
    <SwitchIconWrapper isSelected={isSelected}>
      <StyledSwitchIcon {...attributes} />
      {switchLabelView}
    </SwitchIconWrapper>
  )
}

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

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

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

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

function defaultRenderIcon(props: ToggleProps) {
  const { iconType, isSelected } = props
  const dataQa = isSelected === true ? 'qa-facet-selected' : 'qa-facet'

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

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

function defaultRenderBeforeLabel(props: ToggleProps) {
  return <Empty />
}

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

function defaultRenderAfterLabel(props: ToggleProps) {
  return <Empty />
}

function defaultRenderBox(props: ToggleProps, state: CommonState) {
  const {
    renderIcon,
    renderBeforeLabel,
    renderLabel,
    renderAfterLabel,
    ...remainingProps
  } = props
  return (
    <React.Fragment>
      {isFunction(renderIcon) === true &&
        renderIcon({ ...remainingProps, isSelected: state.isSelected })}
      <LabelWrapper onClick={props.onToggle}>
        {isFunction(renderBeforeLabel) === true &&
          renderBeforeLabel(remainingProps)}
        {isFunction(renderLabel) === true && renderLabel(remainingProps)}
        {isFunction(renderAfterLabel) === true &&
          renderAfterLabel(remainingProps)}
      </LabelWrapper>
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: ToggleProps) {
  const { children, className, onToggle } = props
  const passThroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa'],
  })

  const handleClickEvent = (event: MouseEvent<any> | Event) =>
    handleClick({ event, onClick: onToggle })
  const handleKeyDownEvent = (event: KeyboardEvent<any> | Event) =>
    isEnter(event) && handleClickEvent(event)

  return (
    <Wrapper
      {...passThroughProps}
      onClick={handleClickEvent}
      onKeyDown={handleKeyDownEvent}
      tabIndex={0}
    >
      {children}
    </Wrapper>
  )
}

export {
  defaultRenderBox,
  defaultRenderIcon,
  defaultRenderBeforeLabel,
  defaultRenderLabel,
  defaultRenderAfterLabel,
  defaultRenderWrapper,
}