import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FetchClient } from '@c8y/client';
import { AppStateService, ContextRouteService, GainsightService, PackageType, PluginsService, WizardModalService } from '@c8y/ngx-components';
import { BehaviorSubject } from 'rxjs';
import { EcosystemService, EcosystemWizards, packageProperties, PACKAGE_TYPE_LABELS, PackageAvailabilityService, PRODUCT_EXPERIENCE_ECOSYSTEM } from '@c8y/ngx-components/ecosystem/shared';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "@c8y/client";
import * as i3 from "@c8y/ngx-components";
import * as i4 from "@c8y/ngx-components/ecosystem/shared";
import * as i5 from "@angular/common";
import * as i6 from "@angular/forms";
import * as i7 from "ngx-bootstrap/tooltip";
import * as i8 from "../../application-plugins/plugin-list.component";
export class PackageDetailsComponent {
    constructor(activatedRoute, client, wizardModalService, ecosystemService, contextRouteService, pluginsService, packageAvailabilityService, ui, pluginService, gainsightService) {
        this.activatedRoute = activatedRoute;
        this.client = client;
        this.wizardModalService = wizardModalService;
        this.ecosystemService = ecosystemService;
        this.contextRouteService = contextRouteService;
        this.pluginsService = pluginsService;
        this.packageAvailabilityService = packageAvailabilityService;
        this.ui = ui;
        this.pluginService = pluginService;
        this.gainsightService = gainsightService;
        this.package = {};
        this.exportedPlugins$ = new BehaviorSubject([]);
        this.isChangingAvailability = false;
        this.isOwnedByCurrentTenant = false;
        this.isAllowedToCreateSubtenants = false;
        this.packageTypeLabels = PACKAGE_TYPE_LABELS;
        this.PACKAGE_TYPE = PackageType;
        this.packageProperties = packageProperties;
        this.headers = { 'Content-Type': 'text/markdown', responseType: 'blob' };
        this.NOT_FOUND_ERROR_CODE = 404;
    }
    async ngOnInit() {
        this.isAllowedToCreateSubtenants = !!this.ui.currentTenant.value?.allowCreateTenants;
        await this.loadData();
    }
    deploy() {
        this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, {
            component: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.COMPONENTS.PACKAGE_DETAILS,
            action: PRODUCT_EXPERIENCE_ECOSYSTEM.APPLICATIONS.ACTIONS.DEPLOY_APPLICATION_INITIATED
        });
        const initialState = {
            wizardConfig: {},
            id: EcosystemWizards.BLUEPRINT_DEPLOYMENT,
            package: this.package
        };
        const modalOptions = { initialState };
        this.wizardModalService.show(modalOptions);
    }
    async togglePackageAvailability(pckg, newAvailability) {
        this.isChangingAvailability = true;
        pckg = await this.packageAvailabilityService.askIfAvailabilityShouldBeSetTo(pckg, newAvailability);
        const availabilityHasChanged = pckg.availability === newAvailability;
        if (availabilityHasChanged) {
            await this.loadData(pckg);
            this.contextRouteService.setContext(this.activatedRoute, pckg);
        }
        else {
            this.packageAvailability = this.package.availability;
        }
        this.isChangingAvailability = false;
    }
    async loadData(pckg) {
        this.package = pckg
            ? pckg
            : this.contextRouteService.getContextData(this.activatedRoute)?.contextData;
        this.packageAvailability = this.package.availability;
        this.packageContentState = this.ecosystemService.getPackageContentState(this.package);
        this.packageType = this.pluginService.getPackageType(this.package);
        this.name = this.package?.name;
        this.description = this.package?.manifest?.description;
        this.markdown = await this.getReadmeFileContent();
        this.baseUrl = this.getBaseUrl();
        this.appState = this.ecosystemService.getAppState(this.package);
        this.isPackageBlueprint = this.ecosystemService.isPackageBlueprint(this.package);
        this.isOwnedByCurrentTenant =
            this.package?.owner?.tenant?.id === this.ui.currentTenant.value?.name;
        this.extractPackageMFExports();
    }
    extractPackageMFExports() {
        const exports = this.pluginsService.getMFExports(this.package);
        this.exportedPlugins$.next(exports);
    }
    async getReadmeFileContent() {
        const readmeFile = await this.getReadmeFile();
        if (readmeFile.status === 200) {
            return await readmeFile.text();
        }
        return '';
    }
    async getReadmeFile() {
        const baseUrl = this.getBaseUrl();
        let result;
        const options = {
            method: 'GET',
            headers: this.headers
        };
        result = await this.client.fetch(`${baseUrl}README.md`, options);
        if (result && result.status === this.NOT_FOUND_ERROR_CODE) {
            result = await this.client.fetch(`${baseUrl}readme.md`, options);
        }
        return result;
    }
    getBaseUrl() {
        return `/apps/${this.package.contextPath}/`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageDetailsComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.FetchClient }, { token: i3.WizardModalService }, { token: i4.EcosystemService }, { token: i3.ContextRouteService }, { token: i3.PluginsService }, { token: i4.PackageAvailabilityService }, { token: i3.AppStateService }, { token: i3.PluginsService }, { token: i3.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: PackageDetailsComponent, selector: "c8y-package-details", ngImport: i0, template: "<c8y-title>{{ name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Extension package' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  placement=\"right\"\n  itemClass=\"navbar-form\"\n  *ngIf=\"isOwnedByCurrentTenant && isAllowedToCreateSubtenants\"\n>\n  <div class=\"form-horizontal\">\n    <div class=\"form-group\">\n      <label\n        for=\"availability\"\n        translate\n      >\n        Availability`of package based on app state`\n      </label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          class=\"form-control\"\n          id=\"availability\"\n          [(ngModel)]=\"packageAvailability\"\n          [disabled]=\"isChangingAvailability\"\n          (ngModelChange)=\"togglePackageAvailability(package, $event)\"\n        >\n          <option\n            *ngFor=\"let availability of packageAvailabilityService.availabilities\"\n            [ngValue]=\"availability.value\"\n          >\n            {{ availability.label | translate }}\n          </option>\n        </select>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage d-grid grid__col--8-4--md grid__row--fit-auto\">\n  <div class=\"bg-level-1 grid__col--fullspan separator-bottom\">\n    <div class=\"card-block p-t-24 p-b-24 large-padding\">\n      <button\n        class=\"card__ribbon btn-clean\"\n        [attr.aria-label]=\"\n          (package.label || package.manifest.label | translatePackageLabel) +\n          ': ' +\n          (packageTypeLabels[packageType].tooltip | translate)\n        \"\n        tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n        placement=\"bottom\"\n        type=\"button\"\n        *ngIf=\"packageType !== PACKAGE_TYPE.CUSTOM\"\n        [delay]=\"500\"\n      >\n        <span\n          [ngClass]=\"{\n            'bg-info': packageType === PACKAGE_TYPE.COMMUNITY,\n            'bg-primary': packageType === PACKAGE_TYPE.OFFICIAL\n          }\"\n        >\n          {{ package.label || package.manifest.label | translatePackageLabel }}\n        </span>\n      </button>\n      <div class=\"content-flex-70\">\n        <div class=\"text-center\">\n          <i\n            class=\"c8y-icon-duocolor icon-48\"\n            c8yIcon=\"big-parcel\"\n          ></i>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (appState?.label | translate) + ': ' + (appState?.tooltip | translate)\n            \"\n            [tooltip]=\"appState?.tooltip | translate\"\n            placement=\"top\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"appState?.class\"\n            >\n              {{ appState?.label | translate }}\n            </span>\n          </button>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (packageContentState?.label | translate) +\n              ': ' +\n              (packageContentState?.tooltip | translate)\n            \"\n            [tooltip]=\"packageContentState?.tooltip | translate\"\n            placement=\"bottom\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"packageContentState?.class\"\n            >\n              {{ packageContentState?.label | translate }}\n            </span>\n          </button>\n        </div>\n\n        <div class=\"flex-grow col-10\">\n          <div class=\"content-flex-80\">\n            <div class=\"col-5\">\n              <div class=\"card-title text-bold m-b-8\">{{ name | humanizeAppName | async }}</div>\n              <p *ngIf=\"description\">{{ description }}</p>\n              <p\n                class=\"text-muted\"\n                *ngIf=\"!description\"\n              >\n                <em>{{ 'No description available.' | translate }}</em>\n              </p>\n            </div>\n            <div\n              class=\"col-3 text-right-md p-r-md-40\"\n              *ngIf=\"isPackageBlueprint\"\n            >\n              <button\n                class=\"btn btn-primary btn-sm\"\n                (click)=\"deploy()\"\n                data-cy=\"c8y-package-details--deploy-application-button\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"output\"\n                ></i>\n                {{ 'Deploy application' | translate }}\n              </button>\n            </div>\n            <div class=\"flex-grow\">\n              <c8y-properties-list\n                [data]=\"package.manifest\"\n                [properties]=\"packageProperties\"\n              ></c8y-properties-list>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"inner-scroll\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Extension package overview' | translate }}</div>\n    </div>\n    <div class=\"card-block p-l-16 p-r-16\">\n      <c8y-ui-empty-state\n        [icon]=\"'user-manual'\"\n        [title]=\"'No README.md found' | translate\"\n        [subtitle]=\"\n          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the package.'\n            | translate\n        \"\n        *ngIf=\"!markdown\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n      <div\n        class=\"markdown-content\"\n        [innerHTML]=\"markdown | markdownToHtml: { baseUrl } | async\"\n      ></div>\n    </div>\n    <div class=\"separator-bottom visible-sm visible-xs\"></div>\n  </div>\n\n  <div class=\"inner-scroll d-flex d-col\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Package plugins' | translate }}</div>\n    </div>\n    <div class=\"border-left flex-grow\">\n      <!-- empty state -->\n      <div\n        class=\"p-16\"\n        *ngIf=\"(exportedPlugins$ | async).length === 0\"\n      >\n        <c8y-ui-empty-state\n          [icon]=\"'plugin'\"\n          [title]=\"'No plugins to display.' | translate\"\n          [subtitle]=\"'This package doesn\\'t contain plugins.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n      <c8y-plugin-list\n        [plugins$]=\"exportedPlugins$\"\n        [selectable]=\"false\"\n        [installable]=\"true\"\n        [package]=\"package\"\n      ></c8y-plugin-list>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PropertiesListComponent, selector: "c8y-properties-list", inputs: ["properties", "title", "icon", "data", "groups", "noParse", "emptyLabel"] }, { kind: "directive", type: i7.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: i8.PluginListComponent, selector: "c8y-plugin-list", inputs: ["plugins$", "emptyListText", "selectable", "hideSource", "installable", "package"], outputs: ["selectedItems"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: i3.MarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: i4.TranslatePackageLabelPipe, name: "translatePackageLabel" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PackageDetailsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-package-details', template: "<c8y-title>{{ name | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-atom'\"\n    [label]=\"'Ecosystem' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Extensions' | translate\"\n    [path]=\"'ecosystem/extension/extensions'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Extension package' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  placement=\"right\"\n  itemClass=\"navbar-form\"\n  *ngIf=\"isOwnedByCurrentTenant && isAllowedToCreateSubtenants\"\n>\n  <div class=\"form-horizontal\">\n    <div class=\"form-group\">\n      <label\n        for=\"availability\"\n        translate\n      >\n        Availability`of package based on app state`\n      </label>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          class=\"form-control\"\n          id=\"availability\"\n          [(ngModel)]=\"packageAvailability\"\n          [disabled]=\"isChangingAvailability\"\n          (ngModelChange)=\"togglePackageAvailability(package, $event)\"\n        >\n          <option\n            *ngFor=\"let availability of packageAvailabilityService.availabilities\"\n            [ngValue]=\"availability.value\"\n          >\n            {{ availability.label | translate }}\n          </option>\n        </select>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage d-grid grid__col--8-4--md grid__row--fit-auto\">\n  <div class=\"bg-level-1 grid__col--fullspan separator-bottom\">\n    <div class=\"card-block p-t-24 p-b-24 large-padding\">\n      <button\n        class=\"card__ribbon btn-clean\"\n        [attr.aria-label]=\"\n          (package.label || package.manifest.label | translatePackageLabel) +\n          ': ' +\n          (packageTypeLabels[packageType].tooltip | translate)\n        \"\n        tooltip=\"{{ packageTypeLabels[packageType].tooltip | translate }}\"\n        placement=\"bottom\"\n        type=\"button\"\n        *ngIf=\"packageType !== PACKAGE_TYPE.CUSTOM\"\n        [delay]=\"500\"\n      >\n        <span\n          [ngClass]=\"{\n            'bg-info': packageType === PACKAGE_TYPE.COMMUNITY,\n            'bg-primary': packageType === PACKAGE_TYPE.OFFICIAL\n          }\"\n        >\n          {{ package.label || package.manifest.label | translatePackageLabel }}\n        </span>\n      </button>\n      <div class=\"content-flex-70\">\n        <div class=\"text-center\">\n          <i\n            class=\"c8y-icon-duocolor icon-48\"\n            c8yIcon=\"big-parcel\"\n          ></i>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (appState?.label | translate) + ': ' + (appState?.tooltip | translate)\n            \"\n            [tooltip]=\"appState?.tooltip | translate\"\n            placement=\"top\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"appState?.class\"\n            >\n              {{ appState?.label | translate }}\n            </span>\n          </button>\n          <button\n            class=\"btn-clean\"\n            [attr.aria-label]=\"\n              (packageContentState?.label | translate) +\n              ': ' +\n              (packageContentState?.tooltip | translate)\n            \"\n            [tooltip]=\"packageContentState?.tooltip | translate\"\n            placement=\"bottom\"\n            type=\"button\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"label\"\n              [ngClass]=\"packageContentState?.class\"\n            >\n              {{ packageContentState?.label | translate }}\n            </span>\n          </button>\n        </div>\n\n        <div class=\"flex-grow col-10\">\n          <div class=\"content-flex-80\">\n            <div class=\"col-5\">\n              <div class=\"card-title text-bold m-b-8\">{{ name | humanizeAppName | async }}</div>\n              <p *ngIf=\"description\">{{ description }}</p>\n              <p\n                class=\"text-muted\"\n                *ngIf=\"!description\"\n              >\n                <em>{{ 'No description available.' | translate }}</em>\n              </p>\n            </div>\n            <div\n              class=\"col-3 text-right-md p-r-md-40\"\n              *ngIf=\"isPackageBlueprint\"\n            >\n              <button\n                class=\"btn btn-primary btn-sm\"\n                (click)=\"deploy()\"\n                data-cy=\"c8y-package-details--deploy-application-button\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"output\"\n                ></i>\n                {{ 'Deploy application' | translate }}\n              </button>\n            </div>\n            <div class=\"flex-grow\">\n              <c8y-properties-list\n                [data]=\"package.manifest\"\n                [properties]=\"packageProperties\"\n              ></c8y-properties-list>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"inner-scroll\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Extension package overview' | translate }}</div>\n    </div>\n    <div class=\"card-block p-l-16 p-r-16\">\n      <c8y-ui-empty-state\n        [icon]=\"'user-manual'\"\n        [title]=\"'No README.md found' | translate\"\n        [subtitle]=\"\n          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the package.'\n            | translate\n        \"\n        *ngIf=\"!markdown\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n      <div\n        class=\"markdown-content\"\n        [innerHTML]=\"markdown | markdownToHtml: { baseUrl } | async\"\n      ></div>\n    </div>\n    <div class=\"separator-bottom visible-sm visible-xs\"></div>\n  </div>\n\n  <div class=\"inner-scroll d-flex d-col\">\n    <div class=\"card-header separator sticky-top\">\n      <div class=\"card-title\">{{ 'Package plugins' | translate }}</div>\n    </div>\n    <div class=\"border-left flex-grow\">\n      <!-- empty state -->\n      <div\n        class=\"p-16\"\n        *ngIf=\"(exportedPlugins$ | async).length === 0\"\n      >\n        <c8y-ui-empty-state\n          [icon]=\"'plugin'\"\n          [title]=\"'No plugins to display.' | translate\"\n          [subtitle]=\"'This package doesn\\'t contain plugins.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n      <c8y-plugin-list\n        [plugins$]=\"exportedPlugins$\"\n        [selectable]=\"false\"\n        [installable]=\"true\"\n        [package]=\"package\"\n      ></c8y-plugin-list>\n    </div>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i2.FetchClient }, { type: i3.WizardModalService }, { type: i4.EcosystemService }, { type: i3.ContextRouteService }, { type: i3.PluginsService }, { type: i4.PackageAvailabilityService }, { type: i3.AppStateService }, { type: i3.PluginsService }, { type: i3.GainsightService }] });
//# sourceMappingURL=data:application/json;base64, 