import React from 'react'
import { NO_OP } from 'exotic'
import { TransitionGroup } from 'react-transition-group'
import { overlayContainer, OverlayContainer } from './container'
import { IS_BROWSER } from './deps'
import { OverlayProps } from './typings'
import { renderTint as defaultRenderTint } from './renderProps'

class Overlay extends React.PureComponent<OverlayProps> {
  static defaultProps = {
    onClick: NO_OP,
    isVisible: false,
    renderTint: defaultRenderTint,
  }

  componentDidMount() {
    if (IS_BROWSER) {
      window.addEventListener('keydown', this.handleKeyDown)
    }
  }
  componentWillUnmount() {
    if (IS_BROWSER) {
      window.removeEventListener('keydown', this.handleKeyDown)
    }
  }

  handleKeyDown = (event: KeyboardEvent) => {
    if (event.key === 'Esc' || event.key === 'Escape') {
      this.handleEvent(event)
    }
  }

  // @todo for perf remove this?
  handleEvent = (event: KeyboardEvent) => {
    console.debug('[Overlay] onEvent - click or esc')

    if (this.props.onClick) {
      this.props.onClick(event)
    }
  }

  render() {
    const { isVisible, onClick, renderTint, ...remainingProps } = this.props
    const attributes = {
      ...remainingProps,
      isVisible,
      onClick: this.handleEvent,
    }

    return renderTint(attributes)
    // return <Transition {...attributes} />
  }
}

export { Overlay }
export default Overlay