/**
 * created by Menna
 */
import { Component, Input, Output, ComponentRef, ViewChild, ViewContainerRef, EventEmitter, ComponentFactoryResolver, OnInit, AfterContentInit, AfterViewInit } from '@angular/core';
import { ModelLanguage } from '../localized-component/localized-model';
import { LocalizedLanguage } from '../localized-component/languages-component';
import { LocalizedComponent } from '../localized-component/localized-component';
import { LocalizedStringFactory } from '../factories/localizedcmp-factory';
import { ObjectUtils } from '../utils/object-utils';

let langs = LocalizedLanguage;
@Component({
  selector: 'start-localized-component',
  templateUrl: './start-localized-component.html',
  styleUrls: ['start-localized-component.css'],

})
export class StartLocalizedComponent implements AfterViewInit {
  @Input()
  idFieldLocalized;

  @Input()
  modelForInitalize;

  @ViewChild('localized_content', { read: ViewContainerRef })
  private _content: ViewContainerRef;
  get content(): ViewContainerRef {
    return this._content;
  }

  public removeCallback: Function;

  private generalErrorForInput: string = "Can't create with empty value";
  private hasEmptyInput: boolean = false;

  private languages = [];

  private localizedStringFactory: LocalizedStringFactory;
  private localizedCmpRef: ComponentRef<LocalizedComponent>;

  falseLanguages = [];
  constructor(private componentFactoryResolver: ComponentFactoryResolver) {
    //for initializing global values
    ObjectUtils.extend(this.languages, langs);
    //for initializing global values
    this.getLanguagesNotSelected();
    this.localizedStringFactory = new LocalizedStringFactory(componentFactoryResolver);
    this.removeCallback = this.removeLocalizedString.bind(this);

  }
  initialize() {

    if (this.modelForInitalize.values.en == '' && this.modelForInitalize.values.ar == '') {
    } else {
      if (this.modelForInitalize.values.en != '') {
        $("div#" + this.idFieldLocalized + " select").val(1);
        $("div#" + this.idFieldLocalized + " input").val(this.modelForInitalize.values.en);
        this.addLocalizedString();
      }
      if (this.modelForInitalize.values.ar != '') {
        $("div#" + this.idFieldLocalized + " select").val(2);
        $("div#" + this.idFieldLocalized + " input").val(this.modelForInitalize.values.ar);
        this.addLocalizedString();
      }
    }
    $("div#" + this.idFieldLocalized + " input").keypress((e) => {
      if ($("div#" + this.idFieldLocalized + " select option").length > 0 && (e.which == 10 || e.which == 13)) {
        this.addLocalizedString();
      }
    });
  }
  ngAfterViewInit() {
    setTimeout(() => {
      this.initialize();
    });
  }

  getLanguagesNotSelected() {
    this.falseLanguages = [];
    for (let lang of this.languages) {
      if (lang.isSelected) {
        continue;
      }
      this.falseLanguages.push(lang);
    }
  }

  notHasOptions(anchorComponent, inputComponent) {
    var options = [];
    for (let lang of this.languages) {
      if (lang.isSelected) {
        continue;
      }
      options.push(lang);
    }
    if (options.length == 0) {
      anchorComponent.addClass("disabled");
      inputComponent.prop("readonly", true);
    }
  }

  stillHasOptions(anchorComponent, inputComponent) {
    anchorComponent.removeClass("disabled");
    inputComponent.prop("readonly", false);
  }
  removeLocalizedString(object: LocalizedComponent) {
    var idToDeleted = object.lang.id;
    this.languages[idToDeleted - 1].isSelected = false;
    this.getLanguagesNotSelected();
    var effectedLang = LocalizedLanguage[idToDeleted - 1];
    object.destroyinstance();

    /** to remove binding input in modelLanguage */
    this.modelForInitalize.values[effectedLang.value] = '';
    /** to remove binding input in modelLanguage */

    /** to enable plus icon*/
    var inputComponent = $("div#" + this.idFieldLocalized + " input");
    var anchorObjectForplus = $("div#" + this.idFieldLocalized + " a#createLocalizedStringBtn i.fa-plus-square-o").parent();
    this.stillHasOptions(anchorObjectForplus, inputComponent);
    /** to enable plus icon*/

  }
  addLocalizedString() {
    let effectedLangId = $("div#" + this.idFieldLocalized + " select").val();

    let effectedLang = {
      name: { en: '', ar: '' },
      value: ''
    };
    var inputComponent = $("div#" + this.idFieldLocalized + " input");
    var inputLang = inputComponent.val();
    if (inputLang.length != 0 && inputLang.trim()) {
      this.hasEmptyInput = false;
      ObjectUtils.extend(effectedLang, LocalizedLanguage[effectedLangId - 1]);
      this.localizedCmpRef = this.localizedStringFactory.createLocalizedCmp(this.content, effectedLang, this.removeCallback, this.idFieldLocalized + '_' + effectedLang.name.en, this.modelForInitalize);
      this.localizedCmpRef.instance.ref = this.localizedCmpRef;

      this.languages[effectedLangId - 1].isSelected = true;
      /** to bind input to modelLanguage */
      this.modelForInitalize.values[this.languages[effectedLangId - 1].value] = inputComponent.val();
      /** to bind input to modelLanguage */

      /** to refresh component reload language and empty input value */
      inputComponent.val('');
      this.getLanguagesNotSelected();
      /** to refresh component reload language and empty input value */

      /** to check if new component has options or not */
      var anchorObjectForplus = $("div#" + this.idFieldLocalized + " a#createLocalizedStringBtn i.fa-plus-square-o").parent();
      this.notHasOptions(anchorObjectForplus, inputComponent);
      /** to check if new component has options or not */
    } else {
      this.hasEmptyInput = true;
    }
  }
  getLocalizedModel() {
    return this.modelForInitalize;
  }
  reset(callback?: () => void) {
    this.content.clear();
    //for initializing global values
    ObjectUtils.extend(this.languages, langs);
    ObjectUtils.extend(this.modelForInitalize, {});
    //for initializing global values
    this.hasEmptyInput = false;
    this.getLanguagesNotSelected();
    var anchorObjectForplus = $("div#" + this.idFieldLocalized + " a#createLocalizedStringBtn i.fa-plus-square-o").parent();
    var inputComponent = $("div#" + this.idFieldLocalized + " input");
    inputComponent.val('');
    this.stillHasOptions(anchorObjectForplus, inputComponent);
    if (callback) {
      setTimeout(() => {
        callback();
      });
    }
  }
  refreshModel(oldModel) {
    ObjectUtils.extend(this.modelForInitalize, oldModel);
    this.initialize()
  }
}