import * as i3$1 from '@acorex/components/badge';
import { AXBadgeModule } from '@acorex/components/badge';
import * as i6 from '@acorex/components/button';
import { AXButtonModule } from '@acorex/components/button';
import * as i4 from '@acorex/components/check-box';
import { AXCheckBoxModule } from '@acorex/components/check-box';
import * as i2 from '@acorex/components/decorators';
import { AXDecoratorModule } from '@acorex/components/decorators';
import * as i8 from '@acorex/components/dropdown';
import { AXDropdownModule } from '@acorex/components/dropdown';
import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
import * as i10 from '@acorex/components/label';
import { AXLabelModule } from '@acorex/components/label';
import * as i9 from '@acorex/components/search-box';
import { AXSearchBoxModule } from '@acorex/components/search-box';
import * as i5 from '@acorex/components/skeleton';
import { AXSkeletonModule } from '@acorex/components/skeleton';
import * as i11 from '@acorex/components/sliding-item';
import { AXSlidingItemModule } from '@acorex/components/sliding-item';
import * as i2$2 from '@acorex/core/format';
import { AXFormatModule } from '@acorex/core/format';
import { AXPUserAvatarComponent, AXPThemeLayoutBlockComponent, AXPStateMessageComponent } from '@acorex/platform/layout/components';
import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
import * as i2$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, signal, viewChild, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i3 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { AXContextMenuComponent } from '@acorex/components/menu';
import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
import { AXMNotificationConnectorService, AXPNotificationDefinitionService } from './acorex-modules-notification-management.mjs';

//#region ----   Component Definition   ----
class AXMNotificationPageComponent extends AXPPageLayoutBaseComponent {
    constructor() {
        super(...arguments);
        //#region ----   Services & Dependencies   ----
        this.layoutThemeService = inject(AXPLayoutThemeService);
        this.connector = inject(AXMNotificationConnectorService);
        this.definitionService = inject(AXPNotificationDefinitionService);
        //#endregion
        //#region ----   State & Computed Properties   ----
        this.loading = this.connector.loading;
        this.errorMessage = this.connector.errorMessage;
        this.notifications = this.connector.notificationList;
        this.unreadCount = this.connector.unreadCount;
        this.totalCount = this.connector.total;
        // Local UI state
        this.searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
        this.isEditing = signal(false, ...(ngDevMode ? [{ debugName: "isEditing" }] : []));
        this.contextMenu = viewChild('contextMenu', ...(ngDevMode ? [{ debugName: "contextMenu" }] : []));
        // #isEditingEff = effect(() => {
        // if (this.isEditing() && this.selectedIds().size === 0) {
        //   this.isEditing.set(false);
        // }
        // });
        this.filteredNotifications = computed(() => {
            const query = (this.searchQuery() || '').toLowerCase().trim();
            const items = this.notifications();
            if (!query) {
                return this.activeTab() === 'unread' ? items.filter((n) => !n.readAt) : items;
            }
            const base = this.activeTab() === 'unread' ? items.filter((n) => !n.readAt) : items;
            return base.filter((n) => {
                const title = (n.title || '').toLowerCase();
                const body = (n.body || '').toLowerCase();
                const sender = (n.sender?.fullName || '').toLowerCase();
                return title.includes(query) || body.includes(query) || sender.includes(query);
            });
        }, ...(ngDevMode ? [{ debugName: "filteredNotifications" }] : []));
        // Tab state: 'all' | 'unread'
        this.tab = signal('all', ...(ngDevMode ? [{ debugName: "tab" }] : []));
        this.activeTab = computed(() => this.tab(), ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
        // Selection state for bulk actions
        this.selectedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
        this.selectedCount = computed(() => this.selectedIds().size, ...(ngDevMode ? [{ debugName: "selectedCount" }] : []));
        this.contextItem = signal(null, ...(ngDevMode ? [{ debugName: "contextItem" }] : []));
    }
    selectedTab() {
        return this.tab();
    }
    setTab(v) {
        this.tab.set(v);
    }
    onTabChange(index) {
        this.tab.set(index === 1 ? 'unread' : 'all');
    }
    //#endregion
    //#region ----   Page Interface Methods   ----
    async getPageTitle() {
        return 'Notifications';
    }
    getPageDescription() {
        const unread = this.unreadCount();
        const total = this.totalCount();
        if (!total) {
            return 'No notifications';
        }
        return unread > 0 ? `${unread} unread out of ${total}` : `${total} notifications`;
    }
    async getPrimaryMenuItems() {
        const items = [];
        if (this.selectedCount() > 0) {
            items.push({
                title: 'Delete',
                icon: 'fa-light fa-trash',
                command: { name: 'delete-selected' },
                color: 'danger',
            });
            items.push({
                title: 'Mark as read',
                icon: 'fa-light fa-envelopes-bulk',
                command: { name: 'mark-selected-as-read' },
                color: 'primary',
            });
        }
        return items;
    }
    async getSecondaryMenuItems() {
        const items = [];
        if (this.selectedCount() === 0) {
            items.push({
                title: 'Refresh',
                icon: 'fa-light fa-rotate',
                command: { name: 'refresh' },
            }, {
                title: 'Mark all as read',
                icon: 'fa-light fa-envelopes-bulk',
                command: { name: 'mark-all-as-read' },
                disabled: this.unreadCount() === 0,
            }, {
                title: 'Select items',
                icon: 'fa-light fa-pen',
                command: { name: 'edit-mode' },
                color: 'primary',
            });
        }
        return items;
    }
    async execute(command) {
        switch (command.name) {
            case 'refresh':
                await this.onRefresh();
                if (this.isEditing()) {
                    this.isEditing.set(false);
                }
                break;
            case 'delete-selected':
                await this.deleteSelected();
                if (this.isEditing()) {
                    this.isEditing.set(false);
                }
                break;
            case 'mark-selected-as-read':
                await this.markSelectedAsRead();
                if (this.isEditing()) {
                    this.isEditing.set(false);
                }
                break;
            case 'mark-all-as-read':
                await this.onMarkAllAsRead();
                if (this.isEditing()) {
                    this.isEditing.set(false);
                }
                break;
            case 'edit-mode':
                if (this.isEditing()) {
                    this.deselectAll();
                    this.isEditing.set(false);
                }
                else {
                    this.isEditing.set(true);
                }
                break;
        }
    }
    //#endregion
    //#region ----   UI Handlers   ----
    onSearch(value) {
        this.searchQuery.set(value);
    }
    onClearSearch() {
        this.searchQuery.set('');
    }
    async onRefresh() {
        await this.connector.getList();
    }
    async onMarkAllAsRead() {
        await this.connector.markAllAsRead();
    }
    isSelected(id) {
        return this.selectedIds().has(id);
    }
    toggleSelectionWithModel(id, checked) {
        const next = new Set(this.selectedIds());
        if (checked) {
            next.add(id);
        }
        else {
            next.delete(id);
        }
        this.selectedIds.set(next);
    }
    isAllSelected() {
        const items = this.filteredNotifications();
        return items.length > 0 && items.every((i) => this.selectedIds().has(i.id));
    }
    toggleSelectAll(event) {
        const checked = event.target.checked;
        if (checked) {
            this.selectedIds.set(new Set(this.filteredNotifications().map((i) => i.id)));
        }
        else {
            this.selectedIds.set(new Set());
        }
    }
    async markSelectedAsRead(item) {
        const ids = item ? [item.id] : Array.from(this.selectedIds());
        if (ids.length === 0)
            return;
        await this.connector.markAsRead({ id: ids });
        this.selectedIds.set(new Set());
    }
    async deleteSelected(item) {
        const ids = item ? [item.id] : Array.from(this.selectedIds());
        if (ids.length === 0)
            return;
        for (const id of ids) {
            await this.connector.deleteOne(id);
        }
        this.selectedIds.set(new Set());
    }
    deselectAll() {
        if (this.selectedCount() > 0) {
            this.selectedIds.set(new Set());
        }
        if (this.isEditing()) {
            this.isEditing.set(false);
        }
    }
    // Row interactions
    onRowClick(id) {
        this.toggleSelectionById(id);
    }
    async openItem(id) {
        if (this.isEditing()) {
            this.toggleSelectionById(id);
            return;
        }
        //avoid double click on selected items
        if (this.selectedCount() > 0) {
            return;
        }
        const item = this.notifications().find((n) => n.id === id);
        if (!item) {
            return;
        }
        // Mark as read (idempotent per service logic)
        await this.connector.markAsRead({ id: [id] });
        // Execute provider click action if available
        const provider = this.definitionService.resolve(item.type);
        await provider?.execute?.({ name: 'click' }, item);
    }
    toggleSelectionById(id) {
        const next = new Set(this.selectedIds());
        if (next.has(id)) {
            next.delete(id);
        }
        else {
            next.add(id);
        }
        this.selectedIds.set(next);
    }
    //#endregion
    slidingItemsHandler(item, action) {
        switch (action) {
            case 'mark-as-read':
                this.markSelectedAsRead(item);
                break;
            case 'delete':
                this.deleteSelected(item);
                break;
        }
    }
    handleContextMenuItemClick(e) {
        const item = this.contextItem();
        if (!item) {
            return;
        }
        switch (e.item.name) {
            case 'mark-as-read':
                this.markSelectedAsRead(item);
                break;
            case 'delete':
                this.deleteSelected(item);
                break;
        }
    }
    handleContextMenuOpening(e) {
        e.items = [
            {
                name: 'mark-as-read',
                text: 'Mark as read',
                icon: 'fa-light fa-envelopes-bulk',
                color: 'primary',
            },
        ];
        e.items.push({
            name: 'delete',
            text: 'Delete',
            icon: 'fa-light fa-trash-can',
            color: 'danger',
        });
    }
    openContextMenu(e, item) {
        if (this.isEditing() || this.selectedCount() > 0) {
            return;
        }
        e.preventDefault();
        this.contextMenu()?.showAt({
            x: e.clientX,
            y: e.clientY,
        });
        this.contextItem.set(item);
    }
    //#region ----   Helper Methods for State Message   ----
    getNotificationIcon() {
        if (this.searchQuery()) {
            return 'fa-solid fa-magnifying-glass';
        }
        else if (this.activeTab() === 'unread') {
            return 'fa-solid fa-check-circle';
        }
        else {
            return 'fa-solid fa-bell';
        }
    }
    getNotificationTitle() {
        if (this.searchQuery()) {
            return '@notification-management:state-message.no-results.title';
        }
        else if (this.activeTab() === 'unread') {
            return '@notification-management:state-message.all-caught-up.title';
        }
        else {
            return '@notification-management:state-message.no-notifications.title';
        }
    }
    getNotificationDescription() {
        if (this.searchQuery()) {
            return `We couldn't find anything matching "${this.searchQuery()}".`;
        }
        else if (this.activeTab() === 'unread') {
            return '@notification-management:state-message.all-caught-up.description';
        }
        else {
            return '@notification-management:state-message.no-notifications.description';
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXMNotificationPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXMNotificationPageComponent, isStandalone: true, selector: "axm-notification-page", host: { listeners: { "document:keydown.escape": "deselectAll()" } }, providers: [
            {
                provide: AXPPageLayoutBase,
                useExisting: AXMNotificationPageComponent,
            },
        ], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
    <axp-page-layout>
      <axp-page-toolbar>
        <axp-layout-prefix>
          @if (selectedCount() > 0 || isEditing()) {
            <div class="ax-flex ax-gap-3 ax-items-center ax-h-10">
              <span class="ax-text-xl ax-font-bold">{{ selectedCount() }} items selected</span>
              <span (click)="deselectAll()" class="ax-text-sm ax-text-secondary ax-underline ax-cursor-pointer"
                >Unselect</span
              >
            </div>
          } @else {
            <ax-button [text]="activeTab() === 'all' ? 'All Notifications' : 'Unread Notifications'">
              <ax-dropdown-panel >
                <ax-button-item-list class="ax-min-w-52">
                  <ax-button-item
                    [text]="'All notifications'"
                    [selected]="activeTab() === 'all'"
                    (onClick)="setTab('all')"
                  ></ax-button-item>
                  <ax-button-item
                    [text]="'Unread Notifications'"
                    [selected]="activeTab() === 'unread'"
                    (onClick)="setTab('unread')"
                  >
                    <ax-suffix>
                      <ax-badge [text]="unreadCount().toString()" [color]="'primary'"></ax-badge>
                    </ax-suffix>
                  </ax-button-item>
                </ax-button-item-list>
              </ax-dropdown-panel>
            </ax-button>

            <ax-search-box
              look="solid"
              [placeholder]="'Search notifications'"
              [value]="searchQuery()"
              (onValueChanged)="onSearch($event.value)"
              class="ax-w-72 ax-hidden md:ax-flex"
            >
              <ax-clear-button></ax-clear-button>
            </ax-search-box>
          }
        </axp-layout-prefix>
        <!-- <axp-layout-suffix>
          @if (selectedCount() > 0) {
            <div class="ax-flex ax-gap-2">
              @if (activeTab() === 'unread') {
                <ax-button [text]="'Mark as read'" (onClick)="markSelectedAsRead()"></ax-button>
              }
              <ax-button look="outline" color="danger" [text]="'Delete'" (onClick)="deleteSelected()"></ax-button>
            </div>
          }
        </axp-layout-suffix> -->
      </axp-page-toolbar>
      <axp-page-content>
        <div class="ax-flex ax-flex-col ax-gap-4">
          <!-- List -->
          @if (loading()) {
            <div class="ax-p-4 ax-space-y-4">
              @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {
                <div class="ax-flex ax-items-center ax-space-x-3">
                  <ax-skeleton [animated]="true" class="ax-w-12 ax-h-12 ax-rounded-full"></ax-skeleton>
                  <div class="ax-flex-1 ax-space-y-2">
                    <ax-skeleton [animated]="true" class="ax-w-3/4 ax-h-4 ax-rounded-md"></ax-skeleton>
                    <ax-skeleton [animated]="true" class="ax-w-1/2 ax-h-3 ax-rounded-md"></ax-skeleton>
                  </div>
                </div>
              }
            </div>
          } @else if (filteredNotifications().length === 0) {
            <axp-state-message
              mode="empty"
              [icon]="getNotificationIcon()"
              [title]="getNotificationTitle()"
              [description]="getNotificationDescription()"
            >
              @if (searchQuery()) {
                <ax-button slot="actions" look="outline" [text]="'Clear search'" (onClick)="onClearSearch()"></ax-button>
              }
            </axp-state-message>
          } @else {
            <div>
              @for (item of filteredNotifications(); track item.id) {
                @if (layoutThemeService.isMobileDevice()) {
                  <ng-container
                    #contextMenuContainer
                    [ngTemplateOutlet]="mobile"
                    [ngTemplateOutletContext]="{ $implicit: item }"
                  ></ng-container>
                } @else {
                  <ng-container
                    [ngTemplateOutlet]="desktop"
                    [ngTemplateOutletContext]="{ $implicit: item }"
                  ></ng-container>
                }
              }
            </div>
          }
        </div>
      </axp-page-content>
    </axp-page-layout>

    <ng-template #mobile let-item>
      <ax-sliding-item class="ax-h-24">
        <!-- <ax-sliding-item-prefix (onClick)="clickHandler($event)" color="danger" text="delete">
          <ax-icon class="fa-solid fa-trash"></ax-icon>
        </ax-sliding-item-prefix> -->

        <ax-content class="!ax-p-0">
          <div
            class="ax-select-none ax-flex ax-size-full ax-mb-2 ax-gap-3 ax-py-2 ax-px-4 ax-items-center ax-rounded-md ax-cursor-pointer ax-line-clamp-2"
            [class.ax-bg-lighter]="isSelected(item.id)"
            [id]="item.id"
            (click)="openItem(item.id)"
            (contextmenu)="openContextMenu($event, item)"
          >
            @if (isEditing()) {
              <ax-check-box
                class="ax-mt-1"
                [ngModel]="isSelected(item.id)"
                (ngModelChange)="toggleSelectionWithModel(item.id, $event)"
              >
                <ax-label></ax-label>
              </ax-check-box>
            }
            <!-- Avatar + Unread Dot -->
            <div class="ax-relative ax-w-12 ax-flex ax-items-center ax-justify-center">
              <axp-user-avatar [size]="48" [userId]="item.sender.id"></axp-user-avatar>
              @if (!item.readAt) {
                <span class="ax-absolute ax-right-0 ax-top-0 ax-block ax-h-3 ax-w-3 ax-rounded-full"></span>
              }
            </div>

            <!-- Content -->
            <div class="ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-justify-center">
              <div class="ax-flex ax-items-center ax-justify-between ax-gap-2">
                <div class="ax-flex ax-items-center ax-gap-2">
                  <div class="ax-font-medium" [class.ax-font-semibold]="!item.readAt">
                    {{ item.sender.fullName || item.title }}
                  </div>
                  <span>•</span>
                  <div class="ax-text-xs ax-opacity-75">
                    {{ item.createAt | format: 'timeleft' | async }}
                  </div>
                </div>
              </div>
              <div class="ax-text-sm ax-line-clamp-2">{{ item.body }}</div>
            </div>
            <!-- Actions (future: per-item kebab) -->
          </div>
        </ax-content>

        <ax-sliding-item-suffix (onClick)="slidingItemsHandler(item, 'mark-as-read')" color="primary">
          <ax-icon class="fa-light fa-envelopes-bulk fa-xl"></ax-icon>
        </ax-sliding-item-suffix>

        <ax-sliding-item-suffix (onClick)="slidingItemsHandler(item, 'delete')" color="danger">
          <ax-icon class="fa-light fa-trash-can fa-xl"></ax-icon>
        </ax-sliding-item-suffix>
      </ax-sliding-item>
    </ng-template>

    <ng-template #desktop let-item>
      <div
        class="ax-flex ax-gap-3 ax-p-4 ax-items-center ax-rounded-md ax-cursor-pointer hover:ax-bg-surface ax-mb-2 last:ax-mb-0"
        [class.ax-bg-lighter]="isSelected(item.id)"
        [id]="item.id"
        (click)="openItem(item.id)"
        (contextmenu)="openContextMenu($event, item)"
      >
        <!-- @if (isSelected(item.id)) {
                    <div class="ax-w-1 ax-self-stretch ax-rounded ax-bg-primary"></div>
                  } -->
        <!-- Select via checkbox -->
        @if (isEditing()) {
              <ax-check-box
                class="ax-mt-1"
                [ngModel]="isSelected(item.id)"
                (ngModelChange)="toggleSelectionWithModel(item.id, $event)"
              >
                <ax-label></ax-label>
              </ax-check-box>
            }
        <!-- Avatar + Unread Dot -->
        <div class="ax-relative ax-w-12 ax-flex ax-items-center ax-justify-center">
          <axp-user-avatar [size]="48" [userId]="item.sender.id"></axp-user-avatar>
          @if (!item.readAt) {
            <span class="ax-absolute ax-right-0 ax-top-0 ax-block ax-h-3 ax-w-3 ax-rounded-full"></span>
          }
        </div>

        <!-- Content -->
        <div class="ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-justify-center">
          <div class="ax-flex ax-items-center ax-justify-between ax-gap-2">
            <div class="ax-flex ax-items-center ax-gap-2">
              <div class="ax-font-medium" [class.ax-font-semibold]="!item.readAt">
                {{ item.sender.fullName || item.title }}
              </div>
              <span>•</span>
              <div class="ax-text-xs ax-opacity-75">
                {{ item.createAt | format: 'timeleft' | async }}
              </div>
            </div>
          </div>
          <div class="ax-text-sm ax-line-clamp-2">{{ item.body }}</div>
        </div>
        <!-- Actions (future: per-item kebab) -->
      </div>
    </ng-template>
    <ax-context-menu
      #contextMenu
      [openOn]="'click'"
      [closeOn]="'click'"
      [orientation]="'horizontal'"
      (onOpening)="handleContextMenuOpening($event)"
      (onItemClick)="handleContextMenuItemClick($event)"
    >
    </ax-context-menu>
  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2.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: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i5.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i6.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i6.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i3$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i8.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i9.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i10.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXSlidingItemModule }, { kind: "component", type: i11.AXSlidingItemComponent, selector: "ax-sliding-item" }, { kind: "component", type: i11.AXSlidingItemSuffixComponent, selector: "ax-sliding-item-suffix", inputs: ["color", "text"], outputs: ["onClick"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXMNotificationPageComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'axm-notification-page',
                    template: `
    <axp-page-layout>
      <axp-page-toolbar>
        <axp-layout-prefix>
          @if (selectedCount() > 0 || isEditing()) {
            <div class="ax-flex ax-gap-3 ax-items-center ax-h-10">
              <span class="ax-text-xl ax-font-bold">{{ selectedCount() }} items selected</span>
              <span (click)="deselectAll()" class="ax-text-sm ax-text-secondary ax-underline ax-cursor-pointer"
                >Unselect</span
              >
            </div>
          } @else {
            <ax-button [text]="activeTab() === 'all' ? 'All Notifications' : 'Unread Notifications'">
              <ax-dropdown-panel >
                <ax-button-item-list class="ax-min-w-52">
                  <ax-button-item
                    [text]="'All notifications'"
                    [selected]="activeTab() === 'all'"
                    (onClick)="setTab('all')"
                  ></ax-button-item>
                  <ax-button-item
                    [text]="'Unread Notifications'"
                    [selected]="activeTab() === 'unread'"
                    (onClick)="setTab('unread')"
                  >
                    <ax-suffix>
                      <ax-badge [text]="unreadCount().toString()" [color]="'primary'"></ax-badge>
                    </ax-suffix>
                  </ax-button-item>
                </ax-button-item-list>
              </ax-dropdown-panel>
            </ax-button>

            <ax-search-box
              look="solid"
              [placeholder]="'Search notifications'"
              [value]="searchQuery()"
              (onValueChanged)="onSearch($event.value)"
              class="ax-w-72 ax-hidden md:ax-flex"
            >
              <ax-clear-button></ax-clear-button>
            </ax-search-box>
          }
        </axp-layout-prefix>
        <!-- <axp-layout-suffix>
          @if (selectedCount() > 0) {
            <div class="ax-flex ax-gap-2">
              @if (activeTab() === 'unread') {
                <ax-button [text]="'Mark as read'" (onClick)="markSelectedAsRead()"></ax-button>
              }
              <ax-button look="outline" color="danger" [text]="'Delete'" (onClick)="deleteSelected()"></ax-button>
            </div>
          }
        </axp-layout-suffix> -->
      </axp-page-toolbar>
      <axp-page-content>
        <div class="ax-flex ax-flex-col ax-gap-4">
          <!-- List -->
          @if (loading()) {
            <div class="ax-p-4 ax-space-y-4">
              @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {
                <div class="ax-flex ax-items-center ax-space-x-3">
                  <ax-skeleton [animated]="true" class="ax-w-12 ax-h-12 ax-rounded-full"></ax-skeleton>
                  <div class="ax-flex-1 ax-space-y-2">
                    <ax-skeleton [animated]="true" class="ax-w-3/4 ax-h-4 ax-rounded-md"></ax-skeleton>
                    <ax-skeleton [animated]="true" class="ax-w-1/2 ax-h-3 ax-rounded-md"></ax-skeleton>
                  </div>
                </div>
              }
            </div>
          } @else if (filteredNotifications().length === 0) {
            <axp-state-message
              mode="empty"
              [icon]="getNotificationIcon()"
              [title]="getNotificationTitle()"
              [description]="getNotificationDescription()"
            >
              @if (searchQuery()) {
                <ax-button slot="actions" look="outline" [text]="'Clear search'" (onClick)="onClearSearch()"></ax-button>
              }
            </axp-state-message>
          } @else {
            <div>
              @for (item of filteredNotifications(); track item.id) {
                @if (layoutThemeService.isMobileDevice()) {
                  <ng-container
                    #contextMenuContainer
                    [ngTemplateOutlet]="mobile"
                    [ngTemplateOutletContext]="{ $implicit: item }"
                  ></ng-container>
                } @else {
                  <ng-container
                    [ngTemplateOutlet]="desktop"
                    [ngTemplateOutletContext]="{ $implicit: item }"
                  ></ng-container>
                }
              }
            </div>
          }
        </div>
      </axp-page-content>
    </axp-page-layout>

    <ng-template #mobile let-item>
      <ax-sliding-item class="ax-h-24">
        <!-- <ax-sliding-item-prefix (onClick)="clickHandler($event)" color="danger" text="delete">
          <ax-icon class="fa-solid fa-trash"></ax-icon>
        </ax-sliding-item-prefix> -->

        <ax-content class="!ax-p-0">
          <div
            class="ax-select-none ax-flex ax-size-full ax-mb-2 ax-gap-3 ax-py-2 ax-px-4 ax-items-center ax-rounded-md ax-cursor-pointer ax-line-clamp-2"
            [class.ax-bg-lighter]="isSelected(item.id)"
            [id]="item.id"
            (click)="openItem(item.id)"
            (contextmenu)="openContextMenu($event, item)"
          >
            @if (isEditing()) {
              <ax-check-box
                class="ax-mt-1"
                [ngModel]="isSelected(item.id)"
                (ngModelChange)="toggleSelectionWithModel(item.id, $event)"
              >
                <ax-label></ax-label>
              </ax-check-box>
            }
            <!-- Avatar + Unread Dot -->
            <div class="ax-relative ax-w-12 ax-flex ax-items-center ax-justify-center">
              <axp-user-avatar [size]="48" [userId]="item.sender.id"></axp-user-avatar>
              @if (!item.readAt) {
                <span class="ax-absolute ax-right-0 ax-top-0 ax-block ax-h-3 ax-w-3 ax-rounded-full"></span>
              }
            </div>

            <!-- Content -->
            <div class="ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-justify-center">
              <div class="ax-flex ax-items-center ax-justify-between ax-gap-2">
                <div class="ax-flex ax-items-center ax-gap-2">
                  <div class="ax-font-medium" [class.ax-font-semibold]="!item.readAt">
                    {{ item.sender.fullName || item.title }}
                  </div>
                  <span>•</span>
                  <div class="ax-text-xs ax-opacity-75">
                    {{ item.createAt | format: 'timeleft' | async }}
                  </div>
                </div>
              </div>
              <div class="ax-text-sm ax-line-clamp-2">{{ item.body }}</div>
            </div>
            <!-- Actions (future: per-item kebab) -->
          </div>
        </ax-content>

        <ax-sliding-item-suffix (onClick)="slidingItemsHandler(item, 'mark-as-read')" color="primary">
          <ax-icon class="fa-light fa-envelopes-bulk fa-xl"></ax-icon>
        </ax-sliding-item-suffix>

        <ax-sliding-item-suffix (onClick)="slidingItemsHandler(item, 'delete')" color="danger">
          <ax-icon class="fa-light fa-trash-can fa-xl"></ax-icon>
        </ax-sliding-item-suffix>
      </ax-sliding-item>
    </ng-template>

    <ng-template #desktop let-item>
      <div
        class="ax-flex ax-gap-3 ax-p-4 ax-items-center ax-rounded-md ax-cursor-pointer hover:ax-bg-surface ax-mb-2 last:ax-mb-0"
        [class.ax-bg-lighter]="isSelected(item.id)"
        [id]="item.id"
        (click)="openItem(item.id)"
        (contextmenu)="openContextMenu($event, item)"
      >
        <!-- @if (isSelected(item.id)) {
                    <div class="ax-w-1 ax-self-stretch ax-rounded ax-bg-primary"></div>
                  } -->
        <!-- Select via checkbox -->
        @if (isEditing()) {
              <ax-check-box
                class="ax-mt-1"
                [ngModel]="isSelected(item.id)"
                (ngModelChange)="toggleSelectionWithModel(item.id, $event)"
              >
                <ax-label></ax-label>
              </ax-check-box>
            }
        <!-- Avatar + Unread Dot -->
        <div class="ax-relative ax-w-12 ax-flex ax-items-center ax-justify-center">
          <axp-user-avatar [size]="48" [userId]="item.sender.id"></axp-user-avatar>
          @if (!item.readAt) {
            <span class="ax-absolute ax-right-0 ax-top-0 ax-block ax-h-3 ax-w-3 ax-rounded-full"></span>
          }
        </div>

        <!-- Content -->
        <div class="ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-justify-center">
          <div class="ax-flex ax-items-center ax-justify-between ax-gap-2">
            <div class="ax-flex ax-items-center ax-gap-2">
              <div class="ax-font-medium" [class.ax-font-semibold]="!item.readAt">
                {{ item.sender.fullName || item.title }}
              </div>
              <span>•</span>
              <div class="ax-text-xs ax-opacity-75">
                {{ item.createAt | format: 'timeleft' | async }}
              </div>
            </div>
          </div>
          <div class="ax-text-sm ax-line-clamp-2">{{ item.body }}</div>
        </div>
        <!-- Actions (future: per-item kebab) -->
      </div>
    </ng-template>
    <ax-context-menu
      #contextMenu
      [openOn]="'click'"
      [closeOn]="'click'"
      [orientation]="'horizontal'"
      (onOpening)="handleContextMenuOpening($event)"
      (onItemClick)="handleContextMenuItemClick($event)"
    >
    </ax-context-menu>
  `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    providers: [
                        {
                            provide: AXPPageLayoutBase,
                            useExisting: AXMNotificationPageComponent,
                        },
                    ],
                    host: {
                        '(document:keydown.escape)': 'deselectAll()',
                    },
                    imports: [
                        AXDecoratorModule,
                        CommonModule,
                        FormsModule,
                        AXFormatModule,
                        AXCheckBoxModule,
                        AXSkeletonModule,
                        AXButtonModule,
                        AXBadgeModule,
                        AXDropdownModule,
                        AXDropdownButtonModule,
                        AXSearchBoxModule,
                        AXPUserAvatarComponent,
                        AXPPageLayoutComponent,
                        AXPThemeLayoutBlockComponent,
                        AXPStateMessageComponent,
                        AXContextMenuComponent,
                        AXLabelModule,
                        AXSlidingItemModule,
                    ],
                }]
        }] });

export { AXMNotificationPageComponent };
//# sourceMappingURL=acorex-modules-notification-management-notification-page.component-xW_J_o8u.mjs.map
