import { __awaiter } from "tslib";
import { Component, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Realtime } from '@c8y/client';
import { DeviceConfigurationService } from './device-configuration.service';
import { DeviceConfigurationOperation } from '../repository.model';
import { gettext } from '@c8y/ngx-components';
import { RepositoryService } from '../repository.service';
import { TextBasedConfigurationComponent } 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]);
    }
    onConfigTypeSelected(config) {
        return __awaiter(this, void 0, void 0, function* () {
            this.configurationType = config.name;
            this.isLegacy = config.isLegacy;
            this.updateSnapshots();
        });
    }
    onRepositoryConfigSelected(config) {
        return __awaiter(this, void 0, void 0, function* () {
            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 = yield this.repositoryService.getBinaryFile(config.url, {
                        allowExternal: false
                    });
                    if (binary) {
                        this.repositorySnapshot.binary = yield binary.text();
                    }
                }
                catch (ex) {
                    // do nothing
                }
            }
        });
    }
    updateSnapshots(repositorySnapsOnly) {
        return __awaiter(this, void 0, void 0, function* () {
            this.reloading = true;
            this.repositorySnapshot = undefined;
            this.repositorySnapshots = yield this.repositoryService.getSnapshotsFromRepository(this.device, this.configurationType);
            if (!repositorySnapsOnly) {
                this.configSnapshot = this.isLegacy
                    ? yield this.repositoryService.getLegacyConfigSnapshot(this.device)
                    : yield this.repositoryService.getConfigSnapshot(this.device, this.configurationType);
            }
            if (this.showTextBasedConfig) {
                yield this.textBasedConfigurationComponent.load();
            }
            this.reloading = false;
        });
    }
}
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      <h4 class=\"card-title\">{{ 'Configurations' | translate }}</h4>\n    </div>\n    <div class=\"card-header separator\" *ngIf=\"!showBinaryBasedConfig && showTextBasedConfig\">\n      <h4 class=\"card-title\">{{ 'Text-based configuration' | translate }}</h4>\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-gray-white\">\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            <div class=\"c8y-empty-state text-left\" *ngIf=\"!configurationType\">\n              <h1 [c8yIcon]=\"'file-text'\"></h1>\n              <p>\n                <strong translate>No configuration selected.</strong><br />\n                <small translate>Select a configuration to preview</small>\n              </p>\n            </div>\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-gray-white\">\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          <div class=\"c8y-empty-state text-left\" *ngIf=\"!configurationType\">\n            <h1 [c8yIcon]=\"'gears'\"></h1>\n            <p>\n              <strong translate>No selection</strong><br />\n              <small translate\n                >Select a configuration from the device-supported configuration list</small\n              >\n            </p>\n          </div>\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\n            <div class=\"c8y-empty-state text-left\" *ngIf=\"!repositorySnapshot\">\n              <h1 [c8yIcon]=\"'file-text'\"></h1>\n              <p>\n                <strong translate>No configuration selected.</strong><br />\n                <small *ngIf=\"!configurationType; else noSnapshot\" translate\n                  >Select a configuration to preview</small\n                >\n                <ng-template #noSnapshot>\n                  <small translate>Select the configuration you want to preview</small>\n                </ng-template>\n              </p>\n            </div>\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"
            },] }
];
DeviceConfigurationComponent.ctorParameters = () => [
    { type: ActivatedRoute },
    { type: DeviceConfigurationService },
    { type: Realtime },
    { type: RepositoryService }
];
DeviceConfigurationComponent.propDecorators = {
    textBasedConfigurationComponent: [{ type: ViewChild, args: [TextBasedConfigurationComponent,] }]
};
//# sourceMappingURL=data:application/json;base64, 