import { AXButtonModule } from '@acorex/components/button';
import { AXDataSource } from '@acorex/cdk/common';
import * as i1 from '@acorex/components/decorators';
import { AXDecoratorModule } from '@acorex/components/decorators';
import { AXDropdownModule } from '@acorex/components/dropdown';
import { AXPopoverModule } from '@acorex/components/popover';
import { AXPopupService } from '@acorex/components/popup';
import * as i3 from '@acorex/components/select-box';
import { AXSelectBoxModule } from '@acorex/components/select-box';
import { AXPlatform } from '@acorex/core/platform';
import { AXTranslationService } from '@acorex/core/translation';
import { AXPSessionService } from '@acorex/platform/auth';
import { AXPSettingService } from '@acorex/platform/common';
import { AXPPlatformScope } from '@acorex/platform/core';
import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { signal, inject, ChangeDetectorRef, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { d as AXMUserDeviceSessionsService } from './acorex-modules-auth-acorex-modules-auth-D1GLmcE-.mjs';

class AXMUserSessionsComponent {
    constructor() {
        this.AXPTokenExpirationDurations = {
            oneWeek: 'oneWeek',
            oneMonth: 'oneMonth',
            threeMonths: 'threeMonths',
            sixMonths: 'sixMonths',
        };
        this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
        this.activeSession = signal(undefined, ...(ngDevMode ? [{ debugName: "activeSession" }] : []));
        this.expireTime = signal(null, ...(ngDevMode ? [{ debugName: "expireTime" }] : []));
        this.expirationItems = [
            { name: 'Terminate in 1 week', id: this.AXPTokenExpirationDurations.oneWeek },
            { name: 'Terminate in 1 month', id: this.AXPTokenExpirationDurations.oneMonth },
            { name: 'Terminate in 3 month', id: this.AXPTokenExpirationDurations.threeMonths },
            { name: 'Terminate in 6 month', id: this.AXPTokenExpirationDurations.sixMonths },
        ];
        this.dataSource = new AXDataSource({
            pageSize: 10,
            key: 'id',
            load: async (e) => {
                let items = this.expirationItems;
                return {
                    items,
                    total: items.length,
                };
            },
        });
        this.userDeviceSessionsService = inject(AXMUserDeviceSessionsService);
        this.cdRef = inject(ChangeDetectorRef);
        this.popupService = inject(AXPopupService);
        this.platform = inject(AXPlatform);
        this.translateService = inject(AXTranslationService);
        this.sessionService = inject(AXPSessionService);
        this.settingService = inject(AXPSettingService);
        // ✅ Use a computed signal to update dynamically when items change
        this.itemsWithIcons = computed(() => this.items().map((item) => ({
            ...item,
            icon: this.getDeviceIcon(item.deviceName),
        })), ...(ngDevMode ? [{ debugName: "itemsWithIcons" }] : []));
        this.loadUserSessions();
    }
    async loadUserSessions() {
        try {
            let sessions = await this.userDeviceSessionsService.getSessions();
            this.items.set(sessions);
            try {
                const activeSession = await this.userDeviceSessionsService.getCurrentActiveSessions();
                this.activeSession.set(activeSession);
            }
            catch (error) {
                console.warn('No active session found:', error);
                this.activeSession.set(undefined);
            }
            const sessionTimeout = await this.settingService.scope(AXPPlatformScope.User).get('session-timeout');
            if (sessionTimeout && sessionTimeout.id in this.AXPTokenExpirationDurations) {
                let selectedItem = this.expirationItems.find((item) => item.id === sessionTimeout.id);
                if (selectedItem) {
                    this.expireTime.set({ name: selectedItem.name, id: selectedItem.id });
                }
            }
        }
        catch (error) {
            console.error('Error loading user sessions', error);
        }
    }
    getDeviceIcon(deviceName) {
        if (!deviceName)
            return 'fa-solid fa-question'; // Default icon if no name is provided
        const lowerCaseName = deviceName.toLowerCase();
        if (lowerCaseName.includes('windows'))
            return 'fa-brands fa-windows';
        if (lowerCaseName.includes('macbook') || lowerCaseName.includes('mac'))
            return 'fa-brands fa-apple';
        if (lowerCaseName.includes('linux'))
            return 'fa-brands fa-linux';
        if (lowerCaseName.includes('android'))
            return 'fa-brands fa-android';
        if (lowerCaseName.includes('ios') || lowerCaseName.includes('iphone') || lowerCaseName.includes('ipad'))
            return 'fa-brands fa-apple';
        return 'fa-solid fa-desktop'; // Default icon for unknown devices
    }
    onChangeSessionExpireTime(e) {
        this.userDeviceSessionsService.setTokenLifetimeMinutes(e.component.selectedItems[0]);
    }
    async onTerminate(sessionId) {
        if (!sessionId) {
            console.error('No item to terminate');
            return;
        }
        await this.userDeviceSessionsService.terminateSession(sessionId);
        await this.loadUserSessions();
    }
    async onTerminateAll() {
        await this.userDeviceSessionsService.terminateAllSession();
        await this.loadUserSessions();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXMUserSessionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXMUserSessionsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"ax-mx-auto ax-p-6 ax-w-full\">\n  <p class=\"ax-font-semibold ax-text-base ax-text-on-lightest ax-mb-4\">This Device</p>\n  <div\n    class=\"ax-flex ax-border ax-items-center ax-rounded-lg ax-border-lightest ax-bg-lightest ax-text-on-lightest ax-mb-3 ax-p-3\"\n    >\n    <div class=\"ax-border-primary-200 ax-border ax-bg-primary-50 ax-rounded-lg\">\n      <i class=\"{{ getDeviceIcon(activeSession()?.deviceName) }} ax-text-primary-500 ax-m-3\"></i>\n    </div>\n    @if (activeSession()) {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-ml-2\">\n          <div class=\"ax-font-medium ax-text-base ax-text-on-lightest\">{{ activeSession()?.deviceName }}</div>\n          <div class=\"ax-font-normal ax-text-sm ax-text-on-lightest\">{{ activeSession()?.operatingSystem }}</div>\n          <p class=\"ax-font-normal ax-text-xs ax-subtitle-on-lightest\">\n            {{ activeSession()?.location }} <span>\n              {{ activeSession()?.lastLoginDate ? (activeSession()?.lastLoginDate | date: 'yyyy/MM/dd HH:mm') : '' }}\n            </span>\n          </p>\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (itemsWithIcons() && itemsWithIcons().length > 0) {\n    <div\n      class=\"ax-flex ax-border ax-items-center ax-rounded-lg ax-border-lightest ax-bg-lightest ax-text-on-lightest ax-mb-3 ax-p-3\"\n      >\n      <div class=\"ax-border-danger-200 ax-border ax-bg-danger-50 ax-rounded-lg\">\n        <i class=\"ax-icon ax-icon-clear ax-text-danger-500 ax-m-3\"></i>\n      </div>\n      <div class=\"ax-flex ax-flex-col ax-ml-2 ax-cursor-pointer\" (click)=\"onTerminateAll()\">\n        <div class=\"ax-font-medium ax-text-base ax-text-on-lightest\">Terminate All Other Sessions</div>\n        <p class=\"ax-font-normal ax-text-sm ax-subtitle-on-lightest\">Log out all devices exept for this one.</p>\n      </div>\n    </div>\n  }\n  @if (itemsWithIcons() && itemsWithIcons().length > 0) {\n    <div>\n      <p class=\"ax-font-semibold ax-text-base ax-text-on-lightest ax-mt-4 ax-mb-4\">Active Devices</p>\n      @for (item of itemsWithIcons(); track item) {\n        <div>\n          <div\n            class=\"ax-flex ax-border ax-items-center ax-relative ax-rounded-lg ax-border-lightest ax-bg-lightest ax-text-on-lightest ax-mb-3 ax-p-3\"\n            >\n            <i\n              class=\"ax-icon ax-icon-close ax-absolute ax-end-2 ax-top-2 ax-cursor-pointer\"\n              (click)=\"onTerminate(item.id)\"\n            ></i>\n            <div class=\"ax-border ax-rounded-lg\">\n              <i class=\"{{ item.icon }} ax-m-3\"></i>\n            </div>\n            <div class=\"ax-flex ax-flex-col ax-ml-2\">\n              <div class=\"ax-font-medium ax-text-base ax-text-on-lightest\">{{ item.deviceName }}</div>\n              <div class=\"ax-font-normal ax-text-sm ax-text-on-lightest\">{{ item.operatingSystem }}</div>\n              <p class=\"ax-font-normal ax-text-xs ax-subtitle-on-lightest\">\n                {{ item.location }} <span>{{ item.lastLoginDate ? (item.lastLoginDate | date: 'yyyy/MM/dd HH:mm') : '' }}</span>\n              </p>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n<ax-footer>\n  <div class=\"ax-flex-col ax-w-full\">\n    <div>\n      <p class=\"ax-text-danger-500 ax-font-medium ax-text-base\">Terminate Old Sessions</p>\n    </div>\n    <div>\n      <ax-suffix>\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-mt-4\">\n          <div class=\"ax-font-normal ax-text-base ax-text-on-lightest\">If inactive for...</div>\n          <div class=\"ax-w-3/6\">\n            <ax-select-box\n              [ngModel]=\"expireTime()\"\n              (onValueChanged)=\"onChangeSessionExpireTime($event)\"\n              [dataSource]=\"dataSource\"\n              textField=\"name\"\n              valueField=\"id\"\n              placeholder=\"Choose...\"\n              >\n            </ax-select-box>\n          </div>\n        </div>\n      </ax-suffix>\n    </div>\n  </div>\n</ax-footer>\n", dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXMUserSessionsComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        AXButtonModule,
                        AXDecoratorModule,
                        CommonModule,
                        FormsModule,
                        AXSelectBoxModule,
                        AXDropdownModule,
                        AXPopoverModule,
                    ], template: "<div class=\"ax-mx-auto ax-p-6 ax-w-full\">\n  <p class=\"ax-font-semibold ax-text-base ax-text-on-lightest ax-mb-4\">This Device</p>\n  <div\n    class=\"ax-flex ax-border ax-items-center ax-rounded-lg ax-border-lightest ax-bg-lightest ax-text-on-lightest ax-mb-3 ax-p-3\"\n    >\n    <div class=\"ax-border-primary-200 ax-border ax-bg-primary-50 ax-rounded-lg\">\n      <i class=\"{{ getDeviceIcon(activeSession()?.deviceName) }} ax-text-primary-500 ax-m-3\"></i>\n    </div>\n    @if (activeSession()) {\n      <div>\n        <div class=\"ax-flex ax-flex-col ax-ml-2\">\n          <div class=\"ax-font-medium ax-text-base ax-text-on-lightest\">{{ activeSession()?.deviceName }}</div>\n          <div class=\"ax-font-normal ax-text-sm ax-text-on-lightest\">{{ activeSession()?.operatingSystem }}</div>\n          <p class=\"ax-font-normal ax-text-xs ax-subtitle-on-lightest\">\n            {{ activeSession()?.location }} <span>\n              {{ activeSession()?.lastLoginDate ? (activeSession()?.lastLoginDate | date: 'yyyy/MM/dd HH:mm') : '' }}\n            </span>\n          </p>\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (itemsWithIcons() && itemsWithIcons().length > 0) {\n    <div\n      class=\"ax-flex ax-border ax-items-center ax-rounded-lg ax-border-lightest ax-bg-lightest ax-text-on-lightest ax-mb-3 ax-p-3\"\n      >\n      <div class=\"ax-border-danger-200 ax-border ax-bg-danger-50 ax-rounded-lg\">\n        <i class=\"ax-icon ax-icon-clear ax-text-danger-500 ax-m-3\"></i>\n      </div>\n      <div class=\"ax-flex ax-flex-col ax-ml-2 ax-cursor-pointer\" (click)=\"onTerminateAll()\">\n        <div class=\"ax-font-medium ax-text-base ax-text-on-lightest\">Terminate All Other Sessions</div>\n        <p class=\"ax-font-normal ax-text-sm ax-subtitle-on-lightest\">Log out all devices exept for this one.</p>\n      </div>\n    </div>\n  }\n  @if (itemsWithIcons() && itemsWithIcons().length > 0) {\n    <div>\n      <p class=\"ax-font-semibold ax-text-base ax-text-on-lightest ax-mt-4 ax-mb-4\">Active Devices</p>\n      @for (item of itemsWithIcons(); track item) {\n        <div>\n          <div\n            class=\"ax-flex ax-border ax-items-center ax-relative ax-rounded-lg ax-border-lightest ax-bg-lightest ax-text-on-lightest ax-mb-3 ax-p-3\"\n            >\n            <i\n              class=\"ax-icon ax-icon-close ax-absolute ax-end-2 ax-top-2 ax-cursor-pointer\"\n              (click)=\"onTerminate(item.id)\"\n            ></i>\n            <div class=\"ax-border ax-rounded-lg\">\n              <i class=\"{{ item.icon }} ax-m-3\"></i>\n            </div>\n            <div class=\"ax-flex ax-flex-col ax-ml-2\">\n              <div class=\"ax-font-medium ax-text-base ax-text-on-lightest\">{{ item.deviceName }}</div>\n              <div class=\"ax-font-normal ax-text-sm ax-text-on-lightest\">{{ item.operatingSystem }}</div>\n              <p class=\"ax-font-normal ax-text-xs ax-subtitle-on-lightest\">\n                {{ item.location }} <span>{{ item.lastLoginDate ? (item.lastLoginDate | date: 'yyyy/MM/dd HH:mm') : '' }}</span>\n              </p>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n<ax-footer>\n  <div class=\"ax-flex-col ax-w-full\">\n    <div>\n      <p class=\"ax-text-danger-500 ax-font-medium ax-text-base\">Terminate Old Sessions</p>\n    </div>\n    <div>\n      <ax-suffix>\n        <div class=\"ax-flex ax-items-center ax-justify-between ax-mt-4\">\n          <div class=\"ax-font-normal ax-text-base ax-text-on-lightest\">If inactive for...</div>\n          <div class=\"ax-w-3/6\">\n            <ax-select-box\n              [ngModel]=\"expireTime()\"\n              (onValueChanged)=\"onChangeSessionExpireTime($event)\"\n              [dataSource]=\"dataSource\"\n              textField=\"name\"\n              valueField=\"id\"\n              placeholder=\"Choose...\"\n              >\n            </ax-select-box>\n          </div>\n        </div>\n      </ax-suffix>\n    </div>\n  </div>\n</ax-footer>\n" }]
        }], ctorParameters: () => [] });

export { AXMUserSessionsComponent };
//# sourceMappingURL=acorex-modules-auth-user-sessions.component-Bfb74eNc.mjs.map
