import * as React from 'react'
import { Transition } from 'react-transition-group'

const defaultDuration = 200

type Props = {
  in: boolean
  keyProp: string
  duration?: number // ms
  style?: any
  transitionStyle?: any
}
type State = {}

class FadeIn extends React.Component<Props, State> {
  static defaultProps = {}

  state: State = {}

  constructor(props: Props) {
    super(props)
  }

  render() {
    const defaultStyle = {
      transition: `opacity ${this.props.duration || defaultDuration}ms ease-in-out`,
      opacity: 0,
    }

    const transitionStyle = {
      entering: { opacity: 1 },
      entered: { opacity: 1 },
    }

    return (
      <Transition
        key={this.props.keyProp}
        in={this.props.in}
        timeout={this.props.duration || defaultDuration}
        appear
      >
        {status => (
          <div
            style={{
              ...defaultStyle,
              ...this.props.style,
              ...transitionStyle[status],
              ...this.props.transitionStyle[status],
            }}
          >
            {this.props.children}
          </div>
        )}
      </Transition>
    )
  }
}

export default FadeIn