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

export enum LoadingType {
  /**
   * A simple grey, rounded background with some text.
   */
  Static = "static",
  Spinner = "spinner",
  Aircam = "aircam",
}

export interface ILoadingProps {
  type: LoadingType;
  /**
   * Large, title text placed below any animating element.
   */
  title?: string;
  /**
   * Smaller, explanatory text placed below the title if provided or below the animating element.
   */
  subtitle?: string;
  /**
   * Can show & hide the loader
   */
  mount?: boolean;
}

export class Loading extends React.Component<ILoadingProps, {}> {
  public componentDidMount() {
    if (this.props.type === LoadingType.Aircam) {
      this.startAircamLoadingAnimation();
    }
  }

  public componentDidUpdate(prevProps: ILoadingProps) {
    if (!prevProps.mount && this.props.mount && this.props.type === LoadingType.Aircam) {
      this.startAircamLoadingAnimation();
    }
  }

  public render() {
    const { type, title, subtitle, mount } = this.props;

    return _.isBoolean(mount) && (type === LoadingType.Spinner || type === LoadingType.Aircam) ? (
      <CSSTransition
      in={mount}
      timeout={150}
      classNames="loading"
      unmountOnExit={true}
      >
      {state => (
        <div className={`loading loading--${type}`}>
        <div className={`loading__${type}`}>
        {type === LoadingType.Aircam && (
          <svg width="100" height="100" viewBox="0 0 400 400">
          <g className="aircam" fill="none" fillRule="evenodd" stroke="currentColor" strokeWidth="3">
              <defs>
                <linearGradient id="bottom-to-top" y1="100%" x2="0%" y2="0%">
                  <stop offset="0" stopColor="#1160d6">
                    <animate dur="300ms" begin="1s" attributeName="offset" fill="freeze" from="0" to="1" />
                  </stop>
                  <stop offset="0" stopColor="#fff">
                    <animate dur="300ms" begin="1s" attributeName="offset" fill="freeze" from="0" to="1" />
                  </stop>
                  
                </linearGradient>
              </defs>

              <path id="path0" fill="url(#bottom-to-top)" d="M175.977 52.140 C 167.529 53.705,164.198 55.712,151.953 66.607 C 138.866 78.252,140.132 77.723,124.414 78.141 C 98.765 78.825,87.993 81.565,76.139 90.420 C 61.673 101.227,54.998 115.638,53.519 139.258 C 52.992 147.670,53.003 262.872,53.531 271.680 C 54.766 292.274,59.481 304.446,70.486 315.451 C 83.682 328.647,97.822 332.785,129.784 332.807 L 138.279 332.813 144.707 319.961 L 151.135 307.109 133.282 306.928 C 119.232 306.786,114.676 306.613,111.892 306.118 C 93.798 302.904,82.433 291.182,79.638 272.852 C 78.853 267.703,78.846 144.274,79.630 138.479 C 81.521 124.508,88.454 114.401,100.195 108.497 C 106.893 105.128,111.838 104.336,128.711 103.930 C 147.780 103.470,147.002 103.797,163.805 89.181 C 176.821 77.858,175.946 78.125,200.000 78.125 C 224.054 78.125,223.179 77.858,236.195 89.181 C 252.998 103.797,252.220 103.470,271.289 103.930 C 288.162 104.336,293.107 105.128,299.805 108.497 C 311.546 114.401,318.479 124.508,320.370 138.479 C 321.154 144.274,321.147 267.703,320.362 272.852 C 317.567 291.182,306.202 302.904,288.108 306.118 C 285.324 306.613,280.768 306.786,266.718 306.928 L 248.865 307.109 255.293 319.961 L 261.721 332.813 270.216 332.807 C 306.324 332.783,323.695 326.178,335.896 307.833 C 346.668 291.635,346.866 289.785,346.870 205.273 C 346.873 125.130,346.720 123.157,339.403 108.984 C 328.137 87.161,311.453 79.097,275.586 78.141 C 259.868 77.723,261.134 78.252,248.047 66.607 C 235.652 55.578,231.815 53.331,223.047 51.964 C 219.142 51.356,179.408 51.504,175.977 52.140 M191.992 130.901 C 130.302 137.388,100.552 209.531,139.575 258.013 C 145.503 265.377,161.938 278.516,165.223 278.516 C 165.340 278.516,168.004 273.374,171.142 267.090 L 176.848 255.664 174.046 254.042 C 144.052 236.682,138.639 196.079,163.062 171.656 C 186.389 148.329,225.330 152.136,243.473 179.517 C 260.311 204.930,252.359 238.760,225.954 254.042 L 223.152 255.664 228.858 267.090 C 231.996 273.374,234.660 278.516,234.777 278.516 C 238.062 278.516,254.497 265.377,260.425 258.013 C 304.014 203.859,260.839 123.662,191.992 130.901 M196.289 183.058 C 179.023 185.739,169.223 204.596,177.040 220.097 C 186.555 238.963,213.445 238.963,222.960 220.097 C 232.189 201.796,216.443 179.930,196.289 183.058 " />
            </g>
          </svg>
        )}
        </div>
        {title && (
          <div className="loading__title">
          {title}
          </div>
        )}
        {subtitle && (
          <div className="loading__subtitle">
          {subtitle}
          </div>
        )}
        </div>
      )}
      </CSSTransition> 
    ) : (
    <div className={`loading loading--${type}`} style={{ opacity: 1 }}>
    <div className={`loading__${type}`} />
    {title && (
      <div className="loading__title">
      {title}
      </div>
    )}
    {subtitle && (
      <div className="loading__subtitle">
      {subtitle}
      </div>
    )}
    </div>
    );
  }

  private startAircamLoadingAnimation = () => {
    anime({
      targets: '.loading .aircam path',
      strokeDashoffset: [anime.setDashoffset, 0],
      easing: 'easeInOutSine',
      duration: 1500,
      delay: function(el, i) { return i * 250 },
      direction: 'forwards',
      // loop: true
    });
  }
}