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

@observer
class Toggle extends React.Component<ToggleProps> {
  static defaultProps = {
    className: '',
    borderColor: '#000000',
    bgColor: '#000000',
    tickColor: '#ffffff',
    // handler
    onToggle: NO_OP,
    // renderProps
    renderIcon: defaultRenderIcon,
    renderLabel: defaultRenderLabel,
    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<HTMLButtonElement>) => {
    const { label, onToggle } = this.props
    this.state.handleToggleSelected()
    if (isFunction(onToggle)) {
      const args = {
        isSelected: this.state.isSelected,
        label,
      }
      onToggle(args)
    }
  }

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

    const iconView = renderIcon({
      ...remainingProps,
      isSelected: this.state.isSelected,
      onToggle: this.handleToggle,
    })

    const textView = renderLabel(remainingProps)

    const children = (
      <React.Fragment>
        {iconView}
        {textView}
      </React.Fragment>
    )

    const view = renderWrapper({ children, ...remainingProps })
    return view
  }
}

export { Toggle }
export default Toggle