import React from 'react'
import { isFunction } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import {
  defaultRenderModal,
  defaultRenderBox,
  defaultRenderWrapper,
} from './renderProps'
import { PromotionModalProps } from './typings'
import { PromotionState } from '../state'

function toPromotionState(props: PromotionModalProps) {
  if (props.state !== undefined) {
    return props.state
  } else {
    return new PromotionState()
  }
}
@observer
class PromotionModal extends React.Component<PromotionModalProps> {
  static defaultProps = {
    className: '',
    index: -1,
    // renderProps
    renderModal: defaultRenderModal,
    renderBox: defaultRenderBox,
    renderWrapper: defaultRenderWrapper,
  }

  state = toPromotionState(this.props)

  render() {
    const { renderBox, renderWrapper, ...remainingProps } = this.props

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

export { PromotionModal }
export default PromotionModal