import { Component, Input, ViewChild } from '@angular/core';
import { ApplicationService, ApplicationAvailability } from '@c8y/client';
import { AlertService, DropAreaComponent, WizardComponent, gettext } from '@c8y/ngx-components';
import { EcosystemService } from './ecosystem.service';
import { ERROR_MESSAGES } from './ecosystem.constants';
import { TranslateService } from '@ngx-translate/core';
import { PackageAvailabilityService } from './package-availability.service';
import * as i0 from "@angular/core";
import * as i1 from "./ecosystem.service";
import * as i2 from "@c8y/ngx-components";
import * as i3 from "@c8y/client";
import * as i4 from "@ngx-translate/core";
import * as i5 from "./package-availability.service";
import * as i6 from "@angular/common";
import * as i7 from "@angular/forms";
import * as i8 from "ngx-bootstrap/popover";
export class AddApplicationComponent {
    constructor(ecosystemService, alertService, applicationService, wizardComponent, translateService, packageAvailability) {
        this.ecosystemService = ecosystemService;
        this.alertService = alertService;
        this.applicationService = applicationService;
        this.wizardComponent = wizardComponent;
        this.translateService = translateService;
        this.packageAvailability = packageAvailability;
        this.canGoBack = false;
        this.applicationType = 'application';
        this.canOpenInBrowser = false;
        this.selectedAvailability = ApplicationAvailability.PRIVATE;
        this.availabilityHelpPopoverText = gettext(`
      <p class="m-b-8"><b>Shared</b> availability will make the package available to all subtenants without explicitly subscribing the package.</p>
      <p class="m-b-8"><b>Market</b> availability will make the package available to your own tenant and needs to be subscribed to subtenants individually.</p>
      <p class="m-b-8"><b>Private</b> availability will make the package only available to your own tenant.</p>
  `);
        this.uploadCanceled = false;
    }
    get progress() {
        return this.ecosystemService.progress;
    }
    onFileDroppedEvent(event) {
        if (event && event.length > 0) {
            const file = event[0].file;
            this.onFile(file);
        }
    }
    async onFile(file) {
        this.isLoading = true;
        this.errorMessage = null;
        this.progress.next(0);
        try {
            this.createdApp = await this.createApplicationHandler(file);
            if (this.applicationType === 'package') {
                this.createdApp = await this.packageAvailability.setAvailability(this.createdApp, this.selectedAvailability);
            }
            await this.uploadApplicationHandler(file, this.createdApp);
            this.canOpenInBrowser = this.ecosystemService.canOpenAppInBrowser(this.createdApp);
            this.isAppCreated = true;
        }
        catch (ex) {
            this.ecosystemService.cancelAppCreation(this.createdApp);
            this.createdApp = null;
            this.dropAreaComponent.onDelete();
            // prepare translation of static message if it exists
            const staticErrorMessage = ERROR_MESSAGES[ex.message] && this.translateService.instant(ERROR_MESSAGES[ex.message]);
            // if there is no static message, use dynamic one from the exception
            this.errorMessage = staticErrorMessage ?? ex.message;
            if (!this.errorMessage && !this.uploadCanceled) {
                this.alertService.addServerFailure(ex);
            }
        }
        this.progress.next(100);
        this.isLoading = false;
    }
    getHref(app) {
        return this.applicationService.getHref(app);
    }
    cancel() {
        this.cancelFileUpload();
        this.wizardComponent.close();
    }
    done() {
        this.wizardComponent.close();
    }
    back() {
        this.wizardComponent.reset();
    }
    cancelFileUpload() {
        this.uploadCanceled = true;
        this.ecosystemService.cancelAppCreation(this.createdApp);
        this.createdApp = null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddApplicationComponent, deps: [{ token: i1.EcosystemService }, { token: i2.AlertService }, { token: i3.ApplicationService }, { token: i2.WizardComponent }, { token: i4.TranslateService }, { token: i5.PackageAvailabilityService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddApplicationComponent, selector: "c8y-add-application", inputs: { headerText: "headerText", headerIcon: "headerIcon", successText: "successText", createApplicationHandler: "createApplicationHandler", uploadApplicationHandler: "uploadApplicationHandler", canGoBack: "canGoBack", applicationType: "applicationType" }, viewQueries: [{ propertyName: "dropAreaComponent", first: true, predicate: DropAreaComponent, descendants: true }], ngImport: i0, template: "<c8y-wizard-header>\n  <i [c8yIcon]=\"headerIcon\"></i>\n  <h4 id=\"modal-title\">{{ headerText | translate }}</h4>\n</c8y-wizard-header>\n\n<c8y-wizard-body>\n  <p class=\"p-16 text-center text-medium separator-bottom sticky-top bg-component\">\n    {{ 'Upload a *.zip file' | translate }}\n  </p>\n  <c8y-form-group\n    class=\"m-t-16 m-l-auto m-r-auto\"\n    style=\"max-width: 265px\"\n    id=\"modal-body\"\n    *ngIf=\"!isAppCreated; else appCreated\"\n    [hasError]=\"!!errorMessage\"\n  >\n    <c8y-drop-area\n      class=\"drop-area\"\n      (dropped)=\"onFileDroppedEvent($event)\"\n      [accept]=\"'.zip'\"\n      [loading]=\"isLoading\"\n      [maxAllowedFiles]=\"1\"\n      [progress]=\"progress | async\"\n    ></c8y-drop-area>\n    <c8y-messages>\n      <c8y-message *ngIf=\"errorMessage\">\n        {{ errorMessage | translate }}\n      </c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n  <div class=\"card-block\" *ngIf=\"applicationType === 'package'\">\n    <c8y-form-group>\n      <label\n        class=\"m-r-8 d-inline-block\"\n        id=\"availabilitySelectorLabel\"\n        for=\"availabilitySelector\"\n      >\n        {{ 'Select extension availability' | translate }}\n      </label>\n      <button\n        class=\"btn-help btn-help--sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"availabilityHelpPopover\"\n        placement=\"top\"\n        triggers=\"focus\"\n        type=\"button\"\n      ></button>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          class=\"form-control\"\n          id=\"availabilitySelector\"\n          name=\"availabilitySelector\"\n          [(ngModel)]=\"selectedAvailability\"\n        >\n          <option\n            *ngFor=\"let availability of packageAvailability.availabilities\"\n            [ngValue]=\"availability.value\"\n          >\n            {{ availability.label | translate }}\n          </option>\n        </select>\n      </div>\n    </c8y-form-group>\n  </div>\n  <ng-template #appCreated>\n    <div\n      class=\"d-flex a-i-center j-c-center\"\n      style=\"min-height: 285px\"\n    >\n      <c8y-operation-result\n        class=\"lead\"\n        type=\"success\"\n        text=\"{{ successText | translate }}\"\n        [vertical]=\"true\"\n        [size]=\"84\"\n      ></c8y-operation-result>\n    </div>\n  </ng-template>\n  <ng-template #availabilityHelpPopover>\n    <div [innerHtml]=\"availabilityHelpPopoverText | translate\"></div>\n  </ng-template>\n</c8y-wizard-body>\n\n<c8y-wizard-footer>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Back' | translate }}\"\n    type=\"button\"\n    (click)=\"back()\"\n    *ngIf=\"!isAppCreated && canGoBack\"\n    translate\n  >\n    Back\n  </button>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"cancel()\"\n    *ngIf=\"!isAppCreated\"\n    translate\n  >\n    Cancel\n  </button>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Done' | translate }}\"\n    type=\"button\"\n    (click)=\"done()\"\n    *ngIf=\"isAppCreated\"\n    translate\n  >\n    Done\n  </button>\n  <a\n    class=\"btn btn-primary\"\n    title=\"{{ 'Open' | translate }}\"\n    target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n    *ngIf=\"isAppCreated && canOpenInBrowser\"\n    [href]=\"getHref(createdApp)\"\n    rel=\"noopener noreferrer\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"external-link\"\n    ></i>\n    {{ 'Open' | translate }}\n  </a>\n</c8y-wizard-footer>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }, { kind: "component", type: i2.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "component", type: i2.WizardHeaderComponent, selector: "c8y-wizard-header" }, { kind: "component", type: i2.WizardBodyComponent, selector: "c8y-wizard-body" }, { kind: "component", type: i2.WizardFooterComponent, selector: "c8y-wizard-footer" }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddApplicationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-add-application', template: "<c8y-wizard-header>\n  <i [c8yIcon]=\"headerIcon\"></i>\n  <h4 id=\"modal-title\">{{ headerText | translate }}</h4>\n</c8y-wizard-header>\n\n<c8y-wizard-body>\n  <p class=\"p-16 text-center text-medium separator-bottom sticky-top bg-component\">\n    {{ 'Upload a *.zip file' | translate }}\n  </p>\n  <c8y-form-group\n    class=\"m-t-16 m-l-auto m-r-auto\"\n    style=\"max-width: 265px\"\n    id=\"modal-body\"\n    *ngIf=\"!isAppCreated; else appCreated\"\n    [hasError]=\"!!errorMessage\"\n  >\n    <c8y-drop-area\n      class=\"drop-area\"\n      (dropped)=\"onFileDroppedEvent($event)\"\n      [accept]=\"'.zip'\"\n      [loading]=\"isLoading\"\n      [maxAllowedFiles]=\"1\"\n      [progress]=\"progress | async\"\n    ></c8y-drop-area>\n    <c8y-messages>\n      <c8y-message *ngIf=\"errorMessage\">\n        {{ errorMessage | translate }}\n      </c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n  <div class=\"card-block\" *ngIf=\"applicationType === 'package'\">\n    <c8y-form-group>\n      <label\n        class=\"m-r-8 d-inline-block\"\n        id=\"availabilitySelectorLabel\"\n        for=\"availabilitySelector\"\n      >\n        {{ 'Select extension availability' | translate }}\n      </label>\n      <button\n        class=\"btn-help btn-help--sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"availabilityHelpPopover\"\n        placement=\"top\"\n        triggers=\"focus\"\n        type=\"button\"\n      ></button>\n      <div class=\"c8y-select-wrapper\">\n        <select\n          class=\"form-control\"\n          id=\"availabilitySelector\"\n          name=\"availabilitySelector\"\n          [(ngModel)]=\"selectedAvailability\"\n        >\n          <option\n            *ngFor=\"let availability of packageAvailability.availabilities\"\n            [ngValue]=\"availability.value\"\n          >\n            {{ availability.label | translate }}\n          </option>\n        </select>\n      </div>\n    </c8y-form-group>\n  </div>\n  <ng-template #appCreated>\n    <div\n      class=\"d-flex a-i-center j-c-center\"\n      style=\"min-height: 285px\"\n    >\n      <c8y-operation-result\n        class=\"lead\"\n        type=\"success\"\n        text=\"{{ successText | translate }}\"\n        [vertical]=\"true\"\n        [size]=\"84\"\n      ></c8y-operation-result>\n    </div>\n  </ng-template>\n  <ng-template #availabilityHelpPopover>\n    <div [innerHtml]=\"availabilityHelpPopoverText | translate\"></div>\n  </ng-template>\n</c8y-wizard-body>\n\n<c8y-wizard-footer>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Back' | translate }}\"\n    type=\"button\"\n    (click)=\"back()\"\n    *ngIf=\"!isAppCreated && canGoBack\"\n    translate\n  >\n    Back\n  </button>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Cancel' | translate }}\"\n    type=\"button\"\n    (click)=\"cancel()\"\n    *ngIf=\"!isAppCreated\"\n    translate\n  >\n    Cancel\n  </button>\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Done' | translate }}\"\n    type=\"button\"\n    (click)=\"done()\"\n    *ngIf=\"isAppCreated\"\n    translate\n  >\n    Done\n  </button>\n  <a\n    class=\"btn btn-primary\"\n    title=\"{{ 'Open' | translate }}\"\n    target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n    *ngIf=\"isAppCreated && canOpenInBrowser\"\n    [href]=\"getHref(createdApp)\"\n    rel=\"noopener noreferrer\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"external-link\"\n    ></i>\n    {{ 'Open' | translate }}\n  </a>\n</c8y-wizard-footer>\n" }]
        }], ctorParameters: () => [{ type: i1.EcosystemService }, { type: i2.AlertService }, { type: i3.ApplicationService }, { type: i2.WizardComponent }, { type: i4.TranslateService }, { type: i5.PackageAvailabilityService }], propDecorators: { headerText: [{
                type: Input
            }], headerIcon: [{
                type: Input
            }], successText: [{
                type: Input
            }], createApplicationHandler: [{
                type: Input
            }], uploadApplicationHandler: [{
                type: Input
            }], canGoBack: [{
                type: Input
            }], applicationType: [{
                type: Input
            }], dropAreaComponent: [{
                type: ViewChild,
                args: [DropAreaComponent]
            }] } });
//# sourceMappingURL=data:application/json;base64, 