import { ApplicationRef, ChangeDetectorRef, Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener, OnChanges, AfterViewInit } from '@angular/core';
import * as _ from 'lodash';
import {
  Label,
  MySprite, tweenChange,

} from './Unit';
import {res, resAudio} from './resources';

import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';

import TWEEN from '@tweenjs/tween.js';
import { animate, state, style, transition, trigger } from '@angular/animations';




@Component({
  selector: 'app-play',
  templateUrl: './play.component.html',
  styleUrls: ['./play.component.scss'],
  animations: [
    trigger('show-question', [
      state('in', style({opacity: '0', top: '60vh', right: '3rem'})),
      transition(':enter', [
        style({opacity: '0', top: '40vh', right: '3rem'}),
        animate('0.5s ease-in-out', style({opacity: '1', top: '25vh', right: '25vh'}))
      ]),
      transition(':leave', [
        style({opacity: '1', top: '25vh', right: '25vh'}),
        animate('0.5s ease-in-out', style({opacity: '0', top: '40vh', right: '3rem'}))
      ]),
    ])
  ],
})
export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {

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


  isPlaying = false;
  audio = new Audio();
  fntSizeRect: any;
  @ViewChild('pic')
  domPic: ElementRef;
  @ViewChild('text')
  domText: ElementRef;

  @Input() sid;
  showQuestion: boolean;
  constructor(private appRef: ApplicationRef,
              private changeDetectorRef: ChangeDetectorRef) {

  }
  ngOnInit() {
    this.data = {
      contentObj: {
        text: 'aaaaaaa',
        question: 'sdfsdfsdf',
        pic_id: null,
        audio_id: null
      }
    };

    // 获取数据
    const getData = ( window as any).courseware.getData;
    getData((data) => {
      if (data && typeof data === 'object') {
        console.log(3333, data);
        this.data = data;

      }
      console.log(4444, data);
      this.audio.pause();
      this.audio.currentTime = 0;
      this.isPlaying = false;
      if (this.data.contentObj && this.data.contentObj.audio_id ) {
        this.audio.src = this.data.contentObj.audio_id;
        this.audio.load();
      }
      this.showQuestion = false;
      this.changeDetectorRef.markForCheck();
      this.changeDetectorRef.detectChanges();
      this.refresh();
      if(window["air"]) {
        window["air"].hideAirClassLoading(this.saveKey, this.data);
      }

    }, this.saveKey);

    this.audio.onended = () => {
      this.isPlaying = false;
    };
  }

  ngOnDestroy() {
    this.audio.pause();
    this.audio = null;
  }

  ngOnChanges(data) {

  }

  ngAfterViewInit() {
    this.calcPicHeight();
  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.calcPicHeight();
  }

  calcPicHeight() {
    // Ken 2018-08-23 17:46 宁波Amy: 固定字号大小
    const textHeight = this.domText.nativeElement.clientHeight;
    const delta = _.isEmpty(this.data.contentObj.text) ? 0 : 40;
    this.domPic.nativeElement.style.height = `calc(100% - ${textHeight + delta}px)`;
  }


  playAudio(ev) {
    ev.preventDefault();
    if (this.data.contentObj && this.data.contentObj.audio_id) {
      if (this.isPlaying) {
        this.audio.pause();
        this.isPlaying = false;
      } else {
        this.audio.play();
        this.isPlaying = true;
      }
    }
  }

  toggleQuestionBox() {
    this.showQuestion = !this.showQuestion;
  }

  /**
   * 刷新 渲染页面
   */
  refresh() {
    setTimeout(() => {
      this.appRef.tick();
    }, 1);
  }


}
