import { NgClass } from '@angular/common'
import { Component, Input, inject, input, output } from '@angular/core'
import { ReservationResponse } from '@api-client/angular'
import { KadiOverlayModule } from '@frontend/shared'
import { TranslocoDirective } from '@jsverse/transloco'
import { AddReservationService, ConfirmationModalComponent } from '../../../../shared'
import { StateOptionsPipe } from '../../../../shared/pipes/state-options.pipe'
import { ReservationSAM } from '../../reservation.sam'
import { ReservationView } from '../../reservation.types'
import { ReservationCardDetailsComponent } from '../reservation-card-details/reservation-card-details.component'
import { DialogService } from '@ngneat/dialog'
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
import { LucideArrowRightFromLine, LucideArrowRightToLine, LucideEllipsisVertical } from '@lucide/angular'

@UntilDestroy({ checkProperties: true })
@Component({
	selector: 'kadi-reservation-card',
	templateUrl: './reservation-card.component.html',
	styleUrls: ['./reservation-card.component.scss'],
	imports: [
		TranslocoDirective,
		NgClass,
		KadiOverlayModule,
		ReservationCardDetailsComponent,
		StateOptionsPipe,
		LucideEllipsisVertical,
		LucideArrowRightFromLine,
		LucideArrowRightToLine,
	],
})
export class ReservationCardComponent {
	private readonly _addReservationService = inject(AddReservationService)

	// TODO: Skipped for migration because:
	//  This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
	//  and migrating would break narrowing currently.
	@Input({ required: true }) reservation!: ReservationView
	readonly loading = input(false)

	readonly actionPerformed = output()

	private readonly _dialog = inject(DialogService)

	ReservationState = ReservationResponse.StateEnum

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

	updateState(reservation: ReservationView, state: ReservationSAM.State): void {
		if (state !== ReservationResponse.StateEnum.approved || reservation.tables.length > 0) {
			reservation.stateService.send(state)
			this.actionPerformed.emit()
			return
		}

		const dialogRef = this._dialog.open(ConfirmationModalComponent, {
			data: {
				title: 'Confirmation',
				description: 'Reservation does not have any tables assigned. Are you sure you want to confirm?',
			},
		})

		dialogRef.afterClosed$.pipe(untilDestroyed(this)).subscribe((confirmed) => {
			if (confirmed) {
				reservation.stateService.send(state)
				this.actionPerformed.emit()
			} else return
		})
	}
}