import React from 'react'
import { ToggleProps } from './typings'
import {
  defaultRenderIcon,
  defaultRenderText,
  defaultRenderWrapper,
} from './renderProps'
import { observer } from 'xmobx/mobx-react'
import { CommonState, commonState } from 'src/state'
import { NO_OP } from 'uxui-modules/exotic'

@observer
class Toggle extends React.Component<ToggleProps> {
  static defaultProps = {
    className: '',
    onToggle: NO_OP,

    renderIcon: defaultRenderIcon,
    renderText: defaultRenderText,
    renderWrapper: defaultRenderWrapper,
  }

  state = commonState(this.props)

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

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

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

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

export { Toggle }
export default Toggle