import { Injectable } from '@angular/core';
import { RdLib } from "../base/rdLib";

declare const jQuery: any;

export interface ScriptItem {
  src: string;
  loaded: boolean;
}
export interface Scripts {
  [key: string]: ScriptItem
}

@Injectable()
export class ScriptLoaderService {
  private _scripts: Scripts = {};

  load(scripts: Array<string>, loadOnce = true, tag = "body"): Promise<any> {
    let promises: any[] = [];
    scripts.forEach((script) => promises.push(this.loadScript(script, loadOnce, tag)));

    return Promise.all(promises);
  }

  remove(scripts: Array<string>, tag = "body"): Promise<any> {
    scripts.forEach((src: string) => {
      if (!this._scripts[src]) {
        RdLib.screenOperations.toastr.warning("Script src=" + src + " is not loaded");
      }
      else {
        jQuery(tag).find("script").filter((_, item) => {
          return item.outerHTML == '<script type="text/javascript" src="' + src + '"></script>'
        }).remove();

        this._scripts[src] = { src: src, loaded: false };
      }
    });
    return new Promise((resolve) => resolve(true));
  }

  private loadScript(src: string, loadOnce: boolean, tag: string): Promise<any> {
    if (!this._scripts[src]) {
      this._scripts[src] = { src: src, loaded: false };
    }

    return new Promise((resolve, reject) => {
      // resolve if already loaded
      if (this._scripts[src].loaded && loadOnce) {
        resolve({ src: src, loaded: true });
      }
      else {
        // load script tag
        let scriptTag = jQuery('<script/>').
          attr('type', 'text/javascript').
          attr('src', this._scripts[src].src);

        jQuery(tag).append(scriptTag);

        this._scripts[src] = { src: src, loaded: true };
        resolve({ src: src, loaded: true });
      }
    });
  }
}