import React from 'react'
import { isFunction } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { toCommonState } from 'src/state/common'
import { CommonState } from 'src/state/typings'

export const ModalReactContext = React.createContext({})

export interface ModalContextConsumerProps extends React.ConsumerProps<any> {
  //
}
@observer
export class Consumer extends React.Component<ModalContextConsumerProps> {
  render() {
    console.debug('[modal] render: consumer')
    return <ModalReactContext.Consumer {...this.props} />
  }
}

export interface ModalContextProviderProps extends React.ProviderProps<any> {
  state?: CommonState
  onClose?: () => void
}

@observer
export class Provider extends React.Component<
  Partial<ModalContextProviderProps>
  > {
  state = toCommonState(this.props)

  handleClose = () => {
    this.state.handleHide()
    if (isFunction(this.props.onClose)) {
      this.props.onClose()
    }
  }

  render() {
    const state = this.state
    const {
      // state = toCommonState(this.props),
      children,
      ...remainingProps
    } = this.props

    // this is what gets sent over context
    // sending state, and any other remaining props if needed
    const value = { ...remainingProps, state, onClose: this.handleClose }

    console.debug('[modal] render: provider')

    return <ModalReactContext.Provider value={value} children={children} />
  }
}

/**
 * because the consumer is used internally
 * and if using consumer in client, can import Provider & Consumer as named
 */
export { Provider as ModalContext }
export { Consumer as ModalConsumer }