import React from 'react'
import { Transition } from 'react-transition-group'
import { pushStyles, classNamesAnimation } from './fixture'
import { PushProps } from './typings'

class Push extends React.PureComponent<PushProps> {
  static defaultProps = {
    isVisible: false,
    children: '',
    side: 'right',
    duration: 300,
  }
  render() {
    const {
      isVisible,
      children,
      side,
      renderWrap,
      duration,
      ...passThroughProps
    } = this.props

    // @todo @ssr @michael dom here may be diff
    if (typeof window !== 'object') {
      return renderWrap({ ...passThroughProps, children })
    }

    const transitionRenderProp = state => {
      // @todo  - push  styles
      const style = {
        // ...defaultStyle,
        // ...pushStyles[state],
      }

      return renderWrap({ ...passThroughProps, style, children })
    }

    return (
      <Transition
        // appear
        // mount/unmount
        in={isVisible}
        out={!isVisible}
        timeout={duration}
        classNames={classNamesAnimation}
      >
        {transitionRenderProp}
      </Transition>
    )
  }
}

export { Push }
export default Push