import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { observe } from 'xmobx/mobx'
import { isFunction } from 'exotic'
import { toCommonState } from 'src/state/common'
import { omit } from '@skava/utils'
import {
  AutoDismissingSnackBarProps,
  AutoDismissingSnackBarState,
} from './typings'
import { KNOWN_PROPS, ON_AUTO_DISMISS_DEFAULT } from './deps'
import { defaultRenderSnackBar } from './renderProps'

@observer
class AutoDismissingSnackBar extends React.Component<
  AutoDismissingSnackBarProps,
  AutoDismissingSnackBarState
  > {
  static defaultProps = {
    isVisible: true,
    onAutoDismiss: ON_AUTO_DISMISS_DEFAULT,
    autoDismissingDuration: 3000,
    animationDuration: 300,
    renderSnackBar: defaultRenderSnackBar,
  }

  // delayedCloseTimer: NodeJS.Timer | number | WindowTimers
  delayedCloseTimer: number
  postCloseAnimationTimer: number
  disposer: () => void
  observableState = toCommonState(this.props)

  onAfterClose = () => {
    console.info('[AutoDismissingSnackBar] onAfterClose')

    const { onAutoDismiss, animationDuration } = this.props
    this.observableState.hide()

    // run onRequestClose, delayed by animation timing
    this.postCloseAnimationTimer = window.setTimeout(
      onAutoDismiss,
      animationDuration
    )
  }

  handleClose = () => {
    const { autoDismissingDuration } = this.props
    if (this.observableState.isVisible === false) {
      console.warn(
        '[AutoDismissingSnackBar] handle close called, but it is not visible'
      )
      return
    }

    // clear any old timers
    if (this.delayedCloseTimer !== undefined) {
      window.clearTimeout(this.delayedCloseTimer)
    }

    this.delayedCloseTimer = window.setTimeout(
      this.onAfterClose,
      autoDismissingDuration
    )
  }

  // when it changes, then start a timeout
  componentDidMount() {
    console.info('[AutoDismissingSnackBar] observing')
    this.disposer = observe(this.observableState, 'isVisible', this.handleClose)
  }
  componentWillUnmount() {
    if (isFunction(this.disposer)) {
      this.disposer()
    }
  }

  render() {
    console.debug('[AutoDismissingSnackBar] render')
    // could put in deps as toAutoDismissingSnackBarRemainingProps
    const remainingProps = omit(this.props, KNOWN_PROPS)
    return this.props.renderSnackBar(remainingProps, this.observableState)
  }
}

export { AutoDismissingSnackBar }
export default AutoDismissingSnackBar