import React from 'react'
import * as Template from './styled'

function defaultTemplate() {
  return (
    <Template.PLPpageWrapperArea>
      <Template.PLPbannersectionArea />
      <Template.PLPcontentsectionArea />
      <Template.PLPfootersectionArea />
    </Template.PLPpageWrapperArea>
  )
}

function gridTemplate() {
  return (
    <Template.PLPpageWrapperArea>
      <Template.PLPbannersectionArea />

      <Template.PLPcontentsectionArea>
        <Template.PLPinnercontentsectionArea>
          <Template.FilterSectionArea />
          <Template.HeaderSectionArea />
          <Template.ProductItemSectionArea />
          <Template.ProductItemSection2xArea />
          <Template.ProductItemSectionArea />
          <Template.ProductItemSectionArea />
          <Template.ProductItemSectionArea />
          <Template.ProductItemSectionArea />
          <Template.ProductItemSectionArea />
          <Template.ProductItemSectionArea />
          <Template.ProductItemSectionArea />
          <Template.ProductItemSectionArea />
          <Template.ProductItemSectionArea />
          <Template.ProductItemSectionArea />
          <Template.ProductItemSectionArea />
          <Template.ProductItemSectionArea />
          <Template.ProductItemSectionArea />
        </Template.PLPinnercontentsectionArea>
      </Template.PLPcontentsectionArea>

      <Template.PLPfootersectionArea />
    </Template.PLPpageWrapperArea>
  )
}

class PLPTemplate extends React.PureComponent {
  static defaultProps = {
    gridType: '',
  }
  render() {
    const renderItems = this.props.gridType === 'list' ? gridTemplate() : defaultTemplate()
    return renderItems
  }
}

export { PLPTemplate }
export default PLPTemplate