import React from 'react'
import { EMPTY_ARRAY } from 'exotic'
import { GridTemplateProps } from './typings'
import {
  defaultRenderComponent,
  defaultRenderBox,
  defaultRenderWrapper,
} from './renderProps'

class GridTemplate extends React.PureComponent<GridTemplateProps> {
  static defaultProps = {
    className: '',
    direction: 'row',
    backgroundColor: '#fff',
    gridGap: 10,
    shouldWrap: false,
    desktopColSpan: 3,
    tabletColSpan: 2,
    mobileColSpan: 1,
    list: EMPTY_ARRAY,
    // renderProps
    renderComponent: defaultRenderComponent,
    renderWrapper: defaultRenderWrapper,
  }
  render() {
    const { renderWrapper, ...remainingProps } = this.props
    const children = defaultRenderBox(remainingProps)
    const view = renderWrapper({ children, ...remainingProps })
    return view
  }
}

export { GridTemplate }
export default GridTemplate