import { AsyncPipe } from '@angular/common'
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import { NotificationEventType } from '@core/types'
import { WSService } from '@frontend/ws'
import { DefaultService } from '@api-client/angular'
import { TranslocoDirective } from '@jsverse/transloco'
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
import { Observable, debounceTime, filter, map, startWith, switchMap } from 'rxjs'

@UntilDestroy({ checkProperties: true })
@Component({
	selector: 'kadi-free-table-counter',
	template: `
		<ng-container *transloco="let t">
			<div
				class="flex items-center justify-between px-4 py-1 lg:py-2 text-lg font-bold text-gray-500 border border-black xl:py-2 rounded-xl">
				{{ freeCount$ | async }}
				<span class="ml-6">{{ t('free') }} </span>
			</div>
		</ng-container>
	`,
	changeDetection: ChangeDetectionStrategy.OnPush,
	imports: [TranslocoDirective, AsyncPipe],
})
export class FreeTableCounterComponent {
	private readonly _wsService = inject(WSService)
	private readonly _apiService = inject(DefaultService)

	freeCount$: Observable<number>

	constructor() {
		this.freeCount$ = this._wsService.messages$.pipe(
			untilDestroyed(this),
			debounceTime(300),
			// Initially put a value to start subscription instantly
			startWith({ event: NotificationEventType.reservations_updated }),
			filter(
				({ event }) =>
					event === NotificationEventType.orders_updated || event === NotificationEventType.reservations_updated,
			),
			switchMap(() => this._apiService.reservationControllerFreeTableCount().pipe(map((res) => res.count))),
		)
	}
}