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 {
  

  KEY = 'hw-24'; 

  values = [];

  _item: any;

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

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

  @Output()
  update = new EventEmitter();

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

  init(){

    if ( !this.item.contentObj ) {
      this.item.contentObj = {};
    }
    
    if (this.item.contentObj.values) {
      
      this.values = this.item.contentObj.values;
    } else {
      const arr = [];
      this.values = arr;
      this.item.contentObj.values = this.values;
    }

    if(!this.item.contentObj.title){
      this.item.contentObj.title = {
        text:"",
        audio_url:"",
        number: ""
      };
    }

    if(!this.item.audio_url){
      this.item.audio_url = "";
    }
  }

  onImageUploadSuccessByItem(e, item, id = null) {

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

    this.save();
  }

  onAudioUploadSuccessByItem(e, item, id = null) {

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

    this.save();
  }

  addValue() {
    this.values.push({
      number : "false",
      text: "",
      answer: [],
      audio_url: "",
      img_url: "",
      answer_color:"000000",
      word : []
    });

    console.log('values', this.values);

    this.save();
  }

  deleteValue(data) {
    console.log("删除");
    const index = this.values.indexOf(data);
    if (index !== -1) {
      this.values.splice(index, 1);
    }
    
    this.save();
  }

  ngOnInit() { 

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

    this.item.contentObj.title = {
      text:"",
      audio_url:"",
      number:"",
    };


    if(!this.item.contentObj.values){
      const arr = [];
      this.values = arr;
      this.item.contentObj.values = this.values;
    }



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

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

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

      this.refresh();
      
      this.init();

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

    }, this.KEY); 
  }

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

  sentence_handle(i){
    let Arr = this.item.contentObj.values[i].text;

    if(Arr == ""){
      this.item.contentObj.values[i].word = [];
      this.item.contentObj.values[i].answer = [];
    }
    else{
      let value = Arr.split(/\s+/);
      this.item.contentObj.values[i].word = value;
    }
    if(this.item.contentObj.values[i].word[this.item.contentObj.values[i].word.length - 1] == "")
    this.item.contentObj.values[i].word.splice(this.item.contentObj.values[i].word.length - 1,1);

    for(let j = 0;j < this.item.contentObj.values[i].answer.length;j++){
      
      if(this.item.contentObj.values[i].answer[j] + 1 > this.item.contentObj.values[i].word.length){
        this.item.contentObj.values[i].answer[j] = "";
        
      }
    }
    
    if(this.item.contentObj.values[i].answer == [])
    this.item.contentObj.values[i].answer = [];

    this.item.contentObj.values[i].answer.sort(function(a, b){return a - b});

    this.save();
    
  }       

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

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

  ngOnDestroy(): void {
    throw new Error("Method not implemented.");
  }
  ngOnChanges(changes: import("@angular/core").SimpleChanges): void {
    throw new Error("Method not implemented.");
  } 

}

