/**
 * created by Menna & Yara
 */
import { ElementRef, Input, Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { HomeService } from '../services/home-service';
import { GeneralGridComponent } from '../general-grid-component/general-grid-component';
import { TranslateService } from '../services/translate-service';
import { CookieService } from '../services/cookie-service';
import { Mediator } from '../services/mediator';
import { CoreMediatorChannels } from '../utils/mediator-channels';
import { GeneralGridOptions ,CustomGridOptions } from '../types/grid-types';

@Component({
  selector: 'home-grid',
  templateUrl: './home-grid-component.html',
  styleUrls: ['./home-grid-component.css']
})
export class HomeGridComponent implements OnInit, OnDestroy {

  @ViewChild('generalGrid')
  private generalGridComponent: GeneralGridComponent;

  private _customGridOptions: CustomGridOptions;
  private homeGridOptions: GeneralGridOptions;
  private homeGridService;
  private dropdownOptions = "";

  constructor(private homeService: HomeService, private route: ActivatedRoute,
    private router: Router, private translateService: TranslateService, private cookieService: CookieService) {
    this.homeGridService = homeService;
  }

  private getObjectUniqueName() {
    let tmp = this.customGridOptions.homeScreenRoutingPath;
    return tmp.replace('/', '_');
  }

  ngOnInit() {

    let useCases = this.customGridOptions.customUseCases;
    var dropdownOptions = "";
    for (let useCase of useCases) {
      let useCaseClass = this.getObjectUniqueName() + '_' + useCase.actionName;
      dropdownOptions += "<li><a  class='extra-actions-a " + useCaseClass + "' ><i class='" + useCase.iconClass + "'></i>&nbsp;" + this.translateService.instant(useCase.actionName) + "</a></li>"
    }

    this.customGridOptions.gridColumns.push({

      iconClass: '',
      titleKey: 'state_label',
      field: 'currentStatesStr',
      type: 'string',
      template: (currentRow) => {
        let objectState = currentRow.sobCurrentStates[0].stateName.values[this.translateService.instant("lang-key")];
        let stateFlagColor = '#2A78E4';  // draft state color
        if (objectState == this.translateService.instant('Active')) {
          stateFlagColor = '#009E11';
        }
        else if (objectState == this.translateService.instant('Inactive')) {
          stateFlagColor = '#999999';
        }
        return "<div style='margin-left: 43%; width: 50%; text-align: left;'><i class='fa fa-flag' style='color:" + stateFlagColor + "'></i>&nbsp;" + this.translateService.instant(currentRow.currentStatesStr) + "</div>";
      },
      filterable: {
        cell: {
          operator: "contains"
        }
      },
      attributes: { style: "text-align: center;" },
      headerAttributes: { style: "text-align: center;" }
    });

    this.homeGridOptions = {
      objectRemoteRestUrl: this.customGridOptions.objectRemoteRestUrl,
      commandsBeforeDelete: [
        {
          name: 'viewItem',
          text: '',
          iconClass: '',
          className: 'fa fa-external-link',
          click: (e) => {
            e.preventDefault();
            let myGrid = $('.k-grid').data('kendoGrid');
            var currentRow = myGrid.dataItem($(e.target).closest("tr")),
              id = currentRow.get('id');

            this.router.navigate([this.customGridOptions.homeScreenRoutingPath, id]);
          }
        },
        {
          name: 'toggleControl',
          text: '',
          iconClass: '',
          className: 'fa fa-toggle-off',
          click: (e) => {
            e.preventDefault();
            let myGrid = $('.k-grid').data('kendoGrid');
            var currentRow = myGrid.dataItem($(e.target).closest("tr")),
              id = currentRow.get('id');
            var currentCommand = myGrid.tbody.find("tr[data-uid='" + currentRow.uid + "'] a.k-grid-toggleControl");
            var actionSignsId = "#actionsSigns" + currentRow.uid;
            var actionsSigns = myGrid.tbody.find("tr[data-uid='" + currentRow.uid + "'] span" + actionSignsId);
            var isActive = currentCommand[0].className.includes("fa-toggle-off");
            let objectRemoteRestUrl = this.customGridOptions.objectRemoteRestUrl;
            if (isActive) {
              this.homeService.deactivateInstance(this.customGridOptions.objectRemoteRestUrl, id, (responseBody) => {
                var responseErrors = responseBody.__errors__;
                for (let innerObject in responseBody) { // for error dictionaries in inner objects
                  if (typeof responseBody[innerObject] == 'object' && responseBody[innerObject].__errors__) {
                    $.extend(true, responseErrors, responseBody[innerObject].__errors__)
                  }
                }
                var responseGeneralErrors = responseBody.__general_errors__;
                var responseState = this.translateService.instant(responseBody.currentStates[0]);
                var model: any = myGrid.dataSource.get(id);
                model.set("currentStatesStr", responseState);
                model.set("responseErrors", responseErrors);
                model.set("responseGeneralErrors", responseGeneralErrors);
                model.set("actionFlag", true);
              });
            } else {
              this.homeService.activateInstance(this.customGridOptions.objectRemoteRestUrl, id, (responseBody) => {
                var responseErrors = responseBody.__errors__;
                for (let innerObject in responseBody) { // for error dictionaries in inner objects
                  if (typeof responseBody[innerObject] == 'object' && responseBody[innerObject].__errors__) {
                    $.extend(true, responseErrors, responseBody[innerObject].__errors__)
                  }
                }
                var responseGeneralErrors = responseBody.__general_errors__;
                var responseState = this.translateService.instant(responseBody.currentStates[0]);
                var model: any = myGrid.dataSource.get(id);
                model.set("currentStatesStr", responseState);
                model.set("responseErrors", responseErrors);
                model.set("responseGeneralErrors", responseGeneralErrors);
                model.set("actionFlag", true);
              });
            }
          }
        }

      ],
      commandsAfterDelete: [
        {
          name: 'expandActions',
          text: '',
          className: 'grid-small-btn',
          template: () => {
            return "<span  data-uk-dropdown='{ pos:'bottom-center' ,remaintime:'100'}' class='uk-button-dropdown grid-dropdown-span-" + this.translateService.instant('lang-key') + "'>" +
              "<i class='fa fa-ellipsis-v'></i>" +
              "<div class='uk-dropdown uk-dropdown-small grid-dropdown-div'>" +
              "<ul class='uk-nav uk-nav-dropdown extra-actions-ul-" + this.translateService.instant('lang-key') + "'>" + dropdownOptions +
              "</ul></div></span>"

          }

        }
      ],
      validity: [{
        width: 45,
        template: (currentRow) => {
          var objectId = currentRow.get('id');
          if (this.homeService.checkValidity(objectId))
            return "<span class='fa fa-exclamation-triangle'></span>";
          else
            return "";
        }
      }],
      columns: [
        {
          iconClass: 'fa fa-bookmark-o',
          title: "<span class='fa fa-bookmark-o'></span>",
          template: "<button class='transparent-btn-icon add-to-favorite'><span class='fa fa-bookmark-o'></span></button>",
          width: 45,
        }
      ].concat(this.customGridOptions.gridColumns),
      /*         */

      onDataBound: () => {
        let useCases = this.customGridOptions.customUseCases;
        var dropdownOptions = "";

        /**
         * @desc translate extra usecase when change language
         * ex.. ( clone /  verify integrity)
         */

        for (let useCase of useCases) {
          let useCaseClass = this.getObjectUniqueName() + '_' + useCase.actionName;
          $("." + useCaseClass).click(function (e) {
            useCase.actionFunction(e)
          })
        }

        let componentRef = this;
        $('.add-to-favorite').on('click', function (e) { //TODO:complete when integrate with server
          $("span", e.currentTarget).toggleClass("fa fa-bookmark fa fa-bookmark-o");
          let grid = $('.k-grid').data('kendoGrid');
          var object = grid.dataItem($(e.currentTarget).closest("tr")),
            objectId = object.get('id');
          var className = $("span", this).attr('class');
          if (className == "fa fa-bookmark-o")
            componentRef.homeService.removeFromFavorites(objectId);
          else
            componentRef.homeService.addToFavorites(objectId);

        });

        $('.more-actions').hover(function (e) {
          $("li", this.closest("td")).toggle();
        });

        /* set ToggleControl and action signs*/
        let myGrid = $('.k-grid').data('kendoGrid');
        var data = myGrid.dataSource.data(), rowData;
        for (var _i = 0; _i < data.length; _i++) {
          rowData = data[_i];
          var dataItem = myGrid.dataSource.get(rowData.id), rowTemplate, currentStateIcon;

          if (rowData.currentStatesStr == this.translateService.instant('Draft') || rowData.currentStatesStr == this.translateService.instant('Inactive')) {
            rowTemplate = myGrid.tbody.find("tr[data-uid='" + dataItem.uid + "'] a.fa-toggle-off");
            rowTemplate.removeClass("fa-toggle-off");
            rowTemplate.addClass("fa-toggle-on");
            currentStateIcon = myGrid.tbody.find("tr[data-uid='" + dataItem.uid + "'] i.fa.fa-flag");
            if (rowData.currentStatesStr == this.translateService.instant('Draft')) {
              currentStateIcon.css("color", "#2A78E4");
            } else {
              currentStateIcon.css("color", "#999999");
            }

          } else if (rowData.currentStatesStr == this.translateService.instant('Active')) {
            rowTemplate = myGrid.tbody.find("tr[data-uid='" + dataItem.uid + "'] a.fa-toggle-on");
            rowTemplate.removeClass("fa-toggle-on");
            rowTemplate.addClass("fa-toggle-off");
            currentStateIcon = myGrid.tbody.find("tr[data-uid='" + dataItem.uid + "'] i.fa.fa-flag");
            currentStateIcon.css("color", "#009E11");
          }

          if (rowData.actionFlag == true) {
            var cumulativeErrors = '';
            var responseErrors = JSON.stringify(rowData.responseErrors);
            var responseErrorsJsonObjectMap = JSON.parse(responseErrors);
            for (let key in responseErrorsJsonObjectMap) {
              cumulativeErrors = cumulativeErrors + responseErrorsJsonObjectMap[key].message + "\n";
            }

            var responseGeneralErrors = JSON.stringify(rowData.responseGeneralErrors);
            var responseGeneralErrorsJsonObjectMap = JSON.parse(responseGeneralErrors);
            for (let key in responseGeneralErrorsJsonObjectMap) {
              cumulativeErrors = cumulativeErrors + responseGeneralErrorsJsonObjectMap[key].message + "\n";
            }

            var actionSignsId = "#actionsSigns" + dataItem.uid;
            var actionsSigns = myGrid.tbody.find("tr[data-uid='" + dataItem.uid + "'] span" + actionSignsId);
            if (cumulativeErrors == '') {
              actionsSigns.addClass("fa fa-check");
              var toolTipSuccessResponse = actionsSigns.find("div ul.uk-nav.uk-nav-dropdown li");
              toolTipSuccessResponse[0].innerHTML = "success";
            } else {
              actionsSigns.addClass("fa fa-times");
              var toolTipFailureResponse = actionsSigns.find("div ul.uk-nav.uk-nav-dropdown li");
              toolTipFailureResponse[0].innerHTML = cumulativeErrors;
            }
          }
        }

        /* set ToggleControl and action signs*/
      },
      dataSource: this.customGridOptions.dataSource,
      customUseCases: (this.customGridOptions.customUseCases) ? this.customGridOptions.customUseCases : [],
      detailTemplate: this.customGridOptions.detailTemplate,
      detailInit: this.customGridOptions.detailInit
    };

  }




  getSelectedRows(): any[] {
    return this.generalGridComponent.selectedItems;
  }

  get customGridOptions(): CustomGridOptions {
    return this._customGridOptions;
  }
  set customGridOptions(customGridOptions: CustomGridOptions) {
    this._customGridOptions = customGridOptions;
  }

  ngOnDestroy() {
  }

}