import React from 'react'
import { EMPTY_ARRAY, isArray } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import {
  SelectionState,
  isEveryItemInListDecoratedWithOnClick,
} from 'src/state/SelectionState'
import { ToggleItem, ToggleItemProps } from '../ToggleItem'
import { ToggleListProps } from './typings'
import {
  defaultRenderItem,
  defaultRenderWrapper,
  defaultRenderHeader,
  defaultRenderContentWrapper,
} from './renderProps'

@observer
class ToggleList extends React.Component<ToggleListProps> {
  static defaultProps = {
    className: '',
    list: EMPTY_ARRAY,
    // renderList: defaultRenderList,
    renderItem: defaultRenderItem,
    renderWrapper: defaultRenderWrapper,
    renderHeader: defaultRenderHeader,
    renderContentWrapper: defaultRenderContentWrapper,
  }

  /**
   * Multi state object creation for selection state
   */
  observableState = this.props.selectableState || new SelectionState()

  componentWillMount() {
    this.observableState.decorateWithProps(this.props)
  }

  componentWillReact() {
    if (isEveryItemInListDecoratedWithOnClick(this.props) === false) {
      this.observableState.decorateWithProps(this.props)
    }
  }

  /**
   * we need this one because we have to pass state inside of a .map
   */
  renderItem = (item: ToggleItemProps, index: number) => {
    const {
      renderItem,
      renderList,
      renderWrapper,
      renderHeader,
      renderContentWrapper,
      ...remainingListProps
    } = this.props

    return renderItem(item, this.observableState, remainingListProps)
  }

  render() {
    const {
      list,
      renderWrapper,
      renderHeader,
      renderContentWrapper,
      breedType,
      ...remainingProps
    } = this.props

    const toggleList = isArray(list) && list.map(this.renderItem)
    const header = renderHeader(this.props)

    const renderChildren = (
      <React.Fragment>
        {header}
        {renderContentWrapper(toggleList, breedType)}
      </React.Fragment>
    )

    const renderPropProps = {
      ...this.props,
      state: this.observableState,
      children: renderChildren,
    }

    const view = renderWrapper(renderPropProps, this.observableState)
    return view
  }
}

export { ToggleList }
export default ToggleList