import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { toCommonState } from 'src/state/common'
import { CommonState } from 'src/state'
import { EMPTY_OBJ } from 'exotic'
import {
  ProductItem as ProductItemPlaceholder,
  Provider,
} from 'abstractions/Order/ProductItem'
import { ProductItemProps } from './typings'
import {
  defaultRenderImage,
  defaultRenderName,
  defaultRenderDescription,
  defaultRenderSkuId,
  defaultRenderSize,
  defaultRenderColor,
  defaultRenderItemId,
  defaultRenderPrice,
  defaultRenderQuantity,
  defaultRenderRatings,
  defaultRenderProductFrequency,
  //
  defaultRenderProductItemButtons,
  defaultRenderProductItemForm,
  //
  defaultRenderWrapper,
} from './renderProps'

@observer
class ProductItem extends React.Component<ProductItemProps, CommonState> {
  state = toCommonState(this.props)

  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,
    //
    renderProductItemButtons: defaultRenderProductItemButtons,
    renderProductItemForm: defaultRenderProductItemForm,
    //
    renderWrapper: defaultRenderWrapper,
  }
  render() {
    // console.debug('[ProductItem/Presets] hasSingleProduct')
    // console.dir(this.props.itemDetails.hasSingleProduct)
    const value = { props: this.props, state: this.state }
    return (
      <Provider value={value}>
        <ProductItemPlaceholder {...this.props} />
      </Provider>
    )
  }
}

export { ProductItem }
export default ProductItem