import { Component, ElementRef, ViewChild, ApplicationRef,ChangeDetectorRef, OnInit, Input, OnDestroy, HostListener, OnChanges, AfterViewInit } from '@angular/core';
import * as _ from 'lodash';
import { animate, state, style, transition, trigger } from '@angular/animations';




@Component({
  selector: 'app-play',
  templateUrl: './play.component.html',
  styleUrls: ['./play.component.scss'],
})
export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {

  // 数据
  data;
  saveKey = 'ww_vocabulary';

  show = 'hidden';

  vocabulary_audio = new Audio();
  definition_audio = new Audio();
  vocabularyPlaying = false;
  definitionPlaying = false;

  constructor(private appRef: ApplicationRef,
    public changeDetectorRef: ChangeDetectorRef) {
    this.vocabulary_audio.onplay = () => {
      this.vocabularyPlaying = true;
    };
    this.vocabulary_audio.onpause = () => {
      this.vocabularyPlaying = false;
    };
    this.vocabulary_audio.onended = () => {
      this.vocabularyPlaying = false;
    };
    this.definition_audio.onplay = () => {
      this.definitionPlaying = true;
    };
    this.definition_audio.onpause = () => {
      this.definitionPlaying = false;
    };
    this.definition_audio.onended = () => {
      this.definitionPlaying = false;
    };
  }

  ngOnInit() {
    this.data = {
      contentObj: {
        vocabulary: "aaaaaa",
        vocabularyType: "bbbbbbb",
        definition: "ccccccc",
        definition_audio: "assets/right.mp3",
        pic_id: "assets/vocabulary/9.png",
        vocabulary_audio: "assets/wrong.mp3"
      }
    };

    // 获取数据
    const getData = ( window as any).courseware.getData;
    getData((data) => {
      if (data && typeof data === 'object') {
        this.data = data;
      }
      this.init();
      window["air"].hideAirClassLoading(this.saveKey, this.data);
      this.refresh();
    }, this.saveKey);

  }

  init(){
    this.show = 'hidden';
    this.vocabularyPlaying = false;
    this.definitionPlaying = false;
    this.vocabulary_audio.pause();
    this.definition_audio.pause();
    this.vocabulary_audio.currentTime = 0;
    this.definition_audio.currentTime = 0;

    if (this.data.contentObj && this.data.contentObj.vocabulary_audio) {
      this.vocabulary_audio.src = this.data.contentObj.vocabulary_audio;
      this.vocabulary_audio.load();
    }
    if (this.data.contentObj && this.data.contentObj.definition_audio) {
      this.definition_audio.src = this.data.contentObj.definition_audio;
      this.definition_audio.load();
    }
  }

  ngOnDestroy() {
    this.vocabulary_audio.pause();
    this.definition_audio.pause();
    this.vocabulary_audio = null;
    this.definition_audio = null;
  }

  ngOnChanges(data) {

  }

  ngAfterViewInit() {
  }

  showSentence() {
    this.show = this.show === 'hidden' ? 'visible' : 'hidden';
  }

  playVocabularyAudio() {
    if (this.data.contentObj && this.data.contentObj.vocabulary_audio) {
      if (!this.vocabularyPlaying && this.vocabulary_audio.src) {
        this.vocabulary_audio.play();
        this.definition_audio.pause();
      } else {
        this.vocabulary_audio.pause();
      }
    }
  }

  playDefinitionAudio() {
    if (this.data.contentObj && this.data.contentObj.definition_audio) {
      if (!this.definitionPlaying && this.definition_audio.src) {
        this.definition_audio.play();
        this.vocabulary_audio.pause();
      } else {
        this.definition_audio.pause();
      }
    }
  }

  refresh() {
    setTimeout(() => {
      this.appRef.tick();
    }, 1);
  }


}
