import React from 'react'
import { isArray } from 'exotic'
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 { item } = this.props
    let children = []
    if (item.isBundle === true) {
      const newArray = []
      newArray.push(item)
      const mergedArray = isArray(item.subProducts) && newArray.concat(item.subProducts)
      children = mergedArray.map(item => {
        return defaultRenderBox({ ...this.props, item }, this.observableState)
      })
    } else {
      children = defaultRenderBox(this.props, this.observableState)
    }
    const view = defaultRenderWrapper({ ...this.props, children })
    return view
  }
}

export { ProductItem }
export default ProductItem