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

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

  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} aria-label={ariaLabel}>
      {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<HTMLDivElement> | Event) => {
    if (isFunction(props.onClick)) {
      props.onClick(event)
    }
  }

  const handleKeyDownEvent = (event: KeyboardEvent<HTMLDivElement> | Event) => {
    if (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,
}