import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { ProductItemListProps } from './typings'
import {
  defaultRenderProductItem,
  defaultRenderProductItemList,
  defaultRenderProductListWrapper,
  defaultRenderProductListContainer,
} from './renderProps'

@observer
class ProductItemList extends React.Component<ProductItemListProps> {
  static defaultProps = {
    className: '',
    list: [{}, {}, {}],
    renderProductItem: defaultRenderProductItem,
    renderProductItemList: defaultRenderProductItemList,
    renderProductListWrapper: defaultRenderProductListWrapper,
    renderProductListContainer: defaultRenderProductListContainer,
  }

  render() {
    const {
      renderProductListWrapper,
      renderProductListContainer,
      ...remainingProps
    } = this.props

    const hasSingleProduct = this.props.list.length === 1
    const children = renderProductListContainer({
      hasSingleProduct,
      ...remainingProps,
    })
    const view = renderProductListWrapper({ hasSingleProduct, ...remainingProps, children })
    return view
  }
}

export { ProductItemList }
export default ProductItemList