import { AsyncPipe, DatePipe, NgTemplateOutlet } from '@angular/common'
import { Component, inject } from '@angular/core'
import { DashboardMessageView } from '@api-client/angular'
import { TranslocoDirective } from '@jsverse/transloco'
import { UntilDestroy } from '@ngneat/until-destroy'
import { Observable } from 'rxjs'
import { DashboardStore } from '../dashboard.store'
import { NotificationTitlePipe } from '../pipes/notification-title.pipe'
import { SettingsStore } from '../../../+state'
import { LucideCircle, LucideDollarSign, LucideHamburger } from '@lucide/angular'

/**
 * Shows the notifications on the dashboard, filtered between not acknowledged (notifications)
 * and acknowledged (history)
 */
@UntilDestroy({ checkProperties: true })
@Component({
	selector: 'kadi-dashboard-notifications',
	templateUrl: './dashboard-notifications.component.html',
	styleUrls: ['./dashboard-notifications.component.scss'],
	imports: [
		TranslocoDirective,
		NgTemplateOutlet,
		AsyncPipe,
		DatePipe,
		NotificationTitlePipe,
		LucideDollarSign,
		LucideHamburger,
		LucideCircle,
	],
})
export class DashboardNotificationsComponent {
	readonly _settingsStore = inject(SettingsStore)
	messages$: Observable<DashboardMessageView[]>
	selectedFilter: 'notifications' | 'history' = 'notifications'
	MessageType = DashboardMessageView.TypeEnum
	private readonly _store = inject(DashboardStore)

	constructor() {
		this.messages$ = this._store.dashboardMessages$
	}

	acknowledge(message: DashboardMessageView): void {
		this._store.acknowlegdeMessage(message.id)
	}

	changeFilter(filter: 'notifications' | 'history'): void {
		this.selectedFilter = filter
	}

	openOrderView(): void {
		this._store.openOrders()
	}

	/** Get all messages according to the currently set filter */
	getFilterMessages(allMessages: DashboardMessageView[]): DashboardMessageView[] {
		return this.selectedFilter === 'notifications'
			? allMessages.filter((message) => !message.acknowledged)
			: allMessages.filter((message) => message.acknowledged)
	}
}