/**
 * created by Menna
 */
import { ElementRef, Input, Component, ViewChild, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
import { GridComponent } from '../kendo-widgets/grid/grid.component';
import { HttpService } from '../services/service-interface';

import * as GridMessagesEN from '../translation/grid-messages-EN';
import * as GridMessagesAR from '../translation/grid-messages-AR';
import { Mediator } from '../services/mediator';
import { CoreMediatorChannels } from '../utils/mediator-channels';
import { CoreNotificationsMessages } from '../utils/notifications-messages';

import { CookieService } from '../services/cookie-service';
import { GRID_GROUPING_MESSAGE, GRID_PAGER_MESSAGES } from '../translation/grid-messages-AR';
import { NgModel } from '@angular/forms';
import { TranslateService } from '../services/translate-service';
import { WindowComponent } from '../kendo-widgets/window/window.component';
import { ObjectService } from '../services/object-screen.service';
import { GridFieldSetOptions } from '../types/fieldset-types';

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

})
export class GridFieldSetComponent implements OnInit, AfterViewInit, OnDestroy {
  //********************************Start Of Variables*****************************//
  @Input()
  private gridFieldSetOptions: GridFieldSetOptions;
  private kendoWindowOptions: kendo.ui.WindowOptions;
  @Input()
  private httpService: HttpService;
  gridOptions: kendo.ui.GridOptions;
  private gridMessages: Map<string, any>;  // map contains all options messages which change when change language
  @ViewChild("ref")
  private gridRef: GridComponent;
  @ViewChild('gridFieldsetCreationPopup')
  private kendoWindow: WindowComponent;

  private mediatorListeners: { channel: string, uid: string }[] = [];
  //********************************Start Of Columns Intialization*****************************//
  private gridColumns: any[] = [];
  private dataSource: kendo.data.DataSource;
  private fieldSetName: string = '';
  private emptyModel: any = {};
  private editIconClicked = false;
  private currentRowToEdit: any;
  dataSourceBeforeChange: any = [];
  //********************************End of Variables*******************************//

  //********************************Start of Public Functions***********************************//

  constructor(httpService: HttpService, private cookieService: CookieService, private translateService: TranslateService, private objectService: ObjectService) {
    this.httpService = httpService;
    this.intializeGridLocalization();
  }
  //#region Grid_Translation

  /**
   * @desc  Fill Gridmessages map with messages according to selected language and Grid Direction
   * @memberOf GeneralGridComponent
   */
  intializeGridLocalization() {
    this.gridMessages = new Map<string, any>();
    if (this.cookieService.getCookie("lang") == "en") {
      this.tranformRightToLeft();
    }
    else if (this.cookieService.getCookie("lang") == "ar") {
      this.tranformLeftToRight();
    }

  }

  /**
   * @desc  set grid messages map with english locale and change grid direction to ltr
   * @memberOf GeneralGridComponent
   */
  tranformRightToLeft() {
    $('.k-grid').removeClass('k-rtl').addClass('k-ltr');
  }

  /**
   * @desc  set grid messages map with arabic locale and change grid direction to rtl
   * @memberOf GeneralGridComponent
   */
  tranformLeftToRight() {
    $('.k-grid').removeClass('k-ltr').addClass('k-rtl');
  }

  /**
   * @desc  set options from grid messages map to grid
   * @memberOf GeneralGridComponent
   */
  gridLanguageTransformation(lang: string) {
    if (lang == "en") {
      this.tranformRightToLeft();
    }
    else if (lang == "ar") {
      this.tranformLeftToRight();

    }
  }
  //#endregion

  ngAfterViewInit() {
    // In case of reload without select language from menubar and on start at first time
    if (this.cookieService.getCookie("lang") == "en") {
      $('.k-grid').removeClass('k-rtl').addClass('k-ltr');
    } else if (this.cookieService.getCookie("lang") == "ar") {
      $('.k-grid').removeClass('k-ltr').addClass('k-rtl');
    }

    this.gridLanguageTransformation(this.cookieService.getCookie("lang"));

    $.extend(true, this.dataSourceBeforeChange, this.gridFieldSetOptions.model[this.fieldSetName]);

    this.gridRef.ProtoType.dataSource.data(this.gridRef.ProtoType.dataSource.options.schema.parse(this.gridFieldSetOptions.model[this.fieldSetName]));

    let uId1 = Mediator.subscribe(CoreMediatorChannels.ON_OBJECT_SCREEN_VIEW_MODE, () => {
      if (this.gridRef && this.gridRef.ProtoType) {
        this.gridRef.ProtoType.hideColumn(this.gridColumns.length - 1);
        //rest dataSourceBeforeChange with object after saving successfully.
        this.dataSourceBeforeChange = $.extend(true, [], this.gridFieldSetOptions.model[this.fieldSetName]);
      }
    });
    this.mediatorListeners.push({ channel: CoreMediatorChannels.ON_OBJECT_SCREEN_VIEW_MODE, uid: uId1 });

    let uId2 = Mediator.subscribe(CoreMediatorChannels.ON_OBJECT_SCREEN_EDIT_MODE, () => {
      if (this.gridRef && this.gridRef.ProtoType) {
        this.gridRef.ProtoType.showColumn(this.gridColumns.length - 1);
      }
    });
    this.mediatorListeners.push({ channel: CoreMediatorChannels.ON_OBJECT_SCREEN_EDIT_MODE, uid: uId2 });

    let uId3 = Mediator.subscribe(CoreMediatorChannels.ON_OBJECT_SCREEN_CANCEL_EDIT_MODE, () => {
      if (this.gridRef && this.gridRef.ProtoType) {
        this.gridRef.ProtoType.dataSource.data(this.gridRef.ProtoType.dataSource.options.schema.parse(this.dataSourceBeforeChange));
      }
    });
    this.mediatorListeners.push({ channel: CoreMediatorChannels.ON_OBJECT_SCREEN_CANCEL_EDIT_MODE, uid: uId3 });

    let uId4 = Mediator.subscribe(CoreMediatorChannels.AFTER_SAVE_OBJECT_SCREEN_WITH_ERRORS, () => {
      if (this.gridRef && this.gridRef.ProtoType) {
        this.gridRef.ProtoType.dataSource.data(this.gridRef.ProtoType.dataSource.data(this.gridFieldSetOptions.model[this.fieldSetName]));
      }
    });
    this.mediatorListeners.push({ channel: CoreMediatorChannels.AFTER_SAVE_OBJECT_SCREEN_WITH_ERRORS, uid: uId4 });

    /**
    * listen to menubar language button action  when ,  change get the value of it and send it to
    * gridLanguageTransformation(lang); which set options to grid according to language
    */
    let uId5 = Mediator.subscribe(CoreMediatorChannels.CHANGE_SYSTEM_LANGUAGE, (lang: string) => {
      this.gridLanguageTransformation(lang);

      //change grid columns title according to language change
      let gridColumns = this.gridRef.ProtoType.columns;

      for (let column of gridColumns) {
        $(".k-grid th[data-field=" + column.field + "]").html(this.translateService.instant(column["titleKey"]));
      }
      //refresh grid when change language
      if (this.gridRef && this.gridRef.ProtoType) {
        this.gridRef.ProtoType.dataSource.data(this.gridRef.ProtoType.dataSource.data());
      }
      // this.gridRef.ProtoType.dataSource.data(this.gridRef.ProtoType.dataSource.options.schema.parse(this.gridRef.ProtoType.dataSource.data()));
    });
    this.mediatorListeners.push({ channel: CoreMediatorChannels.CHANGE_SYSTEM_LANGUAGE, uid: uId5 });
  }

  ngOnInit() {
    $.extend(true, this.emptyModel, this.gridFieldSetOptions.creationModel)

    this.initCreationPopup();

    for (let column of this.gridFieldSetOptions.gridColumns) {
      if (!column.field)
        this.gridColumns.push(column);
      else {
        column.title = this.translateService.instant(column.titleKey);
        this.gridColumns.push(column);

      }
    }

    this.gridColumns.push(
      {
        title: '', menu: false, hidden: true, command: [
          {
            name: 'editItem',
            text: '',
            iconClass: 'k-icon k-i-pencil',
            className: 'grid-small-btn',
            click: (e) => {
              e.preventDefault();
              var currentRow = this.gridRef.ProtoType.dataItem($(e.target).closest("tr"));
              this.currentRowToEdit = this.gridRef.ProtoType.dataItem($(e.target).closest("tr"));
              $.extend(true, this.gridFieldSetOptions.creationModel, currentRow);
              if (this.gridFieldSetOptions.creationModel.clientSideErrors) {
                $.extend(true, this.gridFieldSetOptions.creationModel.clientSideErrors, this.emptyModel.clientSideErrors);
              }
              if (this.gridFieldSetOptions.initCreationModel) {
                this.gridFieldSetOptions.initCreationModel(currentRow)
              }
              this.editIconClicked = true;
              this.kendoWindow.ProtoType.open();
              this.kendoWindow.ProtoType.center();

            }
          },
          {
            name: 'deleteItem',
            text: '',
            className: 'fa fa-trash-o',
            click: (e) => {
              e.preventDefault();
              let currentRow: any = this.gridRef.ProtoType.dataItem($(e.target).closest("tr"));
              Mediator.emit(CoreMediatorChannels.CONFIRMATION_DIALOG, {
                message: this.translateService.instant(CoreNotificationsMessages.DELETE_SINGLE_INSTANCE_MSG),
                confirm: () => {
                  this.gridRef.ProtoType.dataSource.remove(currentRow); //removes it actually from the grid
                },
                cancel: () => {
                }
              });
            }

          }
        ]


      });

    this.gridFieldSetOptions.gridDSOptions.change = (e) => {
      if (this.gridRef && this.gridRef.ProtoType) {
        this.gridFieldSetOptions.model[this.fieldSetName] = this.getCurrentModelForGrid();
      }
    }
    this.dataSource = new kendo.data.DataSource(this.gridFieldSetOptions.gridDSOptions);

    this.fieldSetName = this.gridFieldSetOptions.fieldSetName;

    this.fieldSetGridOptions();
  }

  getCurrentModelForGrid() {
    let dataSource = []
    $.extend(true, dataSource, JSON.parse(JSON.stringify(this.gridRef.ProtoType.dataSource.data())));
    if (this.gridFieldSetOptions.attributeAddedInParse) {
      for (let j = 0; j < dataSource.length; j++) {
        for (let i = 0; i < this.gridFieldSetOptions.attributeAddedInParse.length; i++) {
          let instance = dataSource[j];
          if (instance[this.gridFieldSetOptions.attributeAddedInParse[i]]) {
            delete instance[this.gridFieldSetOptions.attributeAddedInParse[i]];
          }
        }
      }
    }
    return dataSource;
  }
  ngOnDestroy() {
    for (let listener of this.mediatorListeners) {
      Mediator.unsubscribe(listener.channel, listener.uid);
    }
  }
  //********************************End of Public Functions***********************************//

  fieldSetGridOptions = () => {
    this.gridOptions = {
      height: '500',
      columns: this.gridColumns,
      dataSource: this.dataSource,
      editable: {
        mode: 'popup'
      },
      dataBound: () => {
      }
    };
    if (this.gridFieldSetOptions.detailTemplate && this.gridFieldSetOptions.detailInit) {
      this.gridOptions.detailTemplate = kendo.template(this.gridFieldSetOptions.detailTemplate);
      this.gridOptions.detailInit = this.gridFieldSetOptions.detailInit;
    }
    return this.gridOptions;
  };

  addNew(e) {
    this.editIconClicked = false;
    $.extend(true, this.gridFieldSetOptions.creationModel, this.emptyModel);
    if (this.gridFieldSetOptions.initCreationModel) {
      this.gridFieldSetOptions.initCreationModel(this.emptyModel);
    }
    this.kendoWindow.ProtoType.open();
    this.kendoWindow.ProtoType.center();
  }

  private initCreationPopup() {
    $('#gridFieldset_creationPopupBody').html(this.gridFieldSetOptions.creationPopupWindow.popupTplRef.nativeElement);
    $(this.gridFieldSetOptions.creationPopupWindow.popupTplRef.nativeElement).show()
    this.kendoWindowOptions = {
      visible: false,
      modal: true,
      width: '40%',
      title: false,
      resizable: false,
      draggable: true
    };
  }

  private gridPopupCancel() {
    this.kendoWindow.ProtoType.close()
  }

  private gridPopupCreateInstance() {
    var validInput = true;

    if (this.gridFieldSetOptions.creationPopupWindow.validateInput && !(this.gridFieldSetOptions.creationPopupWindow.validateInput())) {
      validInput = false;
    }
    if (validInput) {
      if (this.editIconClicked) {
        $.extend(true, this.currentRowToEdit, this.gridFieldSetOptions.creationModel);
        this.gridRef.ProtoType.dataSource.data(this.gridRef.ProtoType.dataSource.data());
      }
      else {
        this.dataSource.add(this.gridFieldSetOptions.creationModel)
      }
      this.kendoWindow.ProtoType.close()
    }

  }

};