import React from 'react'
import { NO_OP } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { SelectionState } from 'src/state/SelectionState'
import { TabListRenderProp } from './typings'
import {
  defaultRenderList,
  defaultRenderWrapper,
  defaultRenderContainer,
} from './renderProps'

@observer
class TabList extends React.Component<TabListRenderProp> {
  static defaultProps = {
    className: '',
    list: [],
    renderList: defaultRenderList,
    renderWrapper: defaultRenderWrapper,
    renderContainer: defaultRenderContainer,
  }
  observableState = new SelectionState()
  componentWillMount() {
    const attributes = {
      ...this.props,
      list: this.props.list,
      onChange: NO_OP,
    }
    this.observableState.decorateWithProps(attributes)
  }

  handleForce = () => {
    this.forceUpdate()
  }

  render() {
    const { renderWrapper, ...remainingProps } = this.props
    const attributes = {
      ...remainingProps,
      handleForce: this.handleForce,
    }
    const view = renderWrapper(attributes)
    return view
  }
}
export { TabList }
export default TabList