import React from 'react'
import { omit } from 'uxui-modules/utils/omit'
import { DetailedListProps } from './typings'
import {
  defaultRenderDetailedListHeading,
  defaultRenderDetailedList,
  defaultRenderDetailedListItem,
  defaultRenderWrapper,
} from './renderProps'

class DetailedList extends React.PureComponent<DetailedListProps> {
  static defaultProps = {
    className: '',
    list: [],
    isColumnView: false,
    /* props */
    renderDetailedListHeading: defaultRenderDetailedListHeading,
    renderDetailedListItem: defaultRenderDetailedListItem,
    renderWrapper: defaultRenderWrapper,
  }
  render() {
    const { renderDetailedListHeading, renderWrapper, ...remainingProps } = this.props

    const neededProps = omit(remainingProps, ['list', 'isColumnView'])

    const heading = renderDetailedListHeading(neededProps)
    const listItemContainer = defaultRenderDetailedList(remainingProps)

    const children = (
      <React.Fragment>
        {heading}
        {listItemContainer}
      </React.Fragment>
    )

    const view = renderWrapper({ ...neededProps, children })
    return view
  }
}

export { DetailedList }
export default DetailedList