import { Component, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Realtime } from '@c8y/client';
import { gettext } from '@c8y/ngx-components';
import { DeviceConfigurationOperation, RepositoryService } from '@c8y/ngx-components/repository/shared';
import { has } from 'lodash-es';
import { DeviceConfigurationService } from './device-configuration.service';
import { TextBasedConfigurationComponent } from './text-based-configuration.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "./device-configuration.service";
import * as i3 from "@c8y/client";
import * as i4 from "@c8y/ngx-components/repository/shared";
import * as i5 from "@angular/common";
import * as i6 from "@c8y/ngx-components";
import * as i7 from "ngx-bootstrap/tabs";
import * as i8 from "./device-configuration-list.component";
import * as i9 from "./configuration-preview.component";
import * as i10 from "./text-based-configuration.component";
export class DeviceConfigurationComponent {
    constructor(route, deviceConfigurationService, realtime, repositoryService) {
        this.route = route;
        this.deviceConfigurationService = deviceConfigurationService;
        this.realtime = realtime;
        this.repositoryService = repositoryService;
        this.supportedConfigurations = [];
        this.showBinaryBasedConfig = false;
        this.configSnapshot = {};
        this.reloading = false;
        this.deviceConfigurationService.configurationsUpdated.subscribe(repositorySnapsOnly => {
            this.updateSnapshots(repositorySnapsOnly);
        });
    }
    ngOnInit() {
        this.device = this.route.snapshot.parent.data.contextData;
        if (this.device.c8y_SupportedConfigurations) {
            this.supportedConfigurations = this.device.c8y_SupportedConfigurations.map(item => ({
                name: item
            }));
        }
        if (this.deviceConfigurationService.hasAnySupportedOperation(this.device, [
            DeviceConfigurationOperation.DOWNLOAD_CONFIG,
            DeviceConfigurationOperation.UPLOAD_CONFIG
        ])) {
            this.supportedConfigurations.push({
                name: gettext('Legacy configuration snapshot'),
                isLegacy: true
            });
        }
        if (this.supportedConfigurations.length > 0) {
            this.showBinaryBasedConfig = true;
        }
        this.repositorySnapshotsEmptyState = {
            icon: 'gears',
            title: gettext('No configurations available.'),
            text: gettext('Add configuration to configuration repository')
        };
        this.showTextBasedConfig =
            this.deviceConfigurationService.hasAnySupportedOperation(this.device, [
                DeviceConfigurationOperation.CONFIG,
                DeviceConfigurationOperation.SEND_CONFIG
            ]) || has(this.device, 'c8y_Configuration');
    }
    async onConfigTypeSelected(config) {
        this.configurationType = config.name;
        this.isLegacy = config.isLegacy;
        this.updateSnapshots();
    }
    async onRepositoryConfigSelected(config) {
        this.repositorySnapshot = {
            id: config.id,
            time: config.creationTime,
            name: config.name,
            binaryUrl: config.url,
            deviceType: config.deviceType,
            configurationType: config.configurationType
        };
        if (config.url) {
            try {
                const binary = await this.repositoryService.getBinaryFile(config.url, {
                    allowExternal: false
                });
                if (binary) {
                    this.repositorySnapshot.binary = await binary.text();
                }
            }
            catch (ex) {
                // do nothing
            }
        }
    }
    async updateSnapshots(repositorySnapsOnly) {
        this.reloading = true;
        this.repositorySnapshot = undefined;
        this.repositorySnapshots = await this.repositoryService.getSnapshotsFromRepository(this.device, this.configurationType);
        if (!repositorySnapsOnly) {
            this.configSnapshot = this.isLegacy
                ? await this.repositoryService.getLegacyConfigSnapshot(this.device)
                : await this.repositoryService.getConfigSnapshot(this.device, this.configurationType);
        }
        if (this.showTextBasedConfig) {
            await this.textBasedConfigurationComponent.load();
        }
        this.reloading = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DeviceConfigurationComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.DeviceConfigurationService }, { token: i3.Realtime }, { token: i4.RepositoryService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DeviceConfigurationComponent, selector: "c8y-device-configuration", viewQueries: [{ propertyName: "textBasedConfigurationComponent", first: true, predicate: TextBasedConfigurationComponent, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <button class=\"btn btn-link\" title=\"{{ 'Reload' | translate }}\" (click)=\"updateSnapshots()\">\n    <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': reloading }\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage card-has-tabs\">\n  <tabset>\n    <div class=\"card-header separator\" *ngIf=\"showBinaryBasedConfig && !showTextBasedConfig\">\n      <div class=\"card-title\">{{ 'Configurations' | translate }}</div>\n    </div>\n    <div class=\"card-header separator\" *ngIf=\"!showBinaryBasedConfig && showTextBasedConfig\">\n      <div class=\"card-title\">{{ 'Text-based configuration' | translate }}</div>\n    </div>\n    <tab heading=\"{{ 'Configurations' | translate }}\" *ngIf=\"showBinaryBasedConfig\">\n      <div class=\"card--grid card grid__col--4-8--md grid__row--6-6--md m-b-0\">\n        <!-- DEVICE SUPPORTED CONFIGURATIONS -->\n        <div class=\"card--grid__inner-scroll bg-level-1\">\n          <div class=\"p-l-16 p-r-16\">\n            <h5 class=\"legend form-block\">\n              <span translate>Device-supported configurations</span>\n            </h5>\n          </div>\n          <c8y-device-configuration-list\n            [items]=\"supportedConfigurations\"\n            [itemIcon]=\"'gears'\"\n            (configSelected)=\"onConfigTypeSelected($event)\"\n          ></c8y-device-configuration-list>\n        </div>\n\n        <!-- CONFIGURATION PREVIEW -->\n        <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n          <div class=\"card-block d-flex d-col flex-grow\">\n            <h5 class=\"legend form-block\"><span translate>Preview</span></h5>\n\n            <!-- EMPTY STATE -->\n\n            <c8y-ui-empty-state\n              *ngIf=\"!configurationType\"\n              [icon]=\"'file-text'\"\n              [title]=\"'No configuration selected.' | translate\"\n              [subtitle]=\"'Select a configuration to preview.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n\n            <!-- PREVIEW AVAILABLE STATE -->\n            <c8y-device-configuration-preview\n              *ngIf=\"configurationType\"\n              [device]=\"device\"\n              [configurationType]=\"configurationType\"\n              [configSnapshot]=\"configSnapshot\"\n              [canSaveSnapshot]=\"true\"\n              [operationToTrigger]=\"'c8y_UploadConfigFile'\"\n              [actionButtonText]=\"'Get snapshot from device' | translate\"\n              [actionButtonIcon]=\"'download'\"\n              [isLegacy]=\"isLegacy\"\n              class=\"d-flex d-col flex-grow\"\n            ></c8y-device-configuration-preview>\n          </div>\n        </div>\n\n        <!-- AVAILABLE SUPPORTED CONFIGURATIONS -->\n        <div class=\"card--grid__inner-scroll bg-level-1\">\n          <div class=\"p-l-16 p-r-16\">\n            <h5 class=\"legend form-block\" translate>Available supported configurations</h5>\n          </div>\n\n          <!-- EMPTY STATE -->\n\n          <c8y-ui-empty-state\n            *ngIf=\"!configurationType\"\n            [icon]=\"'gears'\"\n            [title]=\"'No selection.' | translate\"\n            [subtitle]=\"\n              'Select a configuration from the device-supported configuration list.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n\n          <div class=\"p-r-16\" *ngIf=\"configurationType\">\n            <c8y-device-configuration-list\n              [items]=\"repositorySnapshots\"\n              [itemIcon]=\"'file-text'\"\n              [emptyState]=\"repositorySnapshotsEmptyState\"\n              [isFilterEnabled]=\"true\"\n              (configSelected)=\"onRepositoryConfigSelected($event)\"\n            ></c8y-device-configuration-list>\n          </div>\n        </div>\n\n        <!-- CONFIGURATION PREVIEW -->\n        <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n          <div class=\"card-block flex-grow d-flex d-col\">\n            <h5 class=\"legend form-block\" translate>Preview</h5>\n\n            <!-- EMPTY STATE -->\n            <c8y-ui-empty-state\n              *ngIf=\"!repositorySnapshot\"\n              [icon]=\"'file-text'\"\n              [title]=\"'No configuration selected.' | translate\"\n              [subtitle]=\"'Select a configuration to preview.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n\n            <!-- CONFIGURATION SELECTED STATE -->\n            <c8y-device-configuration-preview\n              *ngIf=\"repositorySnapshot\"\n              [device]=\"device\"\n              [configurationType]=\"configurationType\"\n              [configSnapshot]=\"repositorySnapshot\"\n              [operationToTrigger]=\"'c8y_DownloadConfigFile'\"\n              [actionButtonText]=\"'Send configuration to device' | translate\"\n              [actionButtonIcon]=\"'upload'\"\n              [isLegacy]=\"isLegacy\"\n              class=\"d-flex d-col flex-grow\"\n            ></c8y-device-configuration-preview>\n          </div>\n        </div>\n      </div>\n    </tab>\n    <tab heading=\"{{ 'Text-based configuration' | translate }}\" *ngIf=\"showTextBasedConfig\">\n      <c8y-text-based-configuration></c8y-text-based-configuration>\n    </tab>\n  </tabset>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i6.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i6.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i6.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i6.TabsetAriaDirective, selector: "tabset" }, { kind: "directive", type: i7.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i7.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "component", type: i8.DeviceConfigurationListComponent, selector: "c8y-device-configuration-list", inputs: ["items", "itemIcon", "emptyState", "isFilterEnabled"], outputs: ["configSelected"] }, { kind: "component", type: i9.ConfigurationPreviewComponent, selector: "c8y-device-configuration-preview", inputs: ["device", "configurationType", "configSnapshot", "canSaveSnapshot", "actionButtonText", "actionButtonIcon", "isLegacy", "operationToTrigger"] }, { kind: "component", type: i10.TextBasedConfigurationComponent, selector: "c8y-text-based-configuration" }, { kind: "pipe", type: i6.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DeviceConfigurationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-device-configuration', template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <button class=\"btn btn-link\" title=\"{{ 'Reload' | translate }}\" (click)=\"updateSnapshots()\">\n    <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': reloading }\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage card-has-tabs\">\n  <tabset>\n    <div class=\"card-header separator\" *ngIf=\"showBinaryBasedConfig && !showTextBasedConfig\">\n      <div class=\"card-title\">{{ 'Configurations' | translate }}</div>\n    </div>\n    <div class=\"card-header separator\" *ngIf=\"!showBinaryBasedConfig && showTextBasedConfig\">\n      <div class=\"card-title\">{{ 'Text-based configuration' | translate }}</div>\n    </div>\n    <tab heading=\"{{ 'Configurations' | translate }}\" *ngIf=\"showBinaryBasedConfig\">\n      <div class=\"card--grid card grid__col--4-8--md grid__row--6-6--md m-b-0\">\n        <!-- DEVICE SUPPORTED CONFIGURATIONS -->\n        <div class=\"card--grid__inner-scroll bg-level-1\">\n          <div class=\"p-l-16 p-r-16\">\n            <h5 class=\"legend form-block\">\n              <span translate>Device-supported configurations</span>\n            </h5>\n          </div>\n          <c8y-device-configuration-list\n            [items]=\"supportedConfigurations\"\n            [itemIcon]=\"'gears'\"\n            (configSelected)=\"onConfigTypeSelected($event)\"\n          ></c8y-device-configuration-list>\n        </div>\n\n        <!-- CONFIGURATION PREVIEW -->\n        <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n          <div class=\"card-block d-flex d-col flex-grow\">\n            <h5 class=\"legend form-block\"><span translate>Preview</span></h5>\n\n            <!-- EMPTY STATE -->\n\n            <c8y-ui-empty-state\n              *ngIf=\"!configurationType\"\n              [icon]=\"'file-text'\"\n              [title]=\"'No configuration selected.' | translate\"\n              [subtitle]=\"'Select a configuration to preview.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n\n            <!-- PREVIEW AVAILABLE STATE -->\n            <c8y-device-configuration-preview\n              *ngIf=\"configurationType\"\n              [device]=\"device\"\n              [configurationType]=\"configurationType\"\n              [configSnapshot]=\"configSnapshot\"\n              [canSaveSnapshot]=\"true\"\n              [operationToTrigger]=\"'c8y_UploadConfigFile'\"\n              [actionButtonText]=\"'Get snapshot from device' | translate\"\n              [actionButtonIcon]=\"'download'\"\n              [isLegacy]=\"isLegacy\"\n              class=\"d-flex d-col flex-grow\"\n            ></c8y-device-configuration-preview>\n          </div>\n        </div>\n\n        <!-- AVAILABLE SUPPORTED CONFIGURATIONS -->\n        <div class=\"card--grid__inner-scroll bg-level-1\">\n          <div class=\"p-l-16 p-r-16\">\n            <h5 class=\"legend form-block\" translate>Available supported configurations</h5>\n          </div>\n\n          <!-- EMPTY STATE -->\n\n          <c8y-ui-empty-state\n            *ngIf=\"!configurationType\"\n            [icon]=\"'gears'\"\n            [title]=\"'No selection.' | translate\"\n            [subtitle]=\"\n              'Select a configuration from the device-supported configuration list.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n\n          <div class=\"p-r-16\" *ngIf=\"configurationType\">\n            <c8y-device-configuration-list\n              [items]=\"repositorySnapshots\"\n              [itemIcon]=\"'file-text'\"\n              [emptyState]=\"repositorySnapshotsEmptyState\"\n              [isFilterEnabled]=\"true\"\n              (configSelected)=\"onRepositoryConfigSelected($event)\"\n            ></c8y-device-configuration-list>\n          </div>\n        </div>\n\n        <!-- CONFIGURATION PREVIEW -->\n        <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n          <div class=\"card-block flex-grow d-flex d-col\">\n            <h5 class=\"legend form-block\" translate>Preview</h5>\n\n            <!-- EMPTY STATE -->\n            <c8y-ui-empty-state\n              *ngIf=\"!repositorySnapshot\"\n              [icon]=\"'file-text'\"\n              [title]=\"'No configuration selected.' | translate\"\n              [subtitle]=\"'Select a configuration to preview.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n\n            <!-- CONFIGURATION SELECTED STATE -->\n            <c8y-device-configuration-preview\n              *ngIf=\"repositorySnapshot\"\n              [device]=\"device\"\n              [configurationType]=\"configurationType\"\n              [configSnapshot]=\"repositorySnapshot\"\n              [operationToTrigger]=\"'c8y_DownloadConfigFile'\"\n              [actionButtonText]=\"'Send configuration to device' | translate\"\n              [actionButtonIcon]=\"'upload'\"\n              [isLegacy]=\"isLegacy\"\n              class=\"d-flex d-col flex-grow\"\n            ></c8y-device-configuration-preview>\n          </div>\n        </div>\n      </div>\n    </tab>\n    <tab heading=\"{{ 'Text-based configuration' | translate }}\" *ngIf=\"showTextBasedConfig\">\n      <c8y-text-based-configuration></c8y-text-based-configuration>\n    </tab>\n  </tabset>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i2.DeviceConfigurationService }, { type: i3.Realtime }, { type: i4.RepositoryService }], propDecorators: { textBasedConfigurationComponent: [{
                type: ViewChild,
                args: [TextBasedConfigurationComponent]
            }] } });
//# sourceMappingURL=data:application/json;base64, 