import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ElementRef, ViewChild} from '@angular/core';
import { defaultData } from '../../assets/play/data/data.js'
import { v4 as uuidv4 } from 'uuid';
import { NzTreeModule } from 'ng-zorro-antd';
import { fas } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})

export class FormComponent implements OnInit, OnChanges, OnDestroy {

  _item: any;
  KEY = 'DataKey_YM5-9';

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

  dataArray = []
  title = {
    "NO": "C",
    "mainText": "",
    "mainTextAudio_url": ""
  };

  @Output()
  update = new EventEmitter();

  constructor(private appRef: ApplicationRef) {

  }

  ngOnInit() {
    this.item = {};
    this.item.contentObj = {};
    const getData = (<any> window).courseware.getData;
    getData((data) => {
      // console.log("读取数据", data)
      if (data) {
        this.item = data;
      } else {
        this.item = {};
      }
      if ( !this.item.contentObj ) {
        this.item.contentObj = {};
      }
      this.init();
      this.refresh();
    }, this.KEY);
  }
  
  ngOnChanges() {

  }

  ngOnDestroy() {

  }


  init() {
    const fields = ["dataArray", "title"]
    if(typeof(this.item.contentObj.dataArray) == undefined || typeof(this.item.contentObj.grid) == undefined || typeof(this.item.contentObj.title) == undefined || this.item.contentObj.version != defaultData.version) {
      console.log("Init defalue data")
      this.item.contentObj = defaultData
      this.copyFieldsValue(fields, defaultData, this)
    } else {
      console.log("Data loaded")
      this.copyFieldsValue(fields, this.item.contentObj, this)
    }
    console.log(this.item)
  }

  addItem() {
    this.dataArray.push({questionText: "", audio_url_question: "", answerText: "", audio_url_answer: "", showIndex: false})
    this.saveItem();
  }

  deleteItem(index) {
    this.dataArray.splice(index, 1)
    this.saveItem()
  }

  handleMoveItemUp(index) {
    if (index != 0) {
      this.dataArray[index] = this.dataArray.splice(index - 1, 1, this.dataArray[index])[0];
    } else {
      this.dataArray.push(this.dataArray.shift());
    }
    
    this.saveItem()
  }

  handleMoveItemDown(index) {
    if (index != this.dataArray.length - 1) {
      this.dataArray[index] = this.dataArray.splice(index + 1, 1, this.dataArray[index])[0];
    } else {
      this.dataArray.unshift(this.dataArray.splice(index, 1)[0]);
    }
    this.saveItem()
  }

  onImageUploadSuccess(e, key, item?) {
    if(item) {
      item[key] = e.url; 
    } else {
      this[key] = e.url; 
    }
    this.saveItem(); 
  }
 
  onAudioUploadSuccess(e, key, item?) {
    if(item) {
      item[key] = e.url; 
    } else {
      this[key] = e.url; 
    }
    this.saveItem();
  }

  copyFieldsValue(fields: Array<String>, from: Object, to: Object) {
    fields.forEach((name: any)=>{
      to[name] = from[name]
    })
  }
  
  saveItem() {
    this.save()
  }

  save() {
    (<any> window).courseware.setData(this.item, null, this.KEY);
    this.refresh();
    console.log("保存", this.item)
  }

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

