import { Component, AfterViewInit, ElementRef, Input, HostListener, Output, EventEmitter } from '@angular/core';
import { ScriptLoaderService } from "../../library/script-loader.service";
import { RdComponent } from '../../base/rdComponent';

declare const bodymovin;

/** Functions
 *  play(), pause(), stop(), setSpeed()
*/

@Component({
  selector: 'rd-lottie-icon',
  template: `
    <div [attr.id]="id" style="margin:1px;cursor:pointer;display:inline-block" [ngStyle]="{'width':width,'height':height}" (click)="clickEvent.emit()"></div>
  `
})
export class LottieIcon extends RdComponent implements AfterViewInit {
  constructor(script: ScriptLoaderService, private element: ElementRef) {
    super();
    script.load(["./assets/js/bodymovin.min.js"]);
    this.id = "lottie" + Math.random() * 100;
  }

  @Input("rd-width") width: number | string = "2rem";
  @Input("rd-height") height: number | string = "2rem";
  @Input("rd-path") path: string; // ./assets/common/lottie-download.json
  @Input("rd-data") data: any; // path or data optional
  @Input("rd-color") color: string;
  @Input("rd-hover-active") hoverActive: boolean = false;
  @Output("rd-click") clickEvent: EventEmitter<any> = new EventEmitter<any>();

  @HostListener('mouseover') onMouseOver() {
    if (this.hoverActive) {
      this.mouseHover = true;
      this.instance.play();
      this.setColor();
    }
  }

  @HostListener('mouseout') onMouseOut() {
    if (this.hoverActive) {
      this.mouseHover = false;
      this.instance.stop();
      this.setColor();
    }
  }

  id: string;
  instance;
  mouseHover: boolean = false;

  ngAfterViewInit() {
    this.instance = bodymovin.loadAnimation({
      name: this.id,
      container: this.element.nativeElement.firstElementChild,
      path: this.path ? this.path : "",
      renderer: 'svg',
      loop: true,
      autoplay: !this.hoverActive,
      animationData: this.data ? JSON.parse(this.data) : null
    });
    if (!this.hoverActive) this.setColor();
  }

  setColor() {
    let timeout = this.hoverActive ? 0 : 1000;
    setTimeout(() => {
      let paths: any = document.getElementById(this.id).getElementsByTagName("path");
      for (let path of paths) path.style.stroke = this.hoverActive ? (this.mouseHover ? this.color : "black") : this.color;
    }, timeout);
  }
}