import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { ToggleItemProps } from './typings'
import { ToggleItemWrapper } from './styled'
import {
  defaultRenderIcon,
  defaultRenderText,
  defaultRenderBox,
  defaultRenderWrap,
} from './renderProps'

@observer
class ToggleItem extends React.Component<ToggleItemProps> {
  static defaultProps = {
    className: '',
    borderColor: '#000000',
    bgColor: '#000000',
    tickColor: '#ffffff',
    //
    renderWrap: defaultRenderWrap,
    renderBox: defaultRenderBox,
    renderIcon: defaultRenderIcon,
    renderText: defaultRenderText,
  }

  render() {
    const { renderBox, renderWrap, ...remainingProps } = this.props
    const children = renderBox(remainingProps)
    const view = renderWrap({ children, ...remainingProps })
    return view
  }
}

export { ToggleItem }
export default ToggleItem