import React, { MouseEvent } from 'react'
import { observer } from 'xmobx/mobx-react'
import { isSafe, NO_OP, isFunction } from 'exotic'
import { commonState } from 'src/state'
import { ToggleProps } from './typings'
import {
  defaultRenderAfterLabel,
  defaultRenderLabel,
  defaultRenderBeforeLabel,
  defaultRenderIcon,
  defaultRenderBox,
  defaultRenderWrapper,
} from './renderProps'

@observer
class Toggle extends React.Component<ToggleProps> {
  static defaultProps = {
    className: '',
    borderColor: '#000000',
    bgColor: '#000000',
    tickColor: '#ffffff',
    // handler
    onToggle: NO_OP,
    // renderProps
    renderAfterLabel: defaultRenderAfterLabel,
    renderLabel: defaultRenderLabel,
    renderBeforeLabel: defaultRenderBeforeLabel,
    renderIcon: defaultRenderIcon,
    renderWrapper: defaultRenderWrapper,
  }

  state = commonState(this.props)

  componentWillUpdate(nextProps: ToggleProps) {
    const { isSelected } = nextProps
    const { isSelected: oldIsSelected } = this.props

    if (
      isSafe(isSelected) &&
      isSafe(oldIsSelected) &&
      oldIsSelected !== isSelected
    ) {
      isSelected === true
        ? this.state.select(isSelected)
        : this.state.unselect(isSelected)
    }
  }

  handleToggle = (event: MouseEvent<HTMLDivElement>) => {
    const { label, value, onToggle } = this.props
    this.state.handleToggleSelected()
    if (isFunction(onToggle)) {
      const args = {
        isSelected: this.state.isSelected,
        label,
        value,
      }
      onToggle(args)
    }
  }

  render() {
    const { renderWrapper, ...remainingProps } = this.props

    const children = defaultRenderBox(remainingProps, this.state)

    const view = renderWrapper({
      children,
      ...remainingProps,
      onToggle: this.handleToggle,
    })
    return view
  }
}

export { Toggle }
export default Toggle