import { __awaiter } from "tslib";
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { InventoryService, SmartGroupsService } from '@c8y/client';
import { AlertService, gettext, ModalService, Status } from '@c8y/ngx-components';
import { DeviceGroupService } from '@c8y/ngx-components/assets-navigator';
import { TranslateService } from '@ngx-translate/core';
import { SubAssetsService } from './sub-assets.service';
export class GroupInfoComponent {
    constructor(inventory, subAssetsService, deviceGroupService, smartGroupsService, alertService, translate, modalService) {
        this.inventory = inventory;
        this.subAssetsService = subAssetsService;
        this.deviceGroupService = deviceGroupService;
        this.smartGroupsService = smartGroupsService;
        this.alertService = alertService;
        this.translate = translate;
        this.modalService = modalService;
        this.onGroupChange = new EventEmitter();
        this.filterMsg = gettext('Smart groups are groups dynamically constructed based on filtering criteria.');
        this.canEditMsg = gettext('You can edit the filter here.');
        this.GROUP_UPDATED_MSG = gettext('Group updated.');
    }
    ngOnInit() {
        return __awaiter(this, void 0, void 0, function* () {
            this.canEdit = this.smartGroupsService.isSmartGroupV2(this.group)
                ? this.subAssetsService.canEditSmartGroup()
                : yield this.subAssetsService.canEditGroup(this.group);
            this.groupIcon = this.deviceGroupService.icon(this.group);
            this.smartGroupFilter = this.group.c8y_DeviceQueryString;
            this.setHintMsg();
        });
    }
    isSmartGroup() {
        return this.subAssetsService.isSmartGroup(this.group);
    }
    update(partialGroup) {
        return __awaiter(this, void 0, void 0, function* () {
            try {
                const isSmartGroup = this.subAssetsService.isSmartGroup(this.group);
                isSmartGroup
                    ? yield this.updateSmartGroup(partialGroup)
                    : yield this.updateGroup(partialGroup);
            }
            catch (error) {
                this.alertService.addServerFailure(error);
            }
        });
    }
    setHintMsg() {
        const filterMsgTranslated = this.translate.instant(this.filterMsg);
        const canEditMsgTranslated = this.translate.instant(this.canEditMsg);
        this.filterHintMsg = this.canEdit
            ? `${filterMsgTranslated} ${canEditMsgTranslated}`
            : this.filterMsg;
    }
    updateGroup(partialGroup) {
        return __awaiter(this, void 0, void 0, function* () {
            const { id } = this.group;
            const group = Object.assign({ id }, partialGroup);
            const updatedGroup = (yield this.inventory.update(group)).data;
            this.setGroup(updatedGroup);
        });
    }
    updateSmartGroup(partialGroup) {
        return __awaiter(this, void 0, void 0, function* () {
            const { id } = this.group;
            const { c8y_DeviceQueryString } = partialGroup;
            const group = Object.assign({ id }, partialGroup);
            let updatedGroup;
            if (!c8y_DeviceQueryString) {
                updatedGroup = (yield this.smartGroupsService.update(group)).data;
                this.setGroup(updatedGroup);
                return;
            }
            try {
                const modalBody = gettext('You are about to change the smart group filter. Do you want to proceed?');
                const title = gettext('Smart group filter');
                yield this.modalService.confirm(title, modalBody, Status.WARNING, {
                    ok: gettext('Save'),
                    cancel: gettext('Cancel')
                });
                if (!(yield this.isQueryExecutable(c8y_DeviceQueryString))) {
                    return;
                }
            }
            catch (e) {
                return;
            }
            updatedGroup = (yield this.smartGroupsService.update(group)).data;
            this.setGroup(updatedGroup);
        });
    }
    setGroup(group) {
        this.onGroupChange.emit(group);
        this.alertService.success(this.GROUP_UPDATED_MSG);
    }
    isQueryExecutable(query) {
        return __awaiter(this, void 0, void 0, function* () {
            try {
                const filter = { q: query };
                yield this.inventory.list(filter);
                return true;
            }
            catch (error) {
                this.alertService.addServerFailure(error);
                return false;
            }
        });
    }
}
GroupInfoComponent.decorators = [
    { type: Component, args: [{
                selector: 'c8y-group-info',
                template: "<div class=\"bg-gray-white\">\n  <div class=\"card-block p-t-24 p-b-24 large-padding\">\n    <div class=\"content-flex-70\">\n      <div class=\"text-center\">\n        <i class=\"c8y-icon-duocolor icon-48\" [c8yIcon]=\"groupIcon + '-open'\"></i>\n        <p>\n          <small class=\"label label-info\" *ngIf=\"group.c8y_IsDynamicGroup\">\n            {{ 'Smart group' | translate }}\n          </small>\n          <small\n            class=\"label label-info\"\n            *ngIf=\"!group.c8y_IsDynamicGroup && !group.com_cumulocity_model_Agent\"\n          >\n            {{ 'Group' | translate }}\n          </small>\n          <small class=\"label label-info\" *ngIf=\"group.com_cumulocity_model_Agent\">\n            {{ 'Remote group' | translate }}\n          </small>\n        </p>\n      </div>\n\n      <div class=\"flex-grow col-10\">\n        <div class=\"content-flex-80\">\n          <div class=\"col-9\">\n            <form #groupNameForm=\"ngForm\">\n              <c8y-form-group class=\"form-group-lg m-b-0\">\n                <label class=\"sr-only\" translate>\n                  Name\n                </label>\n\n                <p *ngIf=\"!canEdit\" class=\"form-control-static\">{{ group.name }}</p>\n                <div *ngIf=\"canEdit\" class=\"input-group input-group-editable\">\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    [(ngModel)]=\"group.name\"\n                    name=\"name\"\n                    title=\"{{ 'Name' | translate }}\"\n                    size=\"{{ group.name.length + 2 }}\"\n                    placeholder=\"{{ 'e.g. My group' | translate }}\"\n                    maxlength=\"254\"\n                    required\n                  />\n                  <span></span>\n                  <div class=\"input-group-btn\">\n                    <button\n                      (click)=\"update({ name: group.name }); groupNameForm.form.markAsPristine()\"\n                      class=\"btn btn-primary\"\n                      title=\"{{ 'Save' | translate }}\"\n                      [disabled]=\"groupNameForm.form.invalid\"\n                    >\n                      {{ 'Save' | translate }}\n                    </button>\n                  </div>\n                </div>\n              </c8y-form-group>\n            </form>\n            <form #groupDescriptionForm=\"ngForm\">\n              <label class=\"sr-only\" translate>\n                Description\n              </label>\n              <p *ngIf=\"!canEdit\" class=\"form-control-static\">{{ group.c8y_Notes }}</p>\n              <div *ngIf=\"canEdit\" class=\"input-group input-group-editable\">\n                <textarea\n                  class=\"form-control\"\n                  [(ngModel)]=\"group.c8y_Notes\"\n                  name=\"description\"\n                  title=\"{{ 'Description' | translate }}\"\n                  cols=\"{{ group.c8y_Notes ? group.c8y_Notes.length : 25 }}\"\n                  placeholder=\"{{ 'e.g. My description' | translate }}\"\n                ></textarea>\n                <span></span>\n                <div class=\"input-group-btn\">\n                  <button\n                    (click)=\"\n                      update({ c8y_Notes: group.c8y_Notes });\n                      groupDescriptionForm.form.markAsPristine()\n                    \"\n                    class=\"btn btn-primary\"\n                    title=\"{{ 'Save' | translate }}\"\n                    [disabled]=\"groupDescriptionForm.form.invalid\"\n                  >\n                    {{ 'Save' | translate }}\n                  </button>\n                </div>\n              </div>\n            </form>\n\n            <form #smartGroupFilterForm=\"ngForm\" *ngIf=\"isSmartGroup()\">\n              <c8y-form-group class=\"m-b-0 m-t-8\">\n                <label class=\"m-b-0 text-nowrap\">\n                  {{ 'Smart group filter' | translate }}\n                  <button\n                    class=\"btn-clean text-primary m-r-4\"\n                    type=\"button\"\n                    popover=\"{{ filterHintMsg | translate }}\"\n                    triggers=\"focus\"\n                  >\n                    <i c8yIcon=\"question-circle-o\"></i>\n                  </button>\n                </label>\n\n                <p *ngIf=\"!canEdit\" class=\"form-control-static\">\n                  {{ smartGroupFilter }}\n                </p>\n                <div *ngIf=\"canEdit\" class=\"input-group input-group-editable\">\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    [(ngModel)]=\"smartGroupFilter\"\n                    name=\"filter\"\n                    size=\"{{ smartGroupFilter.length + 2 }}\"\n                    placeholder=\"{{ 'e.g.' | translate }} $filter=(id eq '12*')\"\n                    maxlength=\"254\"\n                    title=\"{{ 'Smart group filter' | translate }}\"\n                  />\n                  <span></span>\n                  <div class=\"input-group-btn\">\n                    <button\n                      (click)=\"\n                        update({ c8y_DeviceQueryString: smartGroupFilter });\n                        smartGroupFilterForm.form.markAsPristine()\n                      \"\n                      class=\"btn btn-primary\"\n                      title=\"{{ 'Save' | translate }}\"\n                      [disabled]=\"smartGroupFilterForm.form.invalid\"\n                    >\n                      {{ 'Save' | translate }}\n                    </button>\n                  </div>\n                </div>\n              </c8y-form-group>\n            </form>\n          </div>\n          <div class=\"flex-grow\">\n            <p class=\"m-b-8\">\n              <i c8yIcon=\"info-circle\" class=\"text-info m-r-8\"></i>\n              <span class=\"text-label-small\">{{ 'Group info' | translate }}</span>\n            </p>\n            <ul class=\"list-unstyled small\">\n              <li class=\"p-t-4 p-b-4 flex-row separator-top-bottom text-nowrap\">\n                <label class=\"small m-b-0 m-r-8\">{{ 'Created' | translate }}</label>\n                <span class=\"flex-item-right\">{{ group.creationTime | c8yDate }}</span>\n              </li>\n              <li class=\"p-t-4 p-b-4 flex-row separator-bottom text-nowrap\">\n                <label class=\"small m-b-0 m-r-8\">{{ 'Last updated' | translate }}</label>\n                <span class=\"flex-item-right\">{{ group.lastUpdated | c8yDate }}</span>\n              </li>\n\n              <li\n                *ngIf=\"group.com_cumulocity_model_Agent\"\n                class=\"p-t-4 p-b-4 flex-row separator-bottom text-nowrap\"\n              >\n                <label class=\"small m-b-0 m-r-8\">{{ 'Status' | translate }}</label>\n                <span class=\"flex-item-right\" *ngIf=\"group.c8y_BrokerSource\">\n                  {{ group.c8y_BrokerSource.status }}\n                </span>\n                <span class=\"flex-item-right\" *ngIf=\"!group.c8y_BrokerSource\">\n                  {{ 'Offline' | translate }}\n                </span>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"
            },] }
];
GroupInfoComponent.ctorParameters = () => [
    { type: InventoryService },
    { type: SubAssetsService },
    { type: DeviceGroupService },
    { type: SmartGroupsService },
    { type: AlertService },
    { type: TranslateService },
    { type: ModalService }
];
GroupInfoComponent.propDecorators = {
    group: [{ type: Input }],
    onGroupChange: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64, 