/**
 * @todo make sure interface is same as Toggle
 */
import React from 'react'
import { MouseEvent } from 'react'
import { observer } from 'xmobx/mobx-react'
import { isFunction } from 'exotic'
import { SwitchIcon } from 'src/components/atoms/Icons'
import { toCommonState } from 'src/state/common'
import { SwitchLabel } from './styled'
import { SwitchProps } from './typings'
import { defaultRenderWrap } from './renderProps'

@observer
class Switch extends React.Component<SwitchProps> {
  static defaultProps = {
    className: '',
    renderWrap: defaultRenderWrap,
  }

  observableState = toCommonState(this.props)

  handleClick = (event: MouseEvent<any>) => {
    this.observableState.handleToggleSelected()
    if (isFunction(this.props.onToggle)) {
      // @todo @james
      // we can just pass in observableState, but the reference-store commonState is missing label
      // this.props.onToggle(this.observableState)

      const args = {
        isSelected: this.observableState.isSelected,
        label: this.props.label,
        state: this.observableState,
      }
      this.props.onToggle(args)
    }
  }

  /**
   * @todo link to example where putting it in the render method patched a problem of it not updating
   */
  render() {
    const { className, renderWrap } = this.props
    const attributes = {
      className,
      isSelected: this.observableState.isSelected,
      onClick: this.handleClick,
    }

    /**
     * @todo this is not a real label, need to be able to click a label and toggle the form input (in this case, the checkbox)
     * @todo renderLabel
     */
    const switchLabelView = (
      <SwitchLabel isSelected={this.observableState.isSelected}>
        {this.observableState.isSelected ? 'ON' : 'OFF'}
      </SwitchLabel>
    )

    /**
     * @todo renderWrap
     */
    const switchView = (
      <React.Fragment>
        <SwitchIcon {...attributes} />
        {switchLabelView}
      </React.Fragment>
    )

    return renderWrap({ ...attributes, children: switchView })
  }
}

export { Switch }
export default Switch