import React from 'react'
import { DetailedListProps } from './typings'
import { DetailedListDataModel } from './fixture'
import {
  defaultRenderWrapper,
  defaultRenderListHeading,
  defaultRenderListItem,
  defaultRenderList,
  defaultRenderEmpty,
} from './renderProps'

/**
 * @todo media query related css needs to be rendered
 * #1 - When at mobile view the detailed list must be in column view
 * so the flex-direction should be column by default its row
 */
class DetailedList extends React.PureComponent<DetailedListProps> {
  static defaultProps = {
    className: '',
    title: '',
    list: DetailedListDataModel,
    renderListItem: defaultRenderListItem,
    renderWrapper: defaultRenderWrapper,
    renderListHeading: defaultRenderListHeading,
    renderList: defaultRenderList,
    renderEmpty: defaultRenderEmpty,
  }
  render() {
    const {
      list,
      renderList,
      renderListHeading,
      renderListItem,
      renderWrapper,
      ...remainingProps
    } = this.props

    const headerText = renderListHeading(this.props)
    const specificationList = renderList(this.props)

    const children = (
      <React.Fragment>
        {headerText}
        {specificationList}
      </React.Fragment>
    )
    return renderWrapper({ ...remainingProps, children })
  }
}

export { DetailedList }
export default DetailedList