// modules
import React from 'react'
import { EMPTY_ARRAY } from 'exotic'
import { DetailedListProps } from './typings'
import { media } from './deps'
import { wording as fixture } from './fixture'
import {
  renderSpecificationItem as defaultRenderSpecificationItem,
  renderSpecificationWrap as defaultRenderSpecificationWrap,
  renderSpecificationHeading as defaultRenderSpecificationHeading,
  renderSpecificationList as defaultRenderSpecificationList,
} from './renderProps'
import { renderText } from '../../../../config/__todo/atoms/SelectDropDown/wr/_renderProps'

/**
 * @note - this accepts an array of values that may change, it's not pure, it's an observer
 * @see https://mobx.js.org/refguide/observer-component.html
 */
class DetailedList extends React.Component<DetailedListProps> {
  static defaultProps = {
    list: EMPTY_ARRAY,
    wording: fixture,
    renderSpecificationItem: defaultRenderSpecificationItem,
    renderSpecificationWrap: defaultRenderSpecificationWrap,
    renderSpecificationHeading: defaultRenderSpecificationHeading,
    renderSpecificationList: defaultRenderSpecificationList,
  }

  render() {
    const {
      specifications,
      list,
      wording,
      // @todo could take in children/render too
      // render props
      renderSpecificationItem,
      renderSpecificationWrap,
      renderSpecificationHeading,
      renderSpecificationList,
      ...remainingProps
    } = this.props

    const headerText = media.isPhone ? '' : renderSpecificationHeading(this.props)
    const specificationList = renderSpecificationList(this.props)

    // @todo could also just check `nowrap`
    // but if we want to get the attrs passed
    const children = (
      <React.Fragment>
        {headerText}
        {specificationList}
      </React.Fragment>
    )
    const attributes = {
      ...remainingProps,
      children,
    }

    return renderSpecificationWrap(attributes)
  }
}

export { DetailedList }
export default DetailedList