import React from 'react'
import { List } from 'molecules/List'
import {
  SelectionListTitle as defaultTitle,
  SelectionListData as defaultList,
} from './fixture'
import { SelectionListProps } from './typings'
import {
  renderWrapper as defaultRenderWrapper,
  renderHeader as defaultRenderHeader,
} from './renderProps'

class SectionList extends React.PureComponent<SelectionListProps> {
  static defaultProps = {
    className: '',
    //
    title: defaultTitle,
    list: defaultList,
    renderWrapper: defaultRenderWrapper,
    renderHeader: defaultRenderHeader,
  }

  render() {
    const { renderHeader, renderWrapper, ...remainingProps } = this.props
    const sectionTitle = renderHeader(remainingProps)

    const children = (
      <React.Fragment>
        {sectionTitle}
        <List {...remainingProps} />
      </React.Fragment>
    )

    return renderWrapper({ ...remainingProps, children })
  }
}

export { SectionList }
export default SectionList