import React from 'react'
import { MenuListProps } from './typings'
import { ButtonList, list, ViewAllText, ImageData } from './fixtures'
import {
  renderImage as defaultRenderImage,
  renderListOfButtons as defaultRenderListOfButtons,
  renderListOfLinksGrid as defaultRenderListOfLinksGrid,
  renderWrapper as defaultRenderWrapper,
} from './renderProps'

class MenuList extends React.PureComponent<MenuListProps> {
  static defaultProps = {
    className: '',

    /**
     * data mapping
     */
    buttonsList: ButtonList,
    list: list,
    imageData: ImageData,
    linkViewAllText: ViewAllText,

    /**
     * renerProps Mapping
     */
    renderImage: defaultRenderImage,
    renderButtons: defaultRenderListOfButtons,
    renderGridLinks: defaultRenderListOfLinksGrid,
    renderWrapper: defaultRenderWrapper,
  }
  render() {
    const {
      renderImage,
      renderButtons,
      renderGridLinks,
      renderWrapper,
    } = this.props

    const buttonsPanel = renderButtons(this.props)
    const linkOfListPanel = renderGridLinks(this.props)
    const imagePanel = renderImage(this.props)

    const children = (
      <React.Fragment>
        {buttonsPanel}
        {linkOfListPanel}
        {imagePanel}
      </React.Fragment>
    )

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

export { MenuList }
export default MenuList