import { Component, ViewEncapsulation, inject } from '@angular/core'
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
import { Observable } from 'rxjs'
import { FuseMediaWatcherService } from '../../shared'
import { DashboardStore, SidebarView, TabView } from './dashboard.store'
import { DashboardTable } from './types'
import { TranslocoDirective } from '@jsverse/transloco'
import { NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common'
import { RoomPlanComponent } from './room-plan/room-plan.component'
import { RouterOutlet } from '@angular/router'
import { DashboardNotificationsComponent } from './notifications/dashboard-notifications.component'
import { OrderComponent } from './order/order.component'
import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular'

/**
 * Displaying an overview of all tables and notifications, as well as allowing for detailed information on selected tables,
 * with the option to check in and out reservations or guests, seeing the orders for a table
 */
@UntilDestroy({ checkProperties: true })
@Component({
	selector: 'kadi-dashboard',
	templateUrl: './dashboard.component.html',
	styleUrls: ['./dashboard.component.scss'],
	encapsulation: ViewEncapsulation.None,
	providers: [DashboardStore],
	imports: [
		TranslocoDirective,
		NgClass,
		RoomPlanComponent,
		NgTemplateOutlet,
		RouterOutlet,
		DashboardNotificationsComponent,
		OrderComponent,
		AsyncPipe,
		LucideChevronRight,
		LucideChevronLeft,
	],
})
export class DashboardComponent {
	private readonly _store = inject(DashboardStore)
	private readonly _fuseMediaWatcherService = inject(FuseMediaWatcherService)

	vm$: Observable<{
		sidebarView: SidebarView
		tabView: TabView
		selectedTable: DashboardTable | undefined
	}>
	isScreenSmall = false
	showSidebar = true

	constructor() {
		this.vm$ = this._store.select({
			sidebarView: this._store.sidebarView$,
			tabView: this._store.tabView$,
			selectedTable: this._store.selectedTable$,
		})

		this._fuseMediaWatcherService.onMediaChange$.pipe(untilDestroyed(this)).subscribe(({ matchingAliases }) => {
			this.isScreenSmall = !matchingAliases.includes('xl')
		})
	}

	selectTabView(view: TabView): void {
		this._store.selectTabView(view)
	}
}