import React from 'react'
import { Transition, TransitionGroup } from 'react-transition-group'
import { omit } from 'uxui-modules/utils/omit'
import { OverlayTint } from '../styled'
import { duration, defaultStyle, transitionStyles } from '../fixture'
import { IGNORED_PROPS_LIST } from '../fixture'
import { TransitionProps, TransitionRenderProp, RenderTransition } from './typings'

/**
 * @todo use styled-components react transitions
 */
export function renderTransition(props: TransitionProps): RenderTransition {
  const passthroughProps = omit(props, IGNORED_PROPS_LIST)

  const transitionRenderProp = (state: string) => {
    console.debug('[Overlay] rendering transition')

    const style = {
      ...defaultStyle,
      ...transitionStyles[state],
    }

    return <OverlayTint {...passthroughProps} style={style} key="tint" />
  }

  return transitionRenderProp
}