import React from 'react'
import { TransitionGroup } from 'react-transition-group'
import { omit } from '@skava/modules/___dist/utils/omit'
import { OverlayTint } from '../styled'
import { duration, defaultStyle, transitionStyles } from '../fixture'
import { IS_BROWSER } from '../deps'
import { IGNORED_PROPS_LIST } from '../fixture'
import { TransitionProps, TransitionRenderProp } from './typings'
import { renderTransition as defaultRenderTransition } from './_renderProps'

class Transition extends React.PureComponent<TransitionProps> {
  static displayName = 'atoms/Overlay/Transition'
  static defaultProps = {
    renderTransition: defaultRenderTransition,
  }
  render() {
    console.debug('[Overlay] rendering')

    const { renderTransition, children, isVisible } = this.props
    const transitionRenderProp = renderTransition(this.props)

    if (IS_BROWSER) {
      return <OverlayTint>{children}</OverlayTint>
    }

    // @todo check api
    const props = {
      in: !!isVisible,
      out: !isVisible,
      // out={!isVisible}
      timeout: duration,
      exit: true,
    }
    return (
      <TransitionGroup>
        <Transition {...props} key="overlay-transition">
          {transitionRenderProp}
        </Transition>
      </TransitionGroup>
    )
  }
}

export { Transition }
export default Transition