import React from 'react'
import { MaterialIcon } from 'atoms/MaterialIcon'
import { ToggleItemProps } from './typings'
import {
  ToggleItemIconWrapper,
  ToggleItemLabel,
  ToggleItemWrapper,
} from './styled'

/**
 * TOGGLE ITEM COMPONENT RENDER PROPS
 */
export function defaultRenderIcon(props: ToggleItemProps) {
  const { borderColor, bgColor, tickColor } = props

  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}
      onClick={props.onClick}
    />
  ) : (
    <MaterialIcon
      type={props.isSelected ? 'radio_on' : 'radio_off'}
      isSelected={props.isSelected}
      onClick={props.onClick}
    />
  )

  return <ToggleItemIconWrapper>{iconView}</ToggleItemIconWrapper>
}

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

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

export function defaultRenderWrap(props: ToggleItemProps) {
  const {
    selectedDataQa = 'qa-facet-selected',
    unselectedDataQa = 'qa-facet',
  } = props
  const dataQa = props.isSelected ? selectedDataQa : unselectedDataQa
  return (
    <ToggleItemWrapper className={props.className} data-qa={dataQa}>
      {props.children}
    </ToggleItemWrapper>
  )
}