import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';



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


  picArr = [];
  // wordArr = [];

  // 储存数据用
  saveKey = 'test_0011';
  // 储存对象
  _item: any;
  KEY = 'test_0011';
  wordArr = [];




  // @Input()
  set item(item) {
    this._item = item;
    // this.init();

  }
  get item() {
    return this._item;
  }

  @Output()
  update = new EventEmitter();



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

  }


  ngOnInit() {

    this.item = {};
    this.item.contentObj = {};

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

      if (data) {
        this.item = data;
        // this.item.contentObj.picArr.forEach(ele => {
        //   ele.wordArr = [];

        //   console.log('item', ele);

        // });
      } else {
        this.item = {};
      }

      if ( !this.item.contentObj ) {
        this.item.contentObj = {};
      }

      // console.log('~data:', data);
      this.init();

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

      this.refresh();

    }, this.KEY);

    // this.initData();
  }
  ngOnChanges() {

  }

  ngOnDestroy() {
  }


  init() {

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

    // if (this.item.contentObj.picArr.wordArr) {
    //   this.wordArr = this.item.contentObj.picArr.wordArr;
    // } else {
    //   this.wordArr = this.getDefaultPicArr();
    //   this.item.contentObj.picArr.wordArr = this.wordArr;
    // }

    console.log('item:' , this.item);
    // console.log('This', this.item.contentObj.picArr);

    // this.picArr = this.getDefaultPicArr();
    // this.item.contentObj.picArr = this.picArr;
    // console.log('this.item:;', this.picArr);

  }

  getDefaultPicArr() {
    const arr = [];
    // for (let i = 0; i < 4; i ++) {
    //   const data = {};
    //   data['pic_url'] = '';
    //
    //   const soundArr = [];
    //   for (let i = 0; i < 3; i++) {
    //     const tmpData = {};
    //     tmpData['answer'] = false;
    //     tmpData['audio_url'] = '';
    //     soundArr.push(tmpData);
    //   }
    //   data['soundArr'] = soundArr;
    //
    //   arr.push(data);
    // }

    return arr;
  }



  initData() {


  }


  deleteItem(data) {
    const index = this.picArr.indexOf(data);
    console.log(this.picArr);
    console.log(index);
    if (index !== -1) {
      this.picArr.splice(index, 1);
    }

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

  deleteItemWord(picdata,wordData) {
    const pindex = this.picArr.indexOf(picdata);
    // console.log('data',picdata,index);
    const wordList = this.picArr[pindex].wordArr;
    // console.log('s',wordList);
    const windex = wordList.indexOf(wordData);
    console.log('id',windex);
    if ( pindex !== -1) {
      // const this.picArr[pindex].wordArr[windex].splice(windex,1);
      this.picArr[pindex].wordArr.splice(windex,1);
      // const pic = this.picArr[pindex].wordArr;
      // const word = pic[windex];
      // console.log('word',word);
    }
    // const a = this.item.contentObj
    // console.log(this.picArr);
    // console.log(index);
    // if (index !== -1) {
    //   this.wordArr.splice(index, 1);
    // }
    console.log('a');
    // this.update.emit(this.item);
    this.save();
  }






  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();
  }

  onQAudioUploadSuccessByItem(e, item, id = null) {

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


  addPic() {
    this.picArr.push({
      pic_url: '',
      audio_url: '',
      // text: '',
      // radioValue: 'true',
      wordArr: [],
    });

    this.saveItem();
  }


  addWord(data) {
    // this.wordArr.push({
    //   text: '',
    // });
    const index = this.picArr.indexOf(data);
    console.log(index);
    // this.picArr.forEach(ele => {
    //   ele.wordArr.push({text: ''});
    // });
    this.picArr[index].wordArr.push({text: ''});
    this.saveItem();
  }


  // radioClick(it, radioValue) {
  //   it.radioValue = radioValue;

  //   this.saveItem();
  // }

  clickCheckBox() {
    console.log(' in clickCheckBox');
    this.saveItem();
  }


  saveItem() {
    // this.update.emit(this.item);
    console.log('start');
    this.save();
    console.log(this.picArr);
  }

  saveNew(i) {
    if(this.item.contentObj.picArr[i].optionType === "A"){
      delete this.item.contentObj.picArr[i].pic_url
    } else {
      delete this.item.contentObj.picArr[i].text
    }
    (<any> window).courseware.setData(this.item, null, this.KEY);
  }
  save() {
    (<any> window).courseware.setData(this.item, null, this.KEY);
    this.refresh();
  }

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

}

