import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { ActionButtonGroup } from 'presets/Order/ActionButtonGroup'
import { ProductItemButtonsPanel } from './styled'

@observer
class ButtonGroup extends React.Component {
  render() {
    const {
      renderProductItemButtons,
      renderProductItemForm,
      state,
    } = this.props

    const { isFocused, isActive } = state

    return (
      <ProductItemButtonsPanel isActive={isActive} isFocused={isFocused}>
        <ActionButtonGroup
          renderDefaultView={renderProductItemButtons}
          renderActiveView={renderProductItemForm}
        />
      </ProductItemButtonsPanel>
    )
  }
}

export { ButtonGroup }
export default ButtonGroup