import { Injectable } from '@angular/core';
import { Audio } from './audio.model';
import { PlayData } from './play-data.model';

/**
 * 音頻服務(wù)，只關(guān)心播放列表控制與進(jìn)度控制
 * 不提供組件支持，只提供列表控制方法接口及進(jìn)度控制接口
 */
@Injectable()
export class AudioService {
 // 主音頻標(biāo)簽
 private _audio: HTMLAudioElement;
 // 當(dāng)前列表中的音頻
 private playList: Audio[];
 // 當(dāng)前播放的數(shù)據(jù)
 private playData: PlayData;
 private listenInterval;
 /**
  * 創(chuàng)建新的音頻標(biāo)簽
  */
 constructor() {
  this._audio = document.createElement('audio');
  this._audio.autoplay = false;
  this._audio.onplay = () => {
   let that = this;
   this.listenInterval = window.setInterval(() => {
    that.playData.Current = that._audio.currentTime;
    that.playData.Url = that._audio.src;
    that.playData.During = that._audio.duration;
    that.playData.Data = that._audio.buffered &&
     that._audio.buffered.length ?
     (that._audio.buffered.end(0) || 0) :
     0;
   }, 1000);
   this.playData.IsPlaying = true;
  };
  this._audio.onended = () => {
   window.clearInterval(this.listenInterval);
   this.FillPlayData();
   this.playData.IsPlaying = false;
  };
  this._audio.onabort = () => {
   window.clearInterval(this.listenInterval);
   this.playData.Current = this._audio.currentTime;
   this.playData.Url = this._audio.src;
   this.playData.During = this._audio.duration;
   this.playData.Data = this._audio.buffered &&
    this._audio.buffered.length ?
    (this._audio.buffered.end(0) || 0) :
    0;
   this.playData.IsPlaying = false;
  };
  this._audio.onpause = () => {
   window.clearInterval(this.listenInterval);
   this.playData.Current = this._audio.currentTime;
   this.playData.Url = this._audio.src;
   this.playData.During = this._audio.duration;
   this.playData.Data = this._audio.buffered &&
    this._audio.buffered.length ?
    (this._audio.buffered.end(0) || 0) :
    0;
   this.playData.IsPlaying = false;
  };
  this.playData = { Style: 0, Index: 0 };
  this.playList = [];
 }

 /**
  * 1.列表中無此音頻則添加并播放
  * 2.列表中存在此音頻但未播放則播放
  * 3.列表中存在此音頻且在播放則暫停
  * @param audio
  */
 public Toggle(audio?: Audio): void {
  let tryGet = audio ?
   this.playList.findIndex((p) => p.Url === audio.Url) :
   this.playData.Index;
  if (tryGet < 0) {
   this.playList.push(audio);
   this.PlayIndex(this.playList.length);
  } else {
   if (tryGet === this.playData.Index) {
    if (this._audio.paused) {
     this._audio.play();
     this.playData.IsPlaying = true;
    } else {
     this._audio.pause();
     this.playData.IsPlaying = false;
    }
   } else {
    this.PlayIndex(tryGet);
   }
  }
 }

 /**
  * 若列表中無此音頻則添加到列表的最后
  * 若列表中無音頻則添加后并播放
  * @param audio
  */
 public Add(audio: Audio): void {
  this.playList.push(audio);
  if (this.playList.length === 1) {
   this.PlayIndex(0);
  }
 }

 /**
  * 移除列表中指定索引的音頻
  * 若移除的就是正在播放的音頻則自動播放新的同索引音頻，不存在此索引則遞減
  * 若只剩這一條音頻了則停止播放并移除
  * @param index
  */
 public Remove(index: number): void {
  this.playList.splice(index, 1);
  if (!this.playList.length) {
   this._audio.src = '';
  } else {
   this.PlayIndex(index);
  }
 }

 /**
  * 下一曲
  */
 public Next(): void {
  switch (this.playData.Style) {
   case 0:
    if (this.playData.Index < this.playList.length) {
     this.playData.Index++;
     this.PlayIndex(this.playData.Index);
    }
    break;
   case 1:
    this.playData.Index = (this.playData.Index + 1) % this.playList.length;
    this.PlayIndex(this.playData.Index);
    break;
   case 2:
    this.playData.Index = (this.playData.Index + 1) % this.playList.length;
    this.PlayIndex(this.playData.Index);
    console.log('暫不考慮隨機(jī)播放將視為列表循環(huán)播放');
    break;
   case 3:
    this._audio.currentTime = 0;
    break;
   default:
    if (this.playData.Index < this.playList.length) {
     this.playData.Index++;
     this.PlayIndex(this.playData.Index);
    }
    break;
  }
 }

 /**
  * 上一曲
  */
 public Prev(): void {
  switch (this.playData.Style) {
   case 0:
    if (this.playData.Index > 0) {
     this.playData.Index--;
     this.PlayIndex(this.playData.Index);
    }
    break;
   case 1:
    this.playData.Index = (this.playData.Index - 1) < 0 ?
     (this.playList.length - 1) :
     (this.playData.Index - 1);
    this.PlayIndex(this.playData.Index);
    break;
   case 2:
    this.playData.Index = (this.playData.Index - 1) < 0 ?
     (this.playList.length - 1) :
     (this.playData.Index - 1);
    this.PlayIndex(this.playData.Index);
    console.log('暫不考慮隨機(jī)播放將視為列表循環(huán)播放');
    break;
   case 3:
    this._audio.currentTime = 0;
    break;
   default:
    if (this.playData.Index > 0) {
     this.playData.Index--;
     this.PlayIndex(this.playData.Index);
    }
    break;
  }
 }

 /**
  * 將當(dāng)前音頻跳轉(zhuǎn)到指定百分比進(jìn)度處
  * @param percent
  */
 public Skip(percent: number): void {
  this._audio.currentTime = this._audio.duration * percent;
  this.playData.Current = this._audio.currentTime;
 }

 public PlayList(): Audio[] {
  return this.playList;
 }

 public PlayData(): PlayData {
  return this.playData;
 }

 /**
  * 用于播放最后強(qiáng)行填滿進(jìn)度條
  * 防止播放進(jìn)度偏差導(dǎo)致的用戶體驗
  */
 private FillPlayData(): void {
  this.playData.Current = this._audio.duration;
  this.playData.Data = this._audio.duration;
 }

 /**
  * 嘗試播放指定索引的音頻
  * 索引不存在則嘗試遞增播放，又失敗則遞減播放，又失敗則失敗
  * @param index
  */
 private PlayIndex(index: number): void {
  index = this.playList[index] ? index :
   this.playList[index + 1] ? (index + 1) :
    this.playList[index - 1] ? (index - 1) : -1;
  if (index !== -1) {
   this._audio.src = this.playList[index].Url;
   if (this._audio.paused) {
    this._audio.play();
    this.playData.IsPlaying = true;
   }
   this.playData.Index = index;
  } else {
   console.log('nothing to be play');
  }
 }
}

@NgModule({
 imports: [ CommonModule, SharedModule ],
 declarations: [ AudioStudioComponent ],
 exports: [ AudioStudioComponent ],
 providers: [ AudioService ]
})

constructor(public audio: AudioService) { }

audio.Add({Url: '/assets/audio/唐人街.mp3', Title: '唐人街-林宥嘉',
  Cover: '/assets/img/2219A91D.jpg'});
  audio.Add({Url: '/assets/audio/自然醒.mp3', Title: '自然醒-林宥嘉',
  Cover: '/assets/img/336076CD.jpg'});

public Skip(e) {
  this.audio.Skip(e.layerX /
  document.getElementById('audio-total').getBoundingClientRect().width);
 }