import {
  ApplicationRef,
  Component,
  ElementRef,
  EventEmitter,
  Input,
  OnChanges,
  OnInit,
  Output,
  OnDestroy,
  ViewChild, ChangeDetectorRef
} from '@angular/core';
import {NzMessageDataFilled, NzMessageService} from 'ng-zorro-antd';


@Component({
  // providers:[UploadImageWithPreviewComponent ],
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit, OnChanges, OnDestroy {
  // @Input()
  item;
  @ViewChild('videoContainer')
  videoContainer: ElementRef;
  @ViewChild('videoNode')
  videoNode: ElementRef;
  @Output()
  update = new EventEmitter();

  intervalId;

  picArr;


  KEY = 'dfzx_10';



  constructor(private nzMessageService: NzMessageService,
              private appRef: ApplicationRef,
              public changeDetectorRef: ChangeDetectorRef) {


  }


  ngOnChanges() {
    console.log(1, 'ngOnChanges');
    // if (typeof this.item.contentObj.video_url !== 'string') {
    //   // this.item.contentObj.video_url = '';
    //   setTimeout(() => {
    //   this.item.contentObj.video_url = '';
    //   });
    // }
  }
  ngOnInit() {
    console.log(2, 'ngOnInit');
    // if (typeof this.item.contentObj.video_url !== 'string') {
    //   // this.item.contentObj.video_url = '';
    //   setTimeout(() => {
    //     this.item.contentObj.video_url = '';
    //   });
    // }


    const getData = (<any> window).courseware.getData;
    getData((data) => {

      if (data) {
        this.item = data;
      } else {
        this.item = {};
        this.item.contentObj = {};
      }


      this.initDefaultData();

      console.log('data:', data);

      this.init();

      this.changeDetectorRef.markForCheck();
      this.changeDetectorRef.detectChanges();

      this.refresh();

    }, this.KEY);



  }


  initDefaultData() {

    const picArr = this.item.contentObj.picArr;
    if (!picArr) {

      const picArr = [];
      for (let i = 0; i < 4; i ++) {
        picArr.push({
          pic_url: '',
          audio_url: ''
        });
      }

      this.item.contentObj.picArr = picArr;
    }
  }



  ngOnDestroy() {
    console.log('in ngOnDestory');
  }

  init() {

    this.picArr = this.item.contentObj.picArr || [];

    this.item.contentObj.picArr = this.picArr;

  }






  onImageUploadSuccessByItem(e, item, id = null) {

    if (id != null) {
      item[id + '_pic_url'] = e.url;
    } else {
      item.pic_url = e.url;
    }

    this.save();
    // this.update.emit(this.item);

    // console.log('this.item: ', this.item);
  }




  onAudioUploadSuccessByItem(e, item, id = null) {

    if (id != null) {
      item[id + '_audio_url'] = e.url;
    } else {
      item.audio_url = e.url;
    }
    // this.update.emit(this.item);
    this.save();
  }



  save() {
    (<any> window).courseware.setData(this.item, null, this.KEY);
    this.refresh();
  }

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

