import { Injectable } from '@angular/core';
import { OhayoConfigService, OhayoMediaConfig, LazyService } from '@ohayo/util';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MediaService {
  private _cog: OhayoMediaConfig;
  private loading = false;
  private loaded = false;
  private notify$ = new Subject<void>();

  get cog(): OhayoMediaConfig {
    return this._cog;
  }
  set cog(val: OhayoMediaConfig) {
    this._cog = this.cogSrv.merge(
      'media',
      {
        urls: ['https://cdn.bootcdn.net/ajax/libs/plyr/3.5.10/plyr.min.js', 'https://cdn.bootcdn.net/ajax/libs/plyr/3.5.10/plyr.css'],
      },
      val,
    )!;
  }

  constructor(private cogSrv: OhayoConfigService, private lazySrv: LazyService) { }

  load(): this {
    if (this.loading) {
      if (this.loaded) {
        this.notify$.next();
      }
      return this;
    }
    this.loading = true;
    this.lazySrv.load(this.cog.urls!).then(() => {
      this.loaded = true;
      this.notify$.next();
    });
    return this;
  }

  notify(): Observable<void> {
    return this.notify$.asObservable();
  }
}