import { Component, OnInit, Input } from '@angular/core';
import { TranslateService } from '../services/translate-service';
import { CookieService } from '../services/cookie-service';
import { Mediator } from '../services/mediator';
import { CoreMediatorChannels } from '../utils/mediator-channels';
import { SUPPORTED_LANGUAGES } from '../translation/translations';
import { ModuleMetadata } from '../types/modules-types';

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

})
export class TranslationComponent implements OnInit {

  @Input()
  private mainModules: ModuleMetadata[] = [];

  //@Input()
  private supportedLanguages: any[];

  constructor(private _translate: TranslateService, private cookieService: CookieService) { }

  /**
    *
    * @desc  when finds the current language within all supported languages returns true
    * @param {string} lang
    *
    * @memberOf MenubarComponent
    */
  isCurrentLang(lang: string) {
    return lang === this._translate.currentLang;
  }

  /**
   * @desc change layout direction from left to right ( arabic )
   *
   *
   * @memberOf MenubarComponent
   */
  transformLeftToRight() {

    /** Make cookie to save language on change to send later with expiration date  = inf  */
    this.cookieService.setCookie('lang', 'ar', 'expires=Fri, 31 Dec 9999 23:59:59 GMT');

    $('.ltr-row').hide();
    $('.rtl-row').show();


    /** move slidebar component to be LTR Design */
    $(".gn-menu-wrapper-en").addClass("gn-menu-wrapper-ar").removeClass("gn-menu-wrapper-en");

    if ($(".gn-icon-menu").hasClass("gn-selected")) {
      $('.rtl-row').addClass('rtl-row-opened').removeClass('rtl-row-closed');

      $('.sidebar-modules-text').show();

      $("#app-content").removeClass("app-content-opened-menu-en app-content-closed-menu-ar app-content-closed-menu-en")
        .addClass("app-content-opened-menu-ar");

    } else {
      $('.rtl-row').addClass('rtl-row-closed').removeClass('rtl-row-opened');


      $('.sidebar-modules-text').hide();

      $("#app-content").removeClass("app-content-opened-menu-en app-content-opened-menu-ar app-content-closed-menu-en")
        .addClass("app-content-closed-menu-ar");
    }

    /** change grid direction  */
    $('.k-grid').removeClass('k-ltr').addClass('k-rtl');

    /** change language to Ar cause of disconnected character */
    $('#gn-menu').attr("lang", "ar");

    //change direction of the header and body
    $("#app-menubar").removeClass("app-menubar-en").addClass("app-menubar-ar");

  }

  /**
   * @desc change layout direction from  right to left ( english )
   *
   *
   * @memberOf MenubarComponent
   */
  transformRightToLeft() {


    /** Make cookie to save language on change to send later with expiration date  = inf  */
    this.cookieService.setCookie('lang', 'en', 'expires=Fri, 31 Dec 9999 23:59:59 GMT');

    // $('.sidebar-modules-icon').insertAfter($('.sidebar-modules-text'));
    $('.rtl-row').hide();
    $('.ltr-row').show();

    /** move slidebar component to be RTL Design */
    $(".gn-menu-wrapper-ar").addClass("gn-menu-wrapper-en").removeClass("gn-menu-wrapper-ar");

    if ($(".gn-icon-menu").hasClass("gn-selected")) {
      $('.sidebar-modules-text').show();

      $("#app-content").removeClass("app-content-opened-menu-ar app-content-closed-menu-ar app-content-closed-menu-en")
        .addClass("app-content-opened-menu-en");

    } else {
      $("#app-content").removeClass("app-content-opened-menu-en app-content-closed-menu-ar app-content-opened-menu-ar")
        .addClass("app-content-closed-menu-en");

      $('.sidebar-modules-text').hide();

    }

    /** change grid direction  */
    $('.k-grid').removeClass('k-rtl').addClass('k-ltr');

    /** change language to EN cause of disconnected character */
    $('#gn-menu').attr("lang", "en");

    //change direction of the header and body
    $("#app-menubar").removeClass("app-menubar-ar").addClass("app-menubar-en");
  }

  /**
   *
   * select language according to button and on init
   *
   * @param {string} lang
   *
   * @memberOf MenubarComponent
   */
  selectLang(lang: string) {

    /** set service language when change button and default language */
    this._translate.use(lang);

    /**
     * send language to grid using meditor concept : ( Service )
     */
    Mediator.emit(CoreMediatorChannels.CHANGE_SYSTEM_LANGUAGE, lang);

    /** change layout style  LTR or RTL depend on language  */
    if (lang === "ar") {

      this.transformLeftToRight();

    } else if (lang === "en") {

      this.transformRightToLeft();
    }
  }
  ngOnInit() {
    this.supportedLanguages = SUPPORTED_LANGUAGES;

    /** first time system run we need default language to system to change layout according to it  */
    if (this.cookieService.getCookie("lang") === "") {
      this.cookieService.setCookie('lang', 'en', 'expires=Fri, 31 Dec 9999 23:59:59 GMT');
    }

    /** translation service detials  --> to be continue */
    this._translate.setDefaultLang(this.cookieService.getCookie("lang"));

    this._translate.enableFallback(true);

    this.selectLang(this.cookieService.getCookie("lang"));
  }
}