import { Directive, HostListener, OnDestroy, output } from '@angular/core'
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
import { Subject, buffer, debounceTime, filter, map } from 'rxjs'

@UntilDestroy({ checkProperties: true })
@Directive({
	standalone: true,
	// eslint-disable-next-line @angular-eslint/directive-selector
	selector: '[doubleClick]',
})
export class DoubleClickDirective implements OnDestroy {
	readonly doubleClick = output<MouseEvent>()

	private click$ = new Subject<MouseEvent>()

	constructor() {
		this.click$
			.pipe(
				buffer(this.click$.pipe(debounceTime(250))),
				filter((list) => list.length === 2),
				map((list) => list[1]),
				untilDestroyed(this),
			)
			.subscribe({
				next: (event) => {
					this.doubleClick.emit(event)
				},
			})
	}

	@HostListener('click', ['$event'])
	onClick(event: MouseEvent) {
		this.click$.next(event)
	}

	ngOnDestroy() {
		this.click$.complete()
	}
}