import * as _ from "lodash";
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import * as React from "react";

export enum TransitionType {
  Fade = "fade",
  Expand = "expand",
}

interface ITransitionProps {
  types: TransitionType[];
}

interface ITransitionState {
  mounted: boolean;
}

const defaultTransitionState: ITransitionState = {
  mounted: false,
};

export class Transition extends React.Component<ITransitionProps, ITransitionState> {
  public state: ITransitionState = defaultTransitionState;

  public componentDidMount() {
    this.setState({
      mounted: true,
    });
  }

  public render() {
    return (
      <TransitionGroup className={`transition-group`}>
        {React.Children.map(this.props.children, (child: JSX.Element, index: number) => (
          <CSSTransition
            in={this.state.mounted}
            timeout={300}
            classNames={`transition`}
            unmountOnExit={true}
          >
            {state => React.cloneElement(child, {
              className: `${this.props.types.map((type: TransitionType) => `${type}-child-${state}`).join(" ")}
              ${this.props.types.includes(TransitionType.Fade) && "opacity-0"} ${_.get(child, 'props.className', '')}`,
              style: {
                animationDelay: `${150 * index}ms`,
                ..._.get(child, 'props.style', {}),
              },
            })}
          </CSSTransition>
        ))}
      </TransitionGroup>
    );
  }
}