import React from 'react'
import { EMPTY_ARRAY } from 'exotic'
import { FlexBoxTemplateProps } from './typings'
import {
  defaultRenderItem,
  defaultRenderList,
  defaultRenderWrapper,
} from './renderProps'

class FlexBoxTemplate extends React.PureComponent<FlexBoxTemplateProps> {
  static defaultProps = {
    className: '',
    list: EMPTY_ARRAY,
    flexWrap: 'wrap',
    direction: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    shouldAdapt: true,
    gridGap: 10,
    desktopColumn: 4,
    tabletColumn: 3,
    mobileColumn: 2,
    renderItem: defaultRenderItem,
    renderList: defaultRenderList,
    renderWrapper: defaultRenderWrapper,
  }
  render() {
    const { renderList, renderWrapper, ...remainingProps } = this.props
    const children = renderList(remainingProps)
    return renderWrapper({ children, ...remainingProps })
  }
}

export { FlexBoxTemplate }
export default FlexBoxTemplate