import { Component, Output, Input, EventEmitter } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
import { BsModalService } from 'ngx-bootstrap/modal';
import { InventoryRolesModalComponent } from './inventory-roles-modal.component';
import { take, tap } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "ngx-bootstrap/modal";
import * as i3 from "@c8y/ngx-components";
import * as i4 from "@angular/common";
import * as i5 from "ngx-bootstrap/tooltip";
import * as i6 from "./child-predicates.component";
export class InventoryRolesMappingComponent {
    constructor(controlContainer, bsModal) {
        this.controlContainer = controlContainer;
        this.bsModal = bsModal;
        this.inventoryRoles = [];
        this.selectedInventoryRoles = [];
        this.onRemoveInventoryMapping = new EventEmitter();
    }
    ngOnChanges() {
        this.setSelectedInventoryRoles();
    }
    onRemoveAllChildPredicates() {
        this.onRemoveInventoryMapping.emit(this.inventoryMapping);
    }
    getIds(selectedItems) {
        return selectedItems.map(item => item.id);
    }
    removeInventoryRole(inventoryRole) {
        this.inventoryMapping.thenInventoryRoles = this.inventoryMapping.thenInventoryRoles.filter(value => value.managedObject !== inventoryRole.managedObject);
        delete this.selectedInventoryRoles[inventoryRole.managedObject];
    }
    addInventoryRoles() {
        const currentlySelectedGroups = this.inventoryMapping.thenInventoryRoles.map(inventoryRole => ({ id: inventoryRole.managedObject }));
        const modal = this.bsModal.show(InventoryRolesModalComponent, {
            ignoreBackdropClick: true,
            class: 'modal-sm',
            ariaDescribedby: 'modal-body',
            ariaLabelledBy: 'modal-title',
            initialState: {
                selectedGroups: currentlySelectedGroups
            }
        });
        modal.content.resultEmitter
            .pipe(take(1), tap(() => this.controlContainer.control.markAsDirty()))
            .subscribe(selectedGroups => {
            const newSelectedGroups = selectedGroups.filter(group => !currentlySelectedGroups.some(({ id }) => id === group.id));
            const newInventoryRoles = newSelectedGroups.map(group => ({ managedObject: group.id, roleIds: [] }));
            this.inventoryMapping.thenInventoryRoles =
                this.inventoryMapping.thenInventoryRoles.concat(newInventoryRoles);
        });
    }
    setSelectedInventoryRoles() {
        if (this.inventoryMapping && this.inventoryMapping.thenInventoryRoles && this.inventoryRoles) {
            this.inventoryMapping.thenInventoryRoles.forEach(inventoryRole => {
                this.selectedInventoryRoles[inventoryRole.managedObject] = this.inventoryRoles.filter(item => inventoryRole.roleIds.includes(+item.id));
            });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InventoryRolesMappingComponent, deps: [{ token: i1.ControlContainer }, { token: i2.BsModalService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: InventoryRolesMappingComponent, selector: "c8y-sso-inventory-roles-mapping", inputs: { inventoryMapping: "inventoryMapping", inventoryMappingIndex: "inventoryMappingIndex", inventoryRoles: "inventoryRoles" }, outputs: { onRemoveInventoryMapping: "onRemoveInventoryMapping" }, usesOnChanges: true, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-t-8 p-b-8 p-l-16 p-r-16\">\n  <div *ngIf=\"inventoryMapping.when.childPredicates.length !== 0\">\n    <c8y-sso-child-predicates\n      [childPredicates]=\"inventoryMapping.when.childPredicates\"\n      [accessMappingIndex]=\"'irm' + inventoryMappingIndex\"\n      (onRemoveAllChildPredicates)=\"onRemoveAllChildPredicates()\"\n    ></c8y-sso-child-predicates>\n    <fieldset class=\"c8y-fieldset p-16\">\n      <legend>\n        {{ 'Provide inventory roles' | translate }}\n      </legend>\n      <div\n        class=\"p-l-8 p-r-8\"\n        *ngIf=\"inventoryMapping.thenInventoryRoles.length !== 0\"\n      >\n        <div class=\"tight-grid p-b-8 separator-bottom hidden-sm hidden-xs\">\n          <div class=\"col-md-5\">\n            <label translate>Groups</label>\n          </div>\n          <div class=\"col-md-6\">\n            <label translate>Inventory roles</label>\n          </div>\n        </div>\n        <div\n          class=\"tight-grid d-flex-md a-i-center p-t-8 p-b-8 separator-bottom\"\n          *ngFor=\"let inventoryRole of inventoryMapping.thenInventoryRoles; index as idx\"\n        >\n          <div class=\"col-md-5\">\n            <div class=\"d-flex a-i-center\">\n              <!-- TODO:\n                We need to retrive the icon here, for groups there are 3 possible icons:\n                \u2022 Regular group\n                \u2022 Remote group\n                \u2022 Smartgroup\n                Besides groups, there's also Assets from DTM, in which each asset has a different icon\n              -->\n              <i\n                class=\"m-r-8 text-16\"\n                c8yIcon=\"c8y-group\"\n              ></i>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ inventoryRole.managedObject | moName | async }}\"\n              >\n                {{ inventoryRole.managedObject | moName | async }}\n              </span>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div\n              class=\"form-group m-b-0\"\n              title=\"{{ 'Inventory roles' | translate }}\"\n            >\n              <c8y-select-legacy\n                [id]=\"'ir' + idx + accessMappingIndex\"\n                [items]=\"inventoryRoles\"\n                [selected]=\"selectedInventoryRoles[inventoryRole.managedObject]\"\n                [disableApplyOnNoSelection]=\"true\"\n                (onChange)=\"\n                  controlContainer.control.markAsDirty();\n                  selectedInventoryRoles[inventoryRole.managedObject] = $event;\n                  inventoryRole.roleIds = getIds($event)\n                \"\n              ></c8y-select-legacy>\n            </div>\n          </div>\n          <div class=\"col-md-1\">\n            <button\n              class=\"btn btn-dot btn-dot--danger hidden-xs hidden-sm\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"{{ 'Remove' | translate }}\"\n              name=\"removeButton\"\n              type=\"button\"\n              (click)=\"controlContainer.control.markAsDirty(); removeInventoryRole(inventoryRole)\"\n              [delay]=\"300\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n            <button\n              class=\"btn btn-danger btn-block btn-sm visible-xs visible-sm\"\n              title=\"{{ 'Remove' | translate }}\"\n              name=\"removeButton\"\n              type=\"button\"\n              (click)=\"controlContainer.control.markAsDirty(); removeInventoryRole(inventoryRole)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n              <span translate>Remove</span>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <button\n        class=\"btn btn-default m-t-16\"\n        title=\"{{ 'Add inventory roles' | translate }}\"\n        id=\"add-inventory-roles-button\"\n        type=\"button\"\n        (click)=\"addInventoryRoles()\"\n      >\n        <i\n          class=\"m-r-4\"\n          c8yIcon=\"plus-circle\"\n        ></i>\n        {{ 'Add inventory roles' | translate }}\n      </button>\n    </fieldset>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.SelectLegacyComponent, selector: "c8y-select-legacy", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection", "addDropdownContainerToBody"], outputs: ["onChange"] }, { kind: "directive", type: i5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i6.ChildPredicatesComponent, selector: "c8y-sso-child-predicates", inputs: ["childPredicates", "accessMappingIndex"], outputs: ["onRemoveAllChildPredicates"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.MoNamePipe, name: "moName" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InventoryRolesMappingComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-sso-inventory-roles-mapping', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<fieldset class=\"c8y-fieldset p-t-8 p-b-8 p-l-16 p-r-16\">\n  <div *ngIf=\"inventoryMapping.when.childPredicates.length !== 0\">\n    <c8y-sso-child-predicates\n      [childPredicates]=\"inventoryMapping.when.childPredicates\"\n      [accessMappingIndex]=\"'irm' + inventoryMappingIndex\"\n      (onRemoveAllChildPredicates)=\"onRemoveAllChildPredicates()\"\n    ></c8y-sso-child-predicates>\n    <fieldset class=\"c8y-fieldset p-16\">\n      <legend>\n        {{ 'Provide inventory roles' | translate }}\n      </legend>\n      <div\n        class=\"p-l-8 p-r-8\"\n        *ngIf=\"inventoryMapping.thenInventoryRoles.length !== 0\"\n      >\n        <div class=\"tight-grid p-b-8 separator-bottom hidden-sm hidden-xs\">\n          <div class=\"col-md-5\">\n            <label translate>Groups</label>\n          </div>\n          <div class=\"col-md-6\">\n            <label translate>Inventory roles</label>\n          </div>\n        </div>\n        <div\n          class=\"tight-grid d-flex-md a-i-center p-t-8 p-b-8 separator-bottom\"\n          *ngFor=\"let inventoryRole of inventoryMapping.thenInventoryRoles; index as idx\"\n        >\n          <div class=\"col-md-5\">\n            <div class=\"d-flex a-i-center\">\n              <!-- TODO:\n                We need to retrive the icon here, for groups there are 3 possible icons:\n                \u2022 Regular group\n                \u2022 Remote group\n                \u2022 Smartgroup\n                Besides groups, there's also Assets from DTM, in which each asset has a different icon\n              -->\n              <i\n                class=\"m-r-8 text-16\"\n                c8yIcon=\"c8y-group\"\n              ></i>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ inventoryRole.managedObject | moName | async }}\"\n              >\n                {{ inventoryRole.managedObject | moName | async }}\n              </span>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div\n              class=\"form-group m-b-0\"\n              title=\"{{ 'Inventory roles' | translate }}\"\n            >\n              <c8y-select-legacy\n                [id]=\"'ir' + idx + accessMappingIndex\"\n                [items]=\"inventoryRoles\"\n                [selected]=\"selectedInventoryRoles[inventoryRole.managedObject]\"\n                [disableApplyOnNoSelection]=\"true\"\n                (onChange)=\"\n                  controlContainer.control.markAsDirty();\n                  selectedInventoryRoles[inventoryRole.managedObject] = $event;\n                  inventoryRole.roleIds = getIds($event)\n                \"\n              ></c8y-select-legacy>\n            </div>\n          </div>\n          <div class=\"col-md-1\">\n            <button\n              class=\"btn btn-dot btn-dot--danger hidden-xs hidden-sm\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"{{ 'Remove' | translate }}\"\n              name=\"removeButton\"\n              type=\"button\"\n              (click)=\"controlContainer.control.markAsDirty(); removeInventoryRole(inventoryRole)\"\n              [delay]=\"300\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n            <button\n              class=\"btn btn-danger btn-block btn-sm visible-xs visible-sm\"\n              title=\"{{ 'Remove' | translate }}\"\n              name=\"removeButton\"\n              type=\"button\"\n              (click)=\"controlContainer.control.markAsDirty(); removeInventoryRole(inventoryRole)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n              <span translate>Remove</span>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <button\n        class=\"btn btn-default m-t-16\"\n        title=\"{{ 'Add inventory roles' | translate }}\"\n        id=\"add-inventory-roles-button\"\n        type=\"button\"\n        (click)=\"addInventoryRoles()\"\n      >\n        <i\n          class=\"m-r-4\"\n          c8yIcon=\"plus-circle\"\n        ></i>\n        {{ 'Add inventory roles' | translate }}\n      </button>\n    </fieldset>\n  </div>\n</fieldset>\n" }]
        }], ctorParameters: () => [{ type: i1.ControlContainer }, { type: i2.BsModalService }], propDecorators: { inventoryMapping: [{
                type: Input
            }], inventoryMappingIndex: [{
                type: Input
            }], inventoryRoles: [{
                type: Input
            }], onRemoveInventoryMapping: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 