import { AfterViewInit, Directive, input, OnDestroy, output } from '@angular/core';

@Directive({
	selector: '[appInView]',
	standalone: true,
})
export class InViewDirective implements AfterViewInit, OnDestroy {
	inView = output<boolean>();
	appInView = input.required<string>();
	observer!: IntersectionObserver;
	target!: Element | null;
	ngAfterViewInit() {
		this.observer = new IntersectionObserver(
			(entries) => {
				entries.forEach((entry) => {
					this.inView.emit(entry.isIntersecting);
				});
			},
			{
				threshold: 0.65,
			}
		);
		this.target = document.querySelector(`#${this.appInView()}`);
		this.target && this.observer.observe(this.target);
	}
	ngOnDestroy(): void {
		this.target && this.observer.unobserve(this.target);
	}
}