import { Component, Inject, ViewChild } from '@angular/core';
import { ICON_LIST, gettext, NavigatorService, Permissions } from '@c8y/ngx-components';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { DASHBOARD_THEME_CLASSES, WIDGET_HEADER_CLASSES } from './context-dashboard.model';
import { clone } from 'lodash-es';
import { ContextDashboardService } from './context-dashboard.service';
import { TranslateService } from '@ngx-translate/core';
export class DashboardDetailComponent {
    constructor(modal, iconList, contextDashboardService, navigatorService, permissionsService, translateService) {
        this.modal = modal;
        this.contextDashboardService = contextDashboardService;
        this.navigatorService = navigatorService;
        this.permissionsService = permissionsService;
        this.translateService = translateService;
        this.styling = {
            themeClass: 'dashboard-theme-light',
            headerClass: 'panel-title-regular'
        };
        this.possibleStyling = { DASHBOARD_THEME_CLASSES, WIDGET_HEADER_CLASSES };
        this.result = new Promise((resolve, reject) => {
            this._save = resolve;
            this._cancel = reject;
        });
        this.DEFAULT_DASHBOARD_MARGIN = 12;
        this.DEFAULT_DASHBOARD_ICON = 'th';
        this.DEFAULT_DASHBOARD_PRIORITY = 10000;
        this.icons = iconList;
        this.filteredIcons = iconList;
    }
    get applyToDevicesOfTypeTitle() {
        const text = this.applyToDevicesOfTypePermitted ?
            gettext('Apply dashboard to all devices of type {{ type }}') :
            gettext('Apply dashboard to all devices of type {{ type }} (permission required)');
        return this.translateService.instant(text, { type: this.dashboard.deviceTypeValue });
    }
    ngAfterContentInit() {
        const defaultDashboardCfg = {
            name: this.isReport ? 'Report' : 'Dashboard',
            priority: this.DEFAULT_DASHBOARD_PRIORITY,
            icon: this.DEFAULT_DASHBOARD_ICON,
            deviceTypeValue: this.deviceType
        };
        if (this.dashboard) {
            this.current = clone(this.dashboard);
            this.setDashboardStyle();
        }
        else {
            this.dashboard = defaultDashboardCfg;
            this.dashboardDetailForm.form.markAsDirty();
        }
        this.setTitle();
        this.setupApplyToDevicesOfTypeCheckbox();
        this.navigatorNodes$ = this.navigatorService.items$;
        this.namePlaceholder = this.isReport ? gettext('e.g. My report') : gettext('e.g. My dashboard');
    }
    setTitle() {
        this.titleName = this.isReport ? gettext('report') : gettext('dashboard');
        this.titleAction = this.current ? gettext('Edit') : gettext('Add');
    }
    setupApplyToDevicesOfTypeCheckbox() {
        const rolesToCheck = ['ROLE_INVENTORY_CREATE', 'ROLE_INVENTORY_ADMIN'];
        this.applyToDevicesOfTypePermitted = this.permissionsService.hasAnyRole(rolesToCheck);
    }
    save() {
        this.dashboard.classes = { [this.styling.themeClass]: true };
        this.dashboard.widgetClasses = { [this.styling.headerClass]: true };
        this.dashboard.c8y_IsNavigatorNode = this.dashboard.c8y_IsNavigatorNode
            ? {}
            : this.current
                ? null
                : undefined;
        this._save(this.dashboard);
    }
    close() {
        this._cancel();
        this.modal.hide();
    }
    getDashboardPreviewStyle() {
        const cssClasses = {};
        cssClasses[this.styling.headerClass] = true;
        cssClasses[this.styling.themeClass] = true;
        return cssClasses;
    }
    selectIcon(icon) {
        this.dashboard.icon = icon;
        this.dashboardDetailForm.form.markAsDirty();
    }
    updateFiltered(term) {
        if (term) {
            const search = new RegExp(term, 'i');
            this.filteredIcons = this.icons.filter(val => search.test(val));
        }
        else {
            this.filteredIcons = this.icons;
        }
    }
    setDashboardStyle() {
        const allClasses = Object.assign(Object.assign({}, this.dashboard.classes), this.dashboard.widgetClasses);
        const styles = Object.keys(allClasses).map(c => c.split('-').pop());
        styles.forEach(styleName => {
            this.styling.themeClass = this.contextDashboardService.getStyling(DASHBOARD_THEME_CLASSES, styleName, this.styling.themeClass);
            this.styling.headerClass = this.contextDashboardService.getStyling(WIDGET_HEADER_CLASSES, styleName, this.styling.headerClass);
        });
    }
}
DashboardDetailComponent.decorators = [
    { type: Component, args: [{
                selector: 'c8y-dashboard-detail',
                template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header separator-bottom\">\n    <h3>{{ titleAction | translate }}&nbsp;{{ titleName | translate }}</h3>\n  </div>\n\n  <div class=\"modal-inner-scroll\">\n    <div class=\"p-l-24 p-r-24\">\n      <form #dashboardDetailForm=\"ngForm\" class=\"d-contents\">\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <div *ngIf=\"!isNamedDashboard || isReport\">\n              <h6 class=\"legend form-block\">\n                <span>{{ 'General' | translate }}</span>\n              </h6>\n              <div class=\"d-flex\">\n                <c8y-form-group>\n                  <label class=\"d-block\">{{ 'Icon' | translate }}</label>\n                  <div dropdown class=\"dropdown\">\n                    <button\n                      title=\"{{ 'Icon' | translate }}\"\n                      class=\"btn-default btn btn-gray\"\n                      dropdownToggle\n                    >\n                      <i c8yIcon=\"{{ dashboard.icon }}\"></i>\n                      <span class=\"caret\"></span>\n                    </button>\n                    <ul\n                      *dropdownMenu\n                      class=\"dropdown-menu modal-inner-scroll dropdown-menu-grid-4 m-l-0\"\n                      style=\"max-height: 250px;\"\n                    >\n                      <ng-container *ngFor=\"let icon of filteredIcons\">\n                        <li (click)=\"selectIcon(icon)\">\n                          <a\n                            class=\"interact\"\n                            title=\"{{ icon }}\"\n                            [ngClass]=\"{ active: dashboard.icon === icon }\"\n                          >\n                            <i class=\"icon\" [c8yIcon]=\"icon\"></i>\n                          </a>\n                        </li>\n                      </ng-container>\n                    </ul>\n                  </div>\n                </c8y-form-group>\n                <c8y-form-group class=\"flex-grow\">\n                  <label>\n                    <span class=\"m-r-4\">{{ 'Menu label' | translate }}</span>\n                    <button\n                      class=\"btn btn-clean\"\n                      popover=\"{{\n                        'Menu label to display in submenu when dashboard is attached' | translate\n                      }}\"\n                      triggers=\"focus\"\n                      placement=\"right\"\n                      container=\"body\"\n                    >\n                      <i [c8yIcon]=\"'question-circle-o'\" class=\"text-primary\"></i>\n                    </button>\n                  </label>\n                  <input\n                    title=\"{{ 'Menu label' | translate }}\"\n                    class=\"form-control\"\n                    name=\"name\"\n                    [(ngModel)]=\"dashboard.name\"\n                    placeholder=\"{{ namePlaceholder | translate }}\"\n                    maxlength=\"512\"\n                    required\n                  />\n                </c8y-form-group>\n              </div>\n              <c8y-form-group *ngIf=\"isReport\">\n                <label translate>Description</label>\n                <textarea\n                  class=\"form-control\"\n                  rows=\"2\"\n                  name=\"description\"\n                  [(ngModel)]=\"dashboard.description\"\n                ></textarea>\n              </c8y-form-group>\n              <div class=\"row\">\n                <div class=\"col-sm-6\" *ngIf=\"!isReport\">\n                  <c8y-form-group>\n                    <label>\n                      <span class=\"m-r-4\">{{ 'Position in navigation' | translate }}</span>\n                      <button\n                        class=\"btn btn-clean\"\n                        popover=\"{{\n                          'Position in navigation menu (10000 first, -10000 last)' | translate\n                        }}\"\n                        triggers=\"focus\"\n                        placement=\"right\"\n                        container=\"body\"\n                      >\n                        <i [c8yIcon]=\"'question-circle-o'\" class=\"text-primary\"></i>\n                      </button>\n                    </label>\n                    <input\n                      title=\"{{ 'Position in navigation' | translate }}\"\n                      type=\"number\"\n                      class=\"form-control\"\n                      name=\"priority\"\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"10000\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                      required\n                    />\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-sm-6\" *ngIf=\"isReport\">\n                  <label translate>Navigator menu item</label>\n                  <c8y-form-group>\n                    <label title=\"{{ 'Show in navigator' | translate }}\" class=\"c8y-checkbox\">\n                      <input\n                        type=\"checkbox\"\n                        name=\"isNavigatorNode\"\n                        [(ngModel)]=\"!!dashboard.c8y_IsNavigatorNode\"\n                      /><span></span>\n                      <span>{{ 'Show in navigator' | translate }}</span>\n                    </label>\n                  </c8y-form-group>\n                </div>\n                <div class=\"col-sm-6\" *ngIf=\"isReport\">\n                  <c8y-form-group>\n                    <label>\n                      <span class=\"m-r-4\">{{ 'Position in navigator' | translate }}</span>\n                      <ng-template #positionInNavPop>\n                        <span>\n                          {{\n                            'Position in navigator (10001 first, -10000 last).' | translate\n                          }}&nbsp;\n                          {{ 'Existing nodes:' | translate }}\n                        </span>\n                        <ul class=\"list-unstyled m-t-16\">\n                          <li *ngFor=\"let node of navigatorNodes$ | async\">\n                            <i [c8yIcon]=\"node.icon\"></i>\n                            <span class=\"word-break m-l-4 m-r-16\">\n                              {{\n                                node.label.length > 15\n                                  ? (node.label | slice: 0:15) + '...'\n                                  : node.label\n                              }}\n                            </span>\n                            <span class=\"pull-right\"> {{ node.priority }} </span>\n                          </li>\n                        </ul>\n                      </ng-template>\n                      <button\n                        class=\"btn btn-clean\"\n                        [popover]=\"positionInNavPop\"\n                        triggers=\"focus\"\n                        placement=\"right\"\n                        container=\"body\"\n                      >\n                        <i [c8yIcon]=\"'question-circle-o'\" class=\"text-primary\"></i>\n                      </button>\n                    </label>\n                    <input\n                      title=\"{{ 'Position in navigation' | translate }}\"\n                      type=\"number\"\n                      class=\"form-control\"\n                      name=\"priority\"\n                      [(ngModel)]=\"dashboard.priority\"\n                      min=\"-10000\"\n                      max=\"20000\"\n                      placeholder=\"{{ 'e.g.' | translate }} 500\"\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n\n              <div *ngIf=\"!current && deviceType\">\n                <div class=\"form-group\">\n                  <label title=\"{{ applyToDevicesOfTypeTitle }}\" class=\"c8y-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      name=\"deviceType\"\n                      [(ngModel)]=\"dashboard.deviceType\"\n                      [disabled]=\"!applyToDevicesOfTypePermitted\"\n                    />\n                    <span></span>\n                    <span class=\"m-r-4\" translate [translateParams]=\"{ type: dashboard.deviceTypeValue }\" ngNonBindable>\n                      Apply dashboard to all devices of type <i>{{ type }}</i>\n                    </span>\n                  </label>\n                </div>\n\n                <div class=\"alert alert-info m-b-24\" *ngIf=\"isDeviceType\">\n                  <i c8y-icon=\"info\"></i>\n                  <span translate [translateParams]=\"{ type: dashboard.deviceTypeValue }\" ngNonBindable>\n                    This dashboard is shared between all devices of the type <i>{{ type }}</i>.\n                  </span>\n                </div>\n              </div>\n            </div>\n            <c8y-appearance-settings\n              [(themeClass)]=\"styling.themeClass\"\n              [(headerClass)]=\"styling.headerClass\"\n            >\n            </c8y-appearance-settings>\n            <div class=\"row\">\n              <div class=\"col-sm-6\">\n                <c8y-form-group class=\"p-b-24 m-b-0\">\n                  <label>{{ 'Widget margin' | translate }}</label>\n                  <div class=\"input-group\">\n                    <input\n                      title=\"{{ 'Widget margin' | translate }}\"\n                      id=\"margin\"\n                      name=\"margin\"\n                      type=\"number\"\n                      class=\"form-control\"\n                      [(ngModel)]=\"dashboard.widgetMargin\"\n                      min=\"0\"\n                      max=\"50\"\n                      placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n                    />\n                    <span class=\"input-group-addon\">px</span>\n                  </div>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-sm-6\">\n                <c8y-form-group class=\"p-b-24 m-b-0\">\n                  <label translate>Widget titles</label>\n                  <label title=\"{{ 'Translate if possible' | translate }}\" class=\"c8y-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      name=\"translateWidgetTitle\"\n                      [(ngModel)]=\"dashboard.translateWidgetTitle\"\n                    /><span></span>\n                    <span>{{ 'Translate if possible' | translate }}</span>\n                  </label>\n                </c8y-form-group>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-sm-6\">\n            <c8y-widget-preview\n              [tab]=\"!isNamedDashboard ? dashboard : undefined\"\n              [previewClasses]=\"getDashboardPreviewStyle()\"\n            ></c8y-widget-preview>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button title=\"{{ 'Cancel' | translate }}\" class=\"btn btn-default\" (click)=\"close()\">\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      class=\"btn btn-primary\"\n      (click)=\"save()\"\n      [disabled]=\"dashboardDetailForm.form.invalid || dashboardDetailForm.form.pristine\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n"
            },] }
];
DashboardDetailComponent.ctorParameters = () => [
    { type: BsModalRef },
    { type: Array, decorators: [{ type: Inject, args: [ICON_LIST,] }] },
    { type: ContextDashboardService },
    { type: NavigatorService },
    { type: Permissions },
    { type: TranslateService }
];
DashboardDetailComponent.propDecorators = {
    dashboardDetailForm: [{ type: ViewChild, args: ['dashboardDetailForm', { static: true },] }]
};
//# sourceMappingURL=data:application/json;base64, 