import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { SidebarGroupState } from './State'
import { SidebarGroupProps } from './typings'
import { sidebarGroupState, toSidebarRender } from './_deps'
import { SidebarWrap } from './styled'
import { renderSidebarGroupList as defaultRenderSidebarGroupList } from './renderProps'

@observer
class SidebarGroup extends React.Component<
  SidebarGroupProps,
  SidebarGroupState
  > {
  static defaultProps = {
    renderSidebarGroupList: defaultRenderSidebarGroupList,
  }
  state = sidebarGroupState

  render() {
    console.debug('[SidebarGroup] render')

    const { renderSidebarGroupList, nowrap, className } = this.props
    const view = renderSidebarGroupList(this.props, this.state)
    const Wrap = nowrap === true ? React.Fragment : SidebarWrap

    return <Wrap className={className}>{view}</Wrap>
  }
}

export { SidebarGroup }
export default SidebarGroup