import React from 'react'
import { isFunction } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import {
  defaultRenderButton,
  defaultRenderProductOptionList,
  defaultExpandedView,
  defaultRenderBox,
  defaultRenderWrapper,
} from './renderProps'
import { GridViewProps } from './typings'
import { PromotionState } from './state'

@observer
class GridView extends React.Component<GridViewProps> {
  static defaultProps = {
    className: '',
    // renderProps
    renderButton: defaultRenderButton,
    renderProductOptionList: defaultRenderProductOptionList,
    renderExpandedView: defaultExpandedView,
    renderBox: defaultRenderBox,
    renderWrapper: defaultRenderWrapper,
  }

  state = new PromotionState()

  render() {
    const { renderBox, renderWrapper, ...remainingProps } = this.props
    const children =
      isFunction(renderBox) && renderBox(remainingProps, this.state)
    const view =
      isFunction(renderWrapper) &&
      renderWrapper({ children, ...remainingProps })
    return view
  }
}

export { GridView }
export default GridView