import React from 'react'
import { ProductItemProps } from './typings'
import { productItemData as productDetails } from './fixture'
import {
  defaultRenderImage,
  defaultRenderTitle,
  defaultRenderPrice,
  defaultRenderOfferInfo,
  defaultRenderRatings,
  defaultRenderAddToCartButton,
  defaultRenderFavouriteButton,
  defaultRenderTemplate,
  defaultRenderWrapper,
} from './renderProps'

class ProductItem extends React.Component<ProductItemProps> {
  static defaultProps = {
    className: '',
    productItemData: productDetails,

    /**
     * render props
     */
    renderImage: defaultRenderImage,
    renderTitle: defaultRenderTitle,
    renderPrice: defaultRenderPrice,
    renderOfferInfo: defaultRenderOfferInfo,
    renderRatings: defaultRenderRatings,
    renderAddToCartButton: defaultRenderAddToCartButton,
    renderFavouriteButton: defaultRenderFavouriteButton,
    renderWrapper: defaultRenderWrapper,
  }
  render() {
    const { renderWrapper, ...remainingProps } = this.props
    const children = defaultRenderTemplate(remainingProps)
    return renderWrapper({ children, remainingProps })
  }
}

export { ProductItem }
export default ProductItem