import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { ToggleMoleculeProps } from './typings'
import { Provider, Consumer } from '../Context'
import {
  renderLabelText as defaultRenderLabelText,
  renderIcon as defaultRenderIcon,
  renderInput as defaultRenderInput,
  renderLabelWrapper as defaultRenderLabelWrapper,
} from './_renderProps'

@observer
class ToggleMolecule extends React.Component<ToggleMoleculeProps> {
  static defaultProps = {
    renderInput: defaultRenderInput,
    renderIcon: defaultRenderIcon,
    renderLabelText: defaultRenderLabelText,
    renderLabelWrapper: defaultRenderLabelWrapper,
  }

  // minimum effective dose - we render text
  renderContext = contextProps => {
    const {
      isDisabled,
      renderLabelWrapper,
      renderLabelText,
      renderIcon,
      renderInput,
    } = this.props

    // great, wrapper renders
    const labelView = renderLabelText(contextProps)
    // it only cares about isSelected
    const icon = renderIcon(contextProps)
    // also is wrapped... humbug
    // is hidden anyway
    const input = renderInput(contextProps)
    // because StudlyCaps is what React says too
    const Wrap = renderLabelWrapper

    // for now, only allowing label to click
    // const onChange = contextProps.onChange

    return (
      <Wrap isDisabled={isDisabled}>
        {icon}
        {input}
        {labelView}
      </Wrap>
    )
  }

  render() {
    return (
      <Provider {...this.props}>
        <Consumer>{this.renderContext}</Consumer>
      </Provider>
    )
  }
}

export { ToggleMolecule as Toggle }
export { ToggleMolecule }
export default ToggleMolecule