import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { commonState } from '@skava/ui/dist/state'
import {
  defaultRenderActionButtons,
  defaultRenderShippingMethod,
  defaultRenderShippingAddress,
  defaultRenderStatus,
  defaultRenderProductDetails,
  defaultRenderBox,
  defaultRenderWrapper,
} from './renderProps'
import { ProductItemProps } from './typings'

@observer
class ProductItem extends React.Component<ProductItemProps> {
  static defaultProps = {
    className: '',
    // renderProps
    renderActionButtons: defaultRenderActionButtons,
    renderShippingMethod: defaultRenderShippingMethod,
    renderShippingAddress: defaultRenderShippingAddress,
    renderStatus: defaultRenderStatus,
    renderProductDetails: defaultRenderProductDetails,
  }

  observableState = commonState()

  render() {
    const children = defaultRenderBox(this.props, this.observableState)
    const view = defaultRenderWrapper({ ...this.props, children })
    return view
  }
}

export { ProductItem }
export default ProductItem