/**
 * created by Menna
 */
import { Component, OnInit, Input, ViewChild, ViewContainerRef, ElementRef, ComponentFactoryResolver, OnDestroy } from '@angular/core';
import { LocalizedLanguage } from '../localized-component/languages-component';
import { WindowComponent } from '../kendo-widgets/window/window.component';
import { StartLocalizedComponent } from '../start-localized-component/start-localized-component';
import { Mediator } from '../services/mediator';
import { CoreMediatorChannels } from '../utils/mediator-channels';
import { TranslateService } from '../services/translate-service';
import { ObjectUtils } from '../utils/object-utils';
import { EditabilityService } from '../services/test-editability-service';
let langs = LocalizedLanguage;

@Component({
  selector: 'view-localized-component',
  templateUrl: './view-localized-component.html',
  styleUrls: ['view-localized-component.css'],

})
export class ViewLocalizedComponent implements OnInit, OnDestroy {

  @Input()
  fieldName;

  @Input()
  Label_fieldName;

  finalModel = [];

  modelForView = { en: '', ar: '' };

  @Input()
  options: any;

  lang_key;
  private languages = [];

  @ViewChild('editLocalizedStringPopup')
  private kendoWindowLocalizedString: WindowComponent;
  /** view localized field  */

  @ViewChild('refLocalizedFieldName')
  private fieldstartLocalizedRef: StartLocalizedComponent;

  private initModel = {};
  editLocalizedStringPopupWindowOptions = {
    visible: false,
    modal: true,
    width: '40%',
    title: false,
    resizable: false,
    draggable: false
  };

  private mediatorListeners: { channel: string, uid: string }[] = [];

  constructor(private editabilityService: EditabilityService, private translationService: TranslateService) {
    this.lang_key = translationService.instant('lang-key');
  }

  ngOnInit() {
    this.editabilityService.setModel(this.options);

    ObjectUtils.extend(this.initModel, this.options[this.fieldName]);

    let uId1 = Mediator.subscribe(CoreMediatorChannels.ON_OBJECT_SCREEN_CANCEL_EDIT_MODE, () => {
      this.fieldstartLocalizedRef.reset(() => {
        this.fieldstartLocalizedRef.refreshModel(this.initModel);
      });
    });
    this.mediatorListeners.push({ channel: CoreMediatorChannels.ON_OBJECT_SCREEN_CANCEL_EDIT_MODE, uid: uId1 });

    let uId2 = Mediator.subscribe(CoreMediatorChannels.ON_OBJECT_SCREEN_VIEW_MODE, () => {
      ObjectUtils.extend(this.initModel, this.options[this.fieldName]);
      ObjectUtils.extend(this.fieldstartLocalizedRef.modelForInitalize, this.options[this.fieldName]);
    });
    this.mediatorListeners.push({ channel: CoreMediatorChannels.ON_OBJECT_SCREEN_VIEW_MODE, uid: uId2 });

    let uId3 = Mediator.subscribe(CoreMediatorChannels.AFTER_SAVE_OBJECT_SCREEN_WITH_ERRORS, () => {
      ObjectUtils.extend(this.fieldstartLocalizedRef.modelForInitalize, this.options[this.fieldName]);
    });
    this.mediatorListeners.push({ channel: CoreMediatorChannels.AFTER_SAVE_OBJECT_SCREEN_WITH_ERRORS, uid: uId3 });

    let uId4 = Mediator.subscribe(CoreMediatorChannels.CHANGE_SYSTEM_LANGUAGE, (lang: string) => {
      this.lang_key = this.translationService.instant('lang-key');
    });
    this.mediatorListeners.push({ channel: CoreMediatorChannels.CHANGE_SYSTEM_LANGUAGE, uid: uId4 });
  }

  onClickForView() {
    this.finalModel = [];
    ObjectUtils.extend(this.modelForView, this.options[this.fieldName].values);
    if (this.options.viewMode == true) { //view mode
      ObjectUtils.extend(this.languages, langs);
      for (var key in this.modelForView) {
        let nameOfLang = '';
        let langNameAndValue = { name: '', value: '' };
        for (var j = 0; j < this.languages.length; j++) {
          if (this.languages[j].value == key) {
            nameOfLang = this.languages[j].name;
            langNameAndValue.name = nameOfLang;
            langNameAndValue.value = this.modelForView[key];
            break;
          }
        }
        this.finalModel.push(langNameAndValue);
      }
    }
  }
  onClickForUpdate() {
    this.kendoWindowLocalizedString.ProtoType.center();
    this.kendoWindowLocalizedString.ProtoType.open();
  }
  cancel(e: any) {
    e.preventDefault();
    this.kendoWindowLocalizedString.ProtoType.close();
    this.fieldstartLocalizedRef.reset(() => {
      this.fieldstartLocalizedRef.refreshModel(this.initModel);
    });
  }
  update(e: any) {
    e.preventDefault();

    this.kendoWindowLocalizedString.ProtoType.close();
  }

  ngOnDestroy() {
    this.kendoWindowLocalizedString.ProtoType.destroy();

    for (let listener of this.mediatorListeners) {
      Mediator.unsubscribe(listener.channel, listener.uid);
    }
  }
}