import {
    Directive,
    ElementRef,
    HostListener,
    AfterViewInit,
} from '@angular/core';

@Directive({
    standalone: true,
    selector: '[appAutoResize]',
})
export class AutoResizeDirective implements AfterViewInit {
    constructor(private el: ElementRef) {}

    ngAfterViewInit(): void {
        this.autoresize();
    }

    @HostListener('input')
    onInput(): void {
        this.autoresize();
    }

    private autoresize(): void {
        const textarea = this.el.nativeElement as HTMLTextAreaElement;
        const container = textarea.closest('.comment-container') as HTMLElement;

        if (textarea.value === '') {
            textarea.style.height = '24px';
            if (container) {
                container.style.height = '54px';
            }
        } else {
            textarea.style.height = '24px';
            textarea.style.height = textarea.scrollHeight + 'px';
            if (container) {
                container.style.height = textarea.scrollHeight + 30 + 'px';
            }
        }
    }
}