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

interface ILinearProgressProps {
  mount: boolean;
}

interface ILinearProgressState {
  mount: boolean;
}

const defaultLinearProgressState: ILinearProgressState = {
  mount: false,
}

const UPDATE_MOUNT_THRESHOLD = 500;

export class LinearProgress extends React.Component<ILinearProgressProps, ILinearProgressState> {
  public state: ILinearProgressState = defaultLinearProgressState;
  private timer: any;

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

  public shouldComponentUpdate(nextProps: ILinearProgressProps, nextState: ILinearProgressState) {
    if (this.props.mount !== nextProps.mount) {
      this.handleChangeMountProps(nextProps.mount);
      return false;
    }

    if (this.state.mount !== nextState.mount) return true;

    return false;
  }

  public render() {
    return (
      <CSSTransition
        in={this.state.mount}
        timeout={300}
        classNames="linear-progress"
        appear={true}
        mountOnEnter={true}
        unmountOnExit={true}
      >
        <div className="linear-progress" role="progressbar">
          <div className="linear-progress__bar linear-progress__bar--1" />
          <div className="linear-progress__bar linear-progress__bar--2" /> 
        </div>
      </CSSTransition>
    );
  }

  private handleChangeMountProps(mount: boolean) {
    if (!_.isNil(this.timer)) {
      clearTimeout(this.timer);
      this.timer = null;
    }

    if (mount) {
      requestAnimationFrame(() => {
        this.setState({
          mount,
        });
      });
    } else {
      this.timer = setTimeout(() => {
        requestAnimationFrame(() => {
          this.setState({
            mount,
          }, () => {
            this.timer = null
          });
        });
      }, UPDATE_MOUNT_THRESHOLD);
    }
  }
}