import { AsyncPipe } from '@angular/common'
import { Component, inject } from '@angular/core'
import { ReservationResponse } from '@api-client/angular'
import { TranslocoDirective } from '@jsverse/transloco'
import { Observable } from 'rxjs'
import { AddReservationService } from '../../../../shared'
import { ReservationCardComponent } from '../../common'
import { ReservationSAM } from '../../reservation.sam'
import { ReservationStore } from '../../reservation.store'
import { ReservationView } from '../../reservation.types'

/** Grid Layout */
@Component({
	selector: 'kadi-reservations-grid-view',
	templateUrl: './reservations-grid-view.component.html',
	styleUrls: ['./reservations-grid-view.component.scss'],
	imports: [TranslocoDirective, ReservationCardComponent, AsyncPipe],
})
export class ReservationsGridViewComponent {
	reservations$: Observable<ReservationView[]>
	loading$: Observable<boolean>
	ReservationState = ReservationResponse.StateEnum
	private readonly _store = inject(ReservationStore)
	private readonly _addReservationService = inject(AddReservationService)

	constructor() {
		this.reservations$ = this._store.reservations$
		this.loading$ = this._store.actionLoading$
	}

	edit(reservation: ReservationView): void {
		this._addReservationService.edit(reservation.ref, {})
	}

	updateState(reservation: ReservationView, state: ReservationSAM.State): void {
		reservation.stateService.send(state)
	}
}