import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { CoreModule, gettext } from '@c8y/ngx-components';
import { Lwm2mUIThemeModule } from '@c8y/ngx-components/protocol-lwm2m/formly';
import { Lwm2mConfigurationService } from '@c8y/ngx-components/protocol-lwm2m/services';
import { Lwm2mFormSingleServerSettings } from './single-server-settings.component';
import { map, takeUntil } from 'rxjs/operators';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { Lwm2mFormCreateSingleServerSettings } from './create-single-server-settings.component';
import { Subject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@c8y/ngx-components/protocol-lwm2m/services";
import * as i2 from "@angular/router";
import * as i3 from "@c8y/ngx-components";
import * as i4 from "@angular/common";
import * as i5 from "@angular/forms";
export class Lwm2mFormServerSettings {
    constructor(service, route, router) {
        this.service = service;
        this.route = route;
        this.router = router;
        this.destroy$ = new Subject();
        this.listelements$ = this.service.servers$.pipe(map(servers => servers.map(server => ({
            title: server.uri || gettext('Invalid server configuration'),
            icon: 'server',
            id: server.id
        }))));
    }
    ngOnInit() {
        this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe(({ id }) => {
            this.id = id;
            this.service.listServers();
            this.createComponent(id);
        });
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    select(id) {
        this.router.navigate([], {
            relativeTo: this.route,
            queryParams: { id },
            queryParamsHandling: 'merge'
        });
    }
    createComponent(id) {
        this.formContainer.clear();
        this.cmp = null;
        if (!id)
            return;
        this.componentRef = this.formContainer.createComponent(id !== 'create' ? Lwm2mFormSingleServerSettings : Lwm2mFormCreateSingleServerSettings);
        this.cmp = this.componentRef?.instance;
        this.cmp.id = id;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Lwm2mFormServerSettings, deps: [{ token: i1.Lwm2mConfigurationService }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Lwm2mFormServerSettings, isStandalone: true, selector: "c8y-lwm2m-form-server-settings", viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["singleServerForm"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"split-view--5-7 grid__row--1 fit-h\">\n  <div class=\"inner-scroll split-view__list\">\n    <div class=\"bg-level-1 flex-grow\">\n      <ng-container *ngIf=\"listelements$ | async as list\">\n        <ng-container *ngIf=\"list.length > 0 || id === 'create'; else empty\">\n          <c8y-list-group class=\"c8y-list__group nav c8y-nav-stacked\">\n            <c8y-li\n              class=\"c8y-stacked-item p-0 active\"\n              *ngIf=\"id === 'create'\"\n            >\n              <c8y-li-icon icon=\"server\"></c8y-li-icon>\n              <span title=\"{{ 'New server' | translate }}\">\n                {{ 'New server' | translate }}\n              </span>\n            </c8y-li>\n            <c8y-li\n              class=\"c8y-stacked-item p-0\"\n              [class.active]=\"el.id === id\"\n              *ngFor=\"let el of list\"\n              (click)=\"select(el.id)\"\n            >\n              <c8y-li-icon [icon]=\"el.icon\"></c8y-li-icon>\n              <span title=\"{{ el.title }}\">\n                {{ el.title }}\n              </span>\n            </c8y-li>\n          </c8y-list-group>\n        </ng-container>\n        <ng-template #empty>\n          <div class=\"card-block\">\n            <c8y-ui-empty-state\n              [icon]=\"'stack'\"\n              [title]=\"'No servers found.' | translate\"\n              [subtitle]=\"'Click below to add a new server.' | translate\"\n            ></c8y-ui-empty-state>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n    <div class=\"card-footer separator-top\">\n      <button\n        class=\"btn btn-default\"\n        title=\"{{ 'Add server' | translate }}\"\n        [disabled]=\"id === 'create'\"\n        (click)=\"select('create')\"\n      >\n        <i [c8yIcon]=\"'plus-circle'\"></i>\n        {{ 'Add server' | translate }}\n      </button>\n    </div>\n  </div>\n  <form class=\"d-contents\">\n    <div\n      class=\"inner-scroll split-view__detail\"\n      [ngClass]=\"{ 'split-view__detail--selected': cmp?.fields?.length > 0 }\"\n    >\n      <div class=\"card-header separator visible-sm visible-xs fit-w sticky-top\">\n        <button\n          class=\"btn btn-clean text-primary\"\n          title=\"{{ 'Back' | translate }}\"\n          type=\"button\"\n          (click)=\"cmp?.cancel()\"\n        >\n          <i c8y-icon=\"chevron-left\"></i>\n          <span>{{ 'Back' | translate }}</span>\n        </button>\n      </div>\n      <div class=\"card-block flex-grow overflow-visible\">\n        <ng-container *ngIf=\"!cmp?.fields?.length\">\n          <c8y-ui-empty-state\n            [icon]=\"'stack'\"\n            title=\"{{ 'No server to display.' | translate }}\"\n            subtitle=\"{{ 'Add or select a server.' | translate }}\"\n          ></c8y-ui-empty-state>\n          <div\n            class=\"alert alert-info\"\n            role=\"alert\"\n          >\n            <strong>{{ 'Info' | translate }}</strong>\n            {{\n              'Configured servers are written as soon as the device does a bootstrap connection.'\n                | translate\n            }}\n          </div>\n        </ng-container>\n        <ng-container #singleServerForm></ng-container>\n      </div>\n      <div\n        class=\"card-footer separator sticky-bottom bg-level-0\"\n        *ngIf=\"cmp?.fields?.length > 0\"\n      >\n        <button\n          class=\"btn btn-default\"\n          title=\"{{ 'Cancel' | translate }}\"\n          type=\"button\"\n          (click)=\"cmp.cancel()\"\n        >\n          {{ 'Cancel' | translate }}\n        </button>\n\n        <ng-container *ngIf=\"id !== 'create'; else createServer\">\n          <button\n            class=\"btn btn-danger\"\n            title=\"{{ 'Delete' | translate }}\"\n            type=\"button\"\n            [disabled]=\"cmp.options?.formState?.disabled || false\"\n            (click)=\"cmp.delete()\"\n          >\n            {{ 'Delete' | translate }}\n          </button>\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Save' | translate }}\"\n            type=\"button\"\n            [disabled]=\"cmp.form?.invalid || !cmp.form?.dirty\"\n            (click)=\"cmp.save()\"\n          >\n            {{ 'Save' | translate }}\n          </button>\n        </ng-container>\n        <ng-template #createServer>\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Create' | translate }}\"\n            type=\"button\"\n            [disabled]=\"cmp.form?.invalid || !cmp.form?.dirty\"\n            (click)=\"cmp.create()\"\n          >\n            {{ 'Create' | translate }}\n          </button>\n        </ng-template>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { 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: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "ngmodule", type: Lwm2mUIThemeModule }, { kind: "ngmodule", type: RouterModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Lwm2mFormServerSettings, decorators: [{
            type: Component,
            args: [{ imports: [CoreModule, Lwm2mUIThemeModule, Lwm2mFormSingleServerSettings, RouterModule], standalone: true, selector: 'c8y-lwm2m-form-server-settings', template: "<div class=\"split-view--5-7 grid__row--1 fit-h\">\n  <div class=\"inner-scroll split-view__list\">\n    <div class=\"bg-level-1 flex-grow\">\n      <ng-container *ngIf=\"listelements$ | async as list\">\n        <ng-container *ngIf=\"list.length > 0 || id === 'create'; else empty\">\n          <c8y-list-group class=\"c8y-list__group nav c8y-nav-stacked\">\n            <c8y-li\n              class=\"c8y-stacked-item p-0 active\"\n              *ngIf=\"id === 'create'\"\n            >\n              <c8y-li-icon icon=\"server\"></c8y-li-icon>\n              <span title=\"{{ 'New server' | translate }}\">\n                {{ 'New server' | translate }}\n              </span>\n            </c8y-li>\n            <c8y-li\n              class=\"c8y-stacked-item p-0\"\n              [class.active]=\"el.id === id\"\n              *ngFor=\"let el of list\"\n              (click)=\"select(el.id)\"\n            >\n              <c8y-li-icon [icon]=\"el.icon\"></c8y-li-icon>\n              <span title=\"{{ el.title }}\">\n                {{ el.title }}\n              </span>\n            </c8y-li>\n          </c8y-list-group>\n        </ng-container>\n        <ng-template #empty>\n          <div class=\"card-block\">\n            <c8y-ui-empty-state\n              [icon]=\"'stack'\"\n              [title]=\"'No servers found.' | translate\"\n              [subtitle]=\"'Click below to add a new server.' | translate\"\n            ></c8y-ui-empty-state>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n    <div class=\"card-footer separator-top\">\n      <button\n        class=\"btn btn-default\"\n        title=\"{{ 'Add server' | translate }}\"\n        [disabled]=\"id === 'create'\"\n        (click)=\"select('create')\"\n      >\n        <i [c8yIcon]=\"'plus-circle'\"></i>\n        {{ 'Add server' | translate }}\n      </button>\n    </div>\n  </div>\n  <form class=\"d-contents\">\n    <div\n      class=\"inner-scroll split-view__detail\"\n      [ngClass]=\"{ 'split-view__detail--selected': cmp?.fields?.length > 0 }\"\n    >\n      <div class=\"card-header separator visible-sm visible-xs fit-w sticky-top\">\n        <button\n          class=\"btn btn-clean text-primary\"\n          title=\"{{ 'Back' | translate }}\"\n          type=\"button\"\n          (click)=\"cmp?.cancel()\"\n        >\n          <i c8y-icon=\"chevron-left\"></i>\n          <span>{{ 'Back' | translate }}</span>\n        </button>\n      </div>\n      <div class=\"card-block flex-grow overflow-visible\">\n        <ng-container *ngIf=\"!cmp?.fields?.length\">\n          <c8y-ui-empty-state\n            [icon]=\"'stack'\"\n            title=\"{{ 'No server to display.' | translate }}\"\n            subtitle=\"{{ 'Add or select a server.' | translate }}\"\n          ></c8y-ui-empty-state>\n          <div\n            class=\"alert alert-info\"\n            role=\"alert\"\n          >\n            <strong>{{ 'Info' | translate }}</strong>\n            {{\n              'Configured servers are written as soon as the device does a bootstrap connection.'\n                | translate\n            }}\n          </div>\n        </ng-container>\n        <ng-container #singleServerForm></ng-container>\n      </div>\n      <div\n        class=\"card-footer separator sticky-bottom bg-level-0\"\n        *ngIf=\"cmp?.fields?.length > 0\"\n      >\n        <button\n          class=\"btn btn-default\"\n          title=\"{{ 'Cancel' | translate }}\"\n          type=\"button\"\n          (click)=\"cmp.cancel()\"\n        >\n          {{ 'Cancel' | translate }}\n        </button>\n\n        <ng-container *ngIf=\"id !== 'create'; else createServer\">\n          <button\n            class=\"btn btn-danger\"\n            title=\"{{ 'Delete' | translate }}\"\n            type=\"button\"\n            [disabled]=\"cmp.options?.formState?.disabled || false\"\n            (click)=\"cmp.delete()\"\n          >\n            {{ 'Delete' | translate }}\n          </button>\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Save' | translate }}\"\n            type=\"button\"\n            [disabled]=\"cmp.form?.invalid || !cmp.form?.dirty\"\n            (click)=\"cmp.save()\"\n          >\n            {{ 'Save' | translate }}\n          </button>\n        </ng-container>\n        <ng-template #createServer>\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Create' | translate }}\"\n            type=\"button\"\n            [disabled]=\"cmp.form?.invalid || !cmp.form?.dirty\"\n            (click)=\"cmp.create()\"\n          >\n            {{ 'Create' | translate }}\n          </button>\n        </ng-template>\n      </div>\n    </div>\n  </form>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.Lwm2mConfigurationService }, { type: i2.ActivatedRoute }, { type: i2.Router }], propDecorators: { formContainer: [{
                type: ViewChild,
                args: ['singleServerForm', { read: ViewContainerRef, static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 