import React from 'react'
import { ProductItemPlaceholderProps } from './typings'
import {
  defaultRenderImage,
  defaultRenderName,
  defaultRenderDescription,
  defaultRenderSkuId,
  defaultRenderSize,
  defaultRenderColor,
  defaultRenderItemId,
  defaultRenderPrice,
  defaultRenderQuantity,
  defaultRenderRatings,
  defaultRenderProductFrequency,
  //
  defaultRenderProductItemDetails,
  //
  defaultRenderProductItemButtons,
  defaultRenderProductItemForm,
  //
  defaultRenderContainer,
  defaultRenderWrapper,
} from './renderProps'

class ProductItem extends React.PureComponent<ProductItemPlaceholderProps> {
  static defaultProps = {
    className: '',

    /**
     * render props
     */
    renderImage: defaultRenderImage,
    renderName: defaultRenderName,
    renderDescription: defaultRenderDescription,
    renderSkuId: defaultRenderSkuId,
    renderSize: defaultRenderSize,
    renderColor: defaultRenderColor,
    renderItemId: defaultRenderItemId,
    renderPrice: defaultRenderPrice,
    renderQuantity: defaultRenderQuantity,
    renderRatings: defaultRenderRatings,
    renderProductFrequency: defaultRenderProductFrequency,
    //
    renderProductItemDetails: defaultRenderProductItemDetails,
    //
    renderProductItemButtons: defaultRenderProductItemButtons,
    renderProductItemForm: defaultRenderProductItemForm,
    //
    renderWrapper: defaultRenderWrapper,
  }
  render() {
    const { hasSingleProduct, renderWrapper, ...remainingProps } = this.props
    // console.debug('[ProductItem/Abstraction] hasSingleProduct')
    // console.dir(this.props.itemDetails.hasSingleProduct)

    const children = defaultRenderContainer(remainingProps)
    const view = renderWrapper({ ...remainingProps, children })
    return view
  }
}

export { ProductItem }
export default ProductItem