/* eslint-disable brace-style */
import React from 'react'
import { styled } from 'styleh-components'
import ToggleItem from 'molecules/ToggleList/ToggleItem'
import { isFunction } from 'exotic'
import { InputChain } from '../../InputChain'
import inputTypes from '../../ObserverInput'

const StyledToggleItem = styled.withComponent(ToggleItem)`
svg {
  height: rem(20);
  width: rem(20);
  border-radius: rem(5);
}
`
// THIS IS NOT A REACT COMPONENT, BUT BABEL IS HIJACKING IT...
class CheckboxInput extends InputChain {
  setIsSelected = (opposite = undefined) => {
    this.get('state').isSelected = opposite === undefined
      ? !this.get('state').isSelected
      : opposite
  }

  // 1. checking if it is the right one
  // ^ this means nobody ever has to change ObserverInput
  // ... it's externally configurable by anyone in a standard pattern :-)
  handleToggle = () => {
    const state = this.get('state')
    const props = this.get('props')

    // onToggle, onChange, onSelect, onClick...
    console.log('this.state', state, props)
    if (isFunction(props.onToggle)) {
      props.onToggle(state)
    }
    // common props - used in makeDefault, maybe gift options
    else if (isFunction(props.onClick)) {
      props.onClick()
    }
    // common state
    else if (isFunction(state.handleToggleSelected) === true) {
      state.handleToggleSelected()
    }
    // input state
    else if (isFunction(state.setIsSelected) === true) {
      state.setIsSelected(!state.isSelected)
    }

    // @note added
    // if (isFunction(this.state.onClick)) {
    //   this.state.onToggle(this.state)
    // }
  }
  static isSatisfiedByProps(props): boolean {
    return props.type === 'checkbox'
  }

  // @action
  // no need for any params because we have this.parent & this.state & this.props
  // no need to return, this only sets a property on state
  validate(): void {
    console.dev('CheckboxInput_validate')

    const { value, validationType } = this.get('state')
    this.isValid = validators.isValid(value, validationType)
  }

  // 2. this is the view
  render() {
    const props = this.get('props')
    // console.log('CheckboxInput_render', props)

    const onClick = this.handleToggle
    const type = this.type
    const isRadio = props.type === inputTypes.radioButton
    const isCheckBox = props.type === 'checkbox'

    const attributes = {
      ...props,
      onClick,
      isRadio,
      isCheckBox,
    }
    return <StyledToggleItem {...attributes} />
  }
}

export { CheckboxInput }
export default CheckboxInput