import React, { MouseEvent, KeyboardEvent } from 'react'
import { MaterialIcon } from 'atoms/MaterialIcon'
import { ToggleItemProps } from './typings'
import {
  ToggleItemIconWrapper,
  ToggleItemLabel,
  ToggleItemWrapper,
} from './styled'
import { handleClick, isEnter } from 'molecules/deps'

/**
 * TOGGLE ITEM COMPONENT RENDER PROPS
 */
function defaultRenderIcon(props: ToggleItemProps) {
  const { borderColor, bgColor, tickColor, isSelected, isCheckBox } = props
  const role = isCheckBox ? 'checkbox' : 'radio'

  const deselectedIconAttributes = {
    bgColor: 'transparent',
    borderColor,
    tickColor: 'transparent',
  }

  const selectedIconAttributes = {
    bgColor,
    borderColor: 'transparent',
    tickColor,
  }

  const iconView = props.isCheckBox ? (
    <MaterialIcon
      type={props.isSelected ? 'check_on' : 'check_off'}
      isSelected={props.isSelected}
    />
  ) : (
    <MaterialIcon
      type={props.isSelected ? 'radio_on' : 'radio_off'}
      isSelected={props.isSelected}
    />
  )

  return (
    <ToggleItemIconWrapper aria-checked={isSelected} role={role}>
      {iconView}
    </ToggleItemIconWrapper>
  )
}

function defaultRenderText(props: ToggleItemProps) {
  return <ToggleItemLabel content={props.label} />
}

function defaultRenderBox(props: ToggleItemProps) {
  const { renderText, renderIcon, ...remainingProps } = props
  const textView = renderText(remainingProps)
  const iconView = renderIcon(remainingProps)
  return (
    <React.Fragment>
      {iconView}
      {textView}
    </React.Fragment>
  )
}

function defaultRenderWrap(props: ToggleItemProps) {
  const {
    selectedDataQa = 'qa-facet-selected',
    unselectedDataQa = 'qa-facet',
  } = props
  const dataQa = props.isSelected ? selectedDataQa : unselectedDataQa
  const handleClickEvent = (event: MouseEvent<any> | Event) =>
    handleClick({ event, onClick: props.onClick })
  const handleKeyDownEvent = (event: KeyboardEvent<any> | Event) =>
    isEnter(event) && handleClickEvent(event)

  return (
    <ToggleItemWrapper
      className={props.className}
      data-qa={dataQa}
      onClick={handleClickEvent}
      onKeyDown={handleKeyDownEvent}
      tabIndex={0}
    >
      {props.children}
    </ToggleItemWrapper>
  )
}

export {
  defaultRenderIcon,
  defaultRenderText,
  defaultRenderBox,
  defaultRenderWrap,
}