import { AsyncPipe, DatePipe } from '@angular/common'
import { Component, inject } from '@angular/core'
import { Router } from '@angular/router'
import { CustomerData, DashboardTableView, ReservationResponse } from '@api-client/angular'
import { KadiOverlayModule, LoadingButtonDirective } from '@frontend/shared'
import { TranslocoDirective } from '@jsverse/transloco'
import { UntilDestroy } from '@ngneat/until-destroy'
import { map, Observable, tap } from 'rxjs'
import { AddReservationService } from '../../../shared'
import { StateOptionsPipe } from '../../../shared/pipes/state-options.pipe'
import { ReservationSAM } from '../../reservations'
import { DashboardStore } from '../dashboard.store'
import { DashboardTable } from '../types'
import { TableStateBadgeComponent } from './reservation-status-badge/reservation-status-badge.component'
import { SettingsStore } from '../../../+state'
import {
	LucideArrowRightFromLine,
	LucideArrowRightToLine,
	LucideCirclePlus,
	LucideEllipsisVertical,
	LucideFileText,
	LucideUser,
	LucideX,
} from '@lucide/angular'

/**
 * Displays static reservation Data for a given Table, with different options depending on the kind of reservation
 */
@UntilDestroy({ checkProperties: true })
@Component({
	selector: 'kadi-reservation-card',
	templateUrl: './reservation-card.component.html',
	styleUrls: ['./reservation-card.component.scss'],
	imports: [
		TranslocoDirective,
		TableStateBadgeComponent,
		KadiOverlayModule,
		LoadingButtonDirective,
		AsyncPipe,
		DatePipe,
		StateOptionsPipe,
		LucideX,
		LucideUser,
		LucideFileText,
		LucideArrowRightFromLine,
		LucideArrowRightToLine,
		LucideCirclePlus,
		LucideEllipsisVertical,
	],
})
export class ReservationCardComponent {
	readonly _settingsStore = inject(SettingsStore)
	selectedTable$: Observable<DashboardTable>
	TableState = DashboardTableView.TableStateEnum
	ReservationState = ReservationResponse.StateEnum
	customers: CustomerData[] = []
	loading = false
	private readonly _router = inject(Router)
	private readonly _store = inject(DashboardStore)
	private readonly _addReservationService = inject(AddReservationService)

	constructor() {
		this.selectedTable$ = this._store.selectedTable$.pipe(
			tap((table) => {
				if (!table) this._router.navigateByUrl('/dashboard')
			}),
			map((table) => table as DashboardTable),
		)
	}

	editReservation(reservation: ReservationResponse): void {
		this._addReservationService.edit(reservation)
	}

	updateState(table: DashboardTable, state: ReservationSAM.State): void {
		table.stateService.send(state)
	}
}