import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { EMPTY_OBJ } from 'exotic'
import { sidebarGroupState } from '../SidebarGroup'
import { SidebarItemState } from './State'
import { SidebarItemProps } from './typings'
import { StylehSidebarItem } from './styled'

export function renderSidebar(props) {
  return <StylehSidebarItem {...props} />
}

@observer
class SidebarItem extends React.Component<SidebarItemProps, SidebarItemState> {
  static defaultProps = {
    get state() {
      // only instantiate if needed
      return new SidebarItemState()
    },
  }

  render() {
    console.debug('[Sidebar] SidebarItem props: ')
    console.dir(this.props)

    const { children } = this.props

    return this.props.state.render(this.props)
  }
}

export { SidebarItem }
export default SidebarItem