import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { NotificationItem } from '@/core/services/notifications.service';
import { NotificationItemComponent } from '../notification-item/notification-item.component';
import { NotificationDisplayItem } from '../notifications.models';

@Component({
	selector: 'app-notification-list',
	standalone: true,
	templateUrl: './notification-list.component.html',
	changeDetection: ChangeDetectionStrategy.OnPush,
	imports: [NotificationItemComponent],
})
export class NotificationListComponent {
	notifications = input.required<NotificationItem[]>();
	lastReadUnixtime = input<number>(0);

	displayItems = computed<NotificationDisplayItem[]>(() => {
		const items = this.notifications();
		const lastRead = this.lastReadUnixtime();

		return [...items]
			.sort((a, b) => b.unixtime - a.unixtime)
			.map((item) => ({
				...item,
				isUnread: item.unixtime > lastRead,
			}));
	});
}