import React from 'react'
import { isFunction, NO_OP } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { ProductItemProps } from './typings'
import {
  defaultRenderPromoDetails,
  defaultRenderTotal,
  defaultRenderQuantity,
  defaultRenderRatings,
  defaultRenderProductName,
  defaultRenderFacetDetails,
  defaultRenderProductDetailsBox,
  defaultRenderBrandName,
  defaultRenderPrice,
  defaultRenderImage,
  defaultRenderBox,
  defaultRenderWrapper,
} from './renderProps'

@observer
class ProductItemV1 extends React.Component<ProductItemProps> {
  static defaultProps = {
    className: '',
    align: 'column',
    type: 'vertical',
    // renderProps
    renderTotal: defaultRenderTotal,
    renderQuantity: defaultRenderQuantity,
    renderFacetDetails: defaultRenderFacetDetails,
    renderRatings: defaultRenderRatings,
    renderProductName: defaultRenderProductName,
    renderBrandName: defaultRenderBrandName,
    renderPrice: defaultRenderPrice,
    renderImage: defaultRenderImage,
    renderBox: defaultRenderBox,
    renderWrapper: defaultRenderWrapper,
    renderProductDetailsBox: defaultRenderProductDetailsBox,
    renderPromoDetails: defaultRenderPromoDetails,
    onFavoriteClick: NO_OP,
    productDetailsOrder: [
      'brandName',
      'productName',
      'promoOffer',
      'rating',
      'facet',
      'quantity',
      'price',
    ],
  }
  render() {
    const { renderWrapper, renderBox, ...remainingProps } = this.props
    const children = isFunction(renderBox) && renderBox(this.props)
    const view =
      isFunction(renderWrapper) &&
      renderWrapper({ children, ...remainingProps })
    return view
  }
}

export { ProductItemV1 }
export default ProductItemV1