import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { toCommonState } from 'src/state/common'
import { CommonState } from 'src/state'
import { ActionButtonGroupProps } from './typings'
import {
  defaultRenderActiveView,
  defaultRenderDefaultView,
  defaultRenderWrapper,
} from './renderProps'

@observer
class ActionButtonGroup extends React.Component<ActionButtonGroupProps, CommonState> {
  static defaultProps = {
    className: '',

    renderActiveView: defaultRenderActiveView,
    renderDefaultView: defaultRenderDefaultView,
    renderWrapper: defaultRenderWrapper,
  }

  state = toCommonState(this.props)

  render() {
    const { renderWrapper, renderDefaultView, renderActiveView, ...remainingProps } = this.props

    const currentView = this.state.isActive
      ? renderActiveView(remainingProps, this.state)
      : renderDefaultView(remainingProps, this.state)

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

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

export { ActionButtonGroup }
export default ActionButtonGroup