import React from 'react'
import RadioIcon from 'atoms/Icons/RadioIcon'
import CheckboxIcon from 'atoms/Icons/CheckBoxIcon'
import { ToggleItemProps } from './typings'
import {
  ToggleItemIconWrapper,
  ToggleItemLabel,
  ToggleItemWrapper,
  StyledCheckboxIcon,
} 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 svgAttributes = props.isSelected ? selectedIconAttributes : deselectedIconAttributes

  const iconView = props.isCheckBox ? (
    <StyledCheckboxIcon isSelected={props.isSelected} onClick={props.onClick} {...svgAttributes} />
  ) : (
      <RadioIcon 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 dataQa = props.isSelected ? 'qa-facet-selected' : 'qa-facet'
  return (
    <ToggleItemWrapper className={props.className} data-qa={dataQa}>
      {props.children}
    </ToggleItemWrapper>
  )
}