import { __awaiter } from "tslib";
import { Component, Input, EventEmitter } from '@angular/core';
import { InventoryService } from '@c8y/client';
import { gettext } from '@c8y/ngx-components';
import { reject } from 'lodash-es';
export class OpcuaAutoApplySettingsComponent {
    constructor(inventoryService) {
        this.inventoryService = inventoryService;
        this.opcuaServers = [];
        this.selectedItems = [];
        this.filteredList = [];
        this.checked = {};
        this.sizeToShowFilter = 5;
        this.constraints = {
            browsePathMatchesRegex: '',
            matchesNodeIds: [],
            serverObjectHasFragment: '',
            matchesServerIds: []
        };
        this.placeholderSelectServerIds = gettext('Select server IDs from list');
        this.updateSelectedItem = new EventEmitter();
    }
    ngOnInit() {
        return __awaiter(this, void 0, void 0, function* () {
            const { data } = yield this.inventoryService.list({
                pageSize: 1000,
                withTotalPages: true,
                type: 'c8y_OpcuaServer'
            });
            this.opcuaServers = data;
            this.filteredList = data;
            this.selectedItems = [];
            const { matchesServerIds } = this.constraints;
            data.forEach(server => {
                if (matchesServerIds &&
                    matchesServerIds.length > 0 &&
                    matchesServerIds.find(itemId => itemId === server.id)) {
                    this.selectedItems.push(server);
                    this.checked[server.id] = true;
                    this.showServerIds = true;
                }
            });
        });
    }
    set model(model) {
        if (model && model.applyConstraints) {
            this.constraints = model.applyConstraints;
        }
        this._model = model;
    }
    get model() {
        return this._model;
    }
    serverIdsSelected(items) {
        if (this.constraints) {
            this.constraints.matchesServerIds = items.map((item) => item.id);
        }
        this.selectedItems = items;
    }
    onChangeNodeId(event) {
        if (event.target.checked) {
            this.showRootNodes = true;
            this.add();
        }
        else {
            this.showRootNodes = false;
            this.constraints.matchesNodeIds = [];
        }
    }
    onChangeShowServerIds(event) {
        if (!event.target.checked) {
            this.constraints.matchesServerIds = [];
            this.showServerIds = false;
            this.selectedItems = [];
            this.checked = {};
        }
        else {
            this.showServerIds = true;
        }
    }
    onChangeShowBrowsePath(event) {
        if (!event.target.checked) {
            this.constraints.browsePathMatchesRegex = '';
            this.showBrowsePath = false;
        }
        else {
            this.showBrowsePath = true;
        }
    }
    onChangeShowServerFragment(event) {
        if (!event.target.checked) {
            this.constraints.serverObjectHasFragment = '';
            this.showServerFragment = false;
        }
        else {
            this.showServerFragment = true;
        }
    }
    add() {
        this.constraints.matchesNodeIds.push('');
    }
    remove(index) {
        this.constraints.matchesNodeIds.splice(index, 1);
    }
    trackByFn(index, item) {
        return index;
    }
    updateConstraints(items) {
        if (this.constraints) {
            this.constraints.matchesServerIds = items.map((item) => item.id);
        }
    }
    filterItems(filterText) {
        if (filterText.length !== 0) {
            const search = new RegExp(filterText, 'i');
            this.filteredList = this.opcuaServers.filter(({ name, id }) => {
                return search.test(name) || search.test(id);
            });
        }
        else {
            this.filteredList = this.opcuaServers;
        }
    }
    isChecked(item) {
        return this.checked[item.id];
    }
    onSelect(selected, item) {
        if (!selected) {
            this.selectedItems = reject(this.selectedItems, { id: item.id });
            delete this.checked[item.id];
        }
        else {
            this.selectedItems.push(item);
            this.checked[item.id] = selected;
        }
        this.updateSelectedItem.emit(true);
        this.updateConstraints(this.selectedItems);
    }
}
OpcuaAutoApplySettingsComponent.decorators = [
    { type: Component, args: [{
                selector: 'opcua-auto-apply',
                template: "<div class=\"row\">\n  <div class=\"col-md-4\">\n    <p translate>\n      Specifying auto-apply constraints allows you to limit the scope where the device protocols are\n      applied, for example by specifying a set of possible servers or node IDs.\n    </p>\n    <p translate>\n      If no constraints are set, device protocols are applied at any fitting location on the OPC UA\n      server.\n    </p>\n  </div>\n\n  <div class=\"col-md-6\">\n    <ul class=\"list-group\" style=\"box-shadow: none;\">\n      <!-- Limit device type to a set of servers -->\n      <li class=\"list-group-item\">\n        <label\n          title=\"{{ 'Limit device protocol to a set of servers' | translate }}\"\n          class=\"c8y-checkbox\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"\n              constraints.matchesServerIds !== null && constraints.matchesServerIds.length > 0\n            \"\n            (change)=\"onChangeShowServerIds($event)\"\n          />\n          <span></span>\n          <span class=\"m-l-8\">\n            {{ 'Limit device protocol to a set of servers' | translate }}\n          </span>\n        </label>\n        <div\n          class=\"collapse\"\n          [collapse]=\"\n            (!showServerIds &&\n              (constraints.matchesServerIds !== null && constraints.matchesServerIds.length < 1)) ||\n            (!showServerIds && constraints.matchesServerIds === null)\n          \"\n        >\n          <c8y-form-group>\n            <c8y-select\n              [items]=\"opcuaServers\"\n              [selected]=\"selectedItems\"\n              [placeholder]=\"placeholderSelectServerIds\"\n              (onChange)=\"serverIdsSelected($event)\"\n              [updateItems]=\"updateSelectedItem\"\n            >\n            \n              <c8y-li *ngIf=\"opcuaServers.length > sizeToShowFilter\" class=\"sticky-top\">\n                <c8y-filter [icon]=\"'search'\"  (onSearch)=\"filterItems($event)\"></c8y-filter>\n              </c8y-li>\n              <c8y-li *ngIf=\"filteredList && filteredList.length === 0\">\n                <c8y-li-body> \n                  <div class=\"c8y-empty-state text-left\">\n                  <p>{{ 'No items to display.' | translate }}</p>\n                </div>\n                </c8y-li-body>\n              </c8y-li>\n              <c8y-li *ngFor=\"let item of filteredList\">\n                <c8y-li-checkbox\n                  [selected]=\"isChecked(item)\"\n                  (onSelect)=\"onSelect($event, item)\"\n                ></c8y-li-checkbox>\n                <c8y-li-body>{{ item.name | translate }}<br>\n                  <span class=\"text-label-small m-r-4\" translate>ID</span> <small>{{ item.id }}</small>\n                </c8y-li-body>\n              </c8y-li>\n            </c8y-select>\n          </c8y-form-group>\n        </div>\n      </li>\n      <!-- Limit device type scope in the address space -->\n      <li class=\"list-group-item\">\n        <label\n          title=\"{{ 'Limit device protocol scope in the address space' | translate }}\"\n          class=\"c8y-checkbox\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"\n              constraints.browsePathMatchesRegex !== null &&\n              constraints.browsePathMatchesRegex.length > 0\n            \"\n            (change)=\"onChangeShowBrowsePath($event)\"\n          />\n          <span></span>\n          <span class=\"m-l-8\">\n            {{ 'Limit device protocol scope in the address space' | translate }}\n          </span>\n        </label>\n        <div\n          class=\"collapse\"\n          [isAnimated]=\"true\"\n          [collapse]=\"\n            (!showBrowsePath &&\n              constraints.browsePathMatchesRegex !== null &&\n              constraints.browsePathMatchesRegex.length < 1) ||\n            (!showBrowsePath && constraints.browsePathMatchesRegex === null)\n          \"\n        >\n          <c8y-form-group class=\"m-t-8 m-b-8\">\n            <input\n              name=\"browsePath\"\n              type=\"text\"\n              class=\"form-control\"\n              placeholder=\"{{ 'e.g.' | translate }} /objects/devices/.*\"\n              [(ngModel)]=\"constraints.browsePathMatchesRegex\"\n              ngDefaultControl\n            />\n          </c8y-form-group>\n        </div>\n      </li>\n      <!-- Limit device type to servers with a certain fragment-->\n      <li class=\"list-group-item\">\n        <label\n          title=\"{{ 'Limit device protocol to servers with a certain fragment' | translate }}\"\n          class=\"c8y-checkbox\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"constraints.serverObjectHasFragment !== null && constraints.serverObjectHasFragment.length > 0\"\n            (change)=\"onChangeShowServerFragment($event)\"\n          />\n          <span></span>\n          <span class=\"m-l-8\">\n            {{ 'Limit device protocol to servers with a certain fragment' | translate }}\n          </span>\n        </label>\n        <div\n          class=\"collapse\"\n          [isAnimated]=\"true\"\n          [collapse]=\"(!showServerFragment && constraints.serverObjectHasFragment !== null && constraints.serverObjectHasFragment.length < 1) || (!showServerFragment && constraints.serverObjectHasFragment === null)\"\n        >\n          <c8y-form-group class=\"m-t-8 m-b-8\">\n            <input\n              name=\"serverFragment\"\n              type=\"text\"\n              class=\"form-control\"\n              placeholder=\"{{ 'e.g.' | translate }} c8y_SomeServerMarker\"\n              [(ngModel)]=\"constraints.serverObjectHasFragment\"\n              ngDefaultControl\n            />\n          </c8y-form-group>\n        </div>\n      </li>\n      <!-- Limit device type to a specific root node ID -->\n      <li class=\"list-group-item\">\n        <label\n          title=\"{{ 'Limit device protocol to specific root nodes ID' | translate }}\"\n          class=\"c8y-checkbox\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"constraints.matchesNodeIds !== null && constraints.matchesNodeIds.length > 0\"\n            (change)=\"onChangeNodeId($event)\"\n          />\n          <span></span>\n          <span class=\"m-l-8\">\n            {{ 'Limit device protocol to specific root nodes ID' | translate }}\n          </span>\n        </label>\n        <div\n          class=\"collapse\"\n          [isAnimated]=\"true\"\n          [collapse]=\"(!showRootNodes && constraints.matchesNodeIds !== null && constraints.matchesNodeIds.length < 1) || ( !showRootNodes && constraints.matchesNodeIds === null)\"\n        >\n            <ul c8yInputGroupListContainer class=\"list-unstyled p-t-16\">\n              <li\n                class=\"m-b-8\"\n                *ngFor=\"let item of constraints.matchesNodeIds; let i = index; trackBy: trackByFn\"\n              >\n                <c8y-input-group-list [index]=\"i\" (onAdd)=\"add()\" (onRemove)=\"remove($event)\">\n                  <c8y-form-group class=\"form-group--tooltip-validation\">\n                    <input\n                      type=\"text\"\n                      class=\"form-control\"\n                      placeholder=\"{{ 'e.g.' | translate }} nodeId\"\n                      [(ngModel)]=\"constraints.matchesNodeIds[i]\"\n                      [required]=\"true\"\n                    />\n                  </c8y-form-group>\n                </c8y-input-group-list>\n              </li>\n            </ul> \n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n"
            },] }
];
OpcuaAutoApplySettingsComponent.ctorParameters = () => [
    { type: InventoryService }
];
OpcuaAutoApplySettingsComponent.propDecorators = {
    model: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64, 