import * as anime from "animejs";
import * as React from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";

export enum RevealType {
  SlideRightToLeft = "slide-right-to-left",
}

export interface IRevealProps {
  type: RevealType;
  id: string;
  mount: boolean;
  immediate?: Partial<{ reveal: boolean, hide: boolean }>;
  className?: string;
}

interface IRevealState {
  mount: boolean;
}

const defaultRevealState: IRevealState = {
  mount: false,
};

export class Reveal extends React.PureComponent<IRevealProps, IRevealState> {
  public state: IRevealState = defaultRevealState;o
  public ref: React.RefObject<any>;

  constructor(props) {
    super(props);

    this.ref = React.createRef();
  }

  public componentDidMount() {
    if (this.props.mount) {
      setTimeout(() => {
        this.setState({
          mount: true,
        });
      }, 200);
    }
  }

  public componentDidUpdate(prevProps: IRevealProps, prevState: IRevealState) {
    if (this.props.mount !== prevProps.mount) {
      requestAnimationFrame(() => {
        this.setState({
          mount: this.props.mount,
        });
      });
    }

    if (this.state.mount !== prevState.mount) {
      requestAnimationFrame(() => {
        if (this.state.mount) {
          this.reveal();
        } else {
          this.hide();
        }
      });
    }
  }

  public render() {
    return (
      <TransitionGroup id={this.props.id} className={`reveal ${this.state.mount && "reveal--is-mounted"} ${this.props.className}`} ref={this.ref}>
        {React.Children.map(this.props.mount ? this.props.children : [], (child: any, index) => (
          <CSSTransition
            key={index}
            timeout={500}
            classNames="reveal-child"
            appear={this.props.mount}
            unmountOnExit={true}
          >
            <div className={`reveal-child reveal-child__${child && child.props && (child.props.className || child.props.id)}-container`}>
              {child}
            </div>
          </CSSTransition>
        ))}
      </TransitionGroup>
    );
  }

  private reveal = () => {
    anime.remove(`#${this.props.id} .reveal-child`);
    anime({
      targets: `#${this.props.id} .reveal-child`,
      translateX: ["100%", "0%"],
      opacity: 1,
      delay: (el, i, l) => i * 100,
      duration: this.props.immediate && this.props.immediate.reveal ? 0 : 500,
      elasticity: 250,
    });
  }

  private hide = () => {
    anime.remove(`#${this.props.id} .reveal-child`);
    anime({
      targets: `#${this.props.id} .reveal-child`,
      translateX: ["0%", "-100%"],
      opacity: 0,
      delay: (el, i, l) => (l - 1 - i) * 100,
      duration: this.props.immediate && this.props.immediate.hide ? 0 : 500,
      elasticity: 0,
    });
  }
}