/* eslint-disable valid-jsdoc */
import React from 'react'
import toClassName from 'classnames'
// domain
import CheckboxIcon from 'atoms/Icons/CheckBoxIcon'
import RadioIcon from 'atoms/Icons/RadioIcon'
// import Color from 'atoms/Icons/ColorIcon'
//
import { Provider, Consumer } from '../Context'
import { CheckboxInput, RadioInput } from '../inputs'
// mixed these up woop
import { ToggleLabel as LabelText } from '../ToggleLabel'
import LabelWrap from '../Label'
// import { ColorContainer } from './_themed'
import { ToggleMoleculeProps as Props } from './typings'
import { ToggleState as State } from '../typings'

export const renderCheckbox = (props: Props) => (
  <CheckboxInput />
)
export const renderRadio = (props: Props) => (
  <RadioInput />
)
export const renderRadioIcon = (props: Props) => (
  // console.log('renderRadioIcon____state', props)
  <RadioIcon onClick={props.handleChange} isSelected={state.isSelected} />
)
// only giving 1 prop
export const renderCheckboxIcon = (props: Props) => (
  <CheckboxIcon
    isSelected={props.isSelected}
    shouldAlignRight={props.shouldAlignRight}
  />
)

export const toLabelClassName = (props: Props) => {
  const { className, isSelected, isActive, isDisabled } = props
  console.log('[Toggle] selected values', isDisabled)

  // @todo remove or fixture
  const type = props.isRadio ? 'radio' : 'checkbox'
  const computedClassName = 'label-wrap label-wrap-' + type
  // @todo can optimize with sealed
  return toClassName(computedClassName, className, {
    active: isSelected,
    inactive: !isSelected,
    disable: isDisabled,
  })
}
export function renderLabelWrapper(props: Props) {
  return (
    // we click on the wrapper
    <LabelWrap
      identifier={props.identifier}
      className={toLabelClassName(props)}
      onClick={props.onClick}
      children={props.children}
      isDisabled={props.isDisabled}
    />
  )
}

export function renderLabelText(props: Props) {
  const { isColor } = props

  switch (true) {
    case isColor:
      return false
    default:
      return (
        <LabelText
          // could handle this more fancy,
          // but if we have a set of props & nothing more
          // this works restrictively for now
          text={props.text}
          // not sure if we need both
          // probably would work to have as a renderProp
          secondaryText={props.secondaryText || props.count || ''}
          image={props.image}
        />
      )
  }
}

// @todo only the color needed
// const renderColorIcon = props => <ColorContainer {...props} />
export function renderColorIcon(props: Props) {
  return '@@todo color'
}

export function renderInput(props: Props) {
  const { isRadio, isCheckbox } = props

  // @todo @fixme @later @wcag @accessibility
  return <input data-todo hidden />

  // switch (true) {
  //   case isRadio: return renderCheckbox()
  //   default: return renderRadio()
  // }
}

// here though, props
export function renderIcon(props: Props) {
  const { isRadio, isCheckbox, isColor } = props
  switch (true) {
    case isCheckbox:
      return renderCheckboxIcon(props)
    case isRadio:
      return renderRadioIcon(props)
    case isColor:
      return renderColorIcon(props)
    default:
      return renderCheckboxIcon(props)
  }
}