import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { observe } from 'xmobx/mobx'
import { toCommonState } from 'src/state/common'
import { omit } from '@skava/modules/___dist/utils/omit'
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
  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')
    observe(this.observableState, 'isVisible', this.handleClose)
  }

  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