import { __awaiter } from "tslib";
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FetchClient } from '@c8y/client';
import { WizardService } from '@c8y/ngx-components';
import { lexer as markedLexer, parser as markedParser } from 'marked';
import { packageProperties } from '../../ecosystem.constants';
import { EcosystemService } from '../../ecosystem.service';
export class PackageDetailsComponent {
    constructor(activatedRoute, client, wizard, ecosystemService) {
        this.activatedRoute = activatedRoute;
        this.client = client;
        this.wizard = wizard;
        this.ecosystemService = ecosystemService;
        this.package = {};
        this.packageProperties = packageProperties;
        this.headers = { 'Content-Type': 'text/markdown', responseType: 'blob' };
        this.NOT_FOUND_ERROR_CODE = 404;
    }
    ngOnInit() {
        var _a, _b, _c;
        return __awaiter(this, void 0, void 0, function* () {
            this.package = this.getPackage();
            this.name = (_a = this.package) === null || _a === void 0 ? void 0 : _a.name;
            this.description = (_c = (_b = this.package) === null || _b === void 0 ? void 0 : _b.manifest) === null || _c === void 0 ? void 0 : _c.description;
            this.readme = yield this.getReadmeFileContentAsHtml();
            this.appState = this.ecosystemService.getAppState(this.package);
            this.isApplicationPackage = this.ecosystemService.isApplicationPackage(this.package);
        });
    }
    deploy() {
        const initialState = {
            wizardConfig: {},
            id: 'deployPackage',
            package: this.package
        };
        const modalOptions = { initialState };
        this.wizard.show(modalOptions);
    }
    getPackage() {
        var _a, _b, _c, _d;
        return (_d = (_c = (_b = (_a = this.activatedRoute) === null || _a === void 0 ? void 0 : _a.snapshot) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.contextData;
    }
    getReadmeFileContentAsHtml() {
        return __awaiter(this, void 0, void 0, function* () {
            const readmeFile = yield this.getReadmeFile();
            const readmeContent = yield readmeFile.text();
            if (readmeFile.status === 200) {
                const tokens = markedLexer(readmeContent);
                const html = markedParser(tokens);
                return html;
            }
        });
    }
    getReadmeFile() {
        return __awaiter(this, void 0, void 0, function* () {
            let result;
            const options = {
                method: 'GET',
                headers: this.headers
            };
            result = yield this.client.fetch(`/apps/${this.package.contextPath}/readme.md`, options);
            if (result && result.status === this.NOT_FOUND_ERROR_CODE) {
                result = yield this.client.fetch(`/apps/${this.package.contextPath}/README.md`, options);
            }
            return result;
        });
    }
}
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 [icon]=\"'c8y-atom'\" [label]=\"'Ecosystem' | translate\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'big-parcel'\"\n    [label]=\"'Packages' | translate\"\n    [path]=\"'ecosystem/package-list'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"name | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Info' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div class=\"card content-fullpage d-grid grid__col--8-4--md grid__row--fit-auto\">\n  <div class=\"bg-gray-white grid__col--fullspan separator-bottom\">\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 c8yIcon=\"big-parcel\" class=\"c8y-icon-duocolor icon-48\"></i>\n          <p>\n            <span [ngClass]=\"appState?.class\" class=\"label\">{{ appState?.label | translate }}</span>\n          </p>\n        </div>\n\n        <div class=\"flex-grow col-10\">\n          <div class=\"content-flex-80\">\n            <div class=\"col-5\">\n              <h4 class=\"card-title text-bold m-b-8\">{{ name | humanizeAppName | async }}</h4>\n              <p *ngIf=\"description\">{{ description }}</p>\n              <p *ngIf=\"!description\" class=\"text-muted\">\n                <em>{{ 'No description available.' | translate }}</em>\n              </p>\n            </div>\n            <div *ngIf=\"isApplicationPackage\" class=\"col-3 text-right-md\">\n              <button (click)=\"deploy()\" class=\"btn btn-primary btn-xs\">\n                <i c8yIcon=\"output\" class=\"m-r-4\"></i>\n                {{ 'Deploy application' | translate }}\n              </button>\n            </div>\n            <div class=\"flex-grow\">\n              <c8y-properties-list\n                [data]=\"package.manifest\"\n                [emptyLabel]=\"'--'\"\n                [icon]=\"'info-circle'\"\n                [properties]=\"packageProperties\"\n                [title]=\"'Package info' | translate\"\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      <h4 class=\"card-title\">{{ 'Package overview' | translate }}</h4>\n    </div>\n    <div class=\"card-block p-l-16 p-r-16\">\n      <div *ngIf=\"!readme\" class=\"c8y-empty-state text-center\">\n        <h1 c8yIcon=\"user-manual\" class=\"c8y-icon-duocolor\"></h1>\n        <div>\n          <h3 translate>No README.md found.</h3>\n          <p class=\"m-r-8\" translate>\n            To view the contents of \"README\", add the file \"README.md\" to the package.\n          </p>\n        </div>\n      </div>\n\n      <div [innerHTML]=\"readme\" class=\"markdown-content\"></div>\n    </div>\n    <div class=\"separator-bottom visible-sm visible-xs\"></div>\n  </div>\n\n  <div class=\"inner-scroll\">\n    <div class=\"card-header separator sticky-top\">\n      <h4 class=\"card-title\">{{ 'Package plugins' | translate }}</h4>\n    </div>\n    <div class=\"card-block\">\n      <!-- empty state -->\n      <div *ngIf=\"true\" class=\"c8y-empty-state text-center\">\n        <h1 c8yIcon=\"plugin\"></h1>\n        <div>\n          <h3 translate>No plugins to display.</h3>\n          <p class=\"m-r-8\" translate>\n           This package doesn't contain plugins.\n          </p>\n        </div>\n      </div>\n\n      <!-- TODO: display the included plugins list -->\n    </div>\n  </div>\n</div>\n\n"
            },] }
];
PackageDetailsComponent.ctorParameters = () => [
    { type: ActivatedRoute },
    { type: FetchClient },
    { type: WizardService },
    { type: EcosystemService }
];
//# sourceMappingURL=data:application/json;base64, 