import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { NO_OP } from 'exotic'
import { CommonState, 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',
    onToggle: NO_OP,

    renderIcon: defaultRenderIcon,
    renderLabel: defaultRenderLabel,
    renderWrapper: defaultRenderWrapper,
  }

  state = commonState(this.props)

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

    const iconView = renderIcon(remainingProps, this.state)
    const textView = renderLabel(remainingProps)

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

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

export { Toggle }
export default Toggle