import { ChangeDetectionStrategy, Component, HostListener, input, output } from '@angular/core';
import { inOutAnimation } from '../animations';
import { ButtonDirective } from '../button.directive';
import { CnPipe } from '../cn.pipe';

@Component({
	standalone: true,
	selector: 'app-modal',
	templateUrl: './modal.component.html',
	styleUrls: ['./modal.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush,
	animations: [inOutAnimation],
	imports: [ButtonDirective, CnPipe],
})
export class ModalComponent {
	close = output();
	isOpen = input(false);
	title = input('');
	modalClass = input('');
	contentClass = input('');
	showHeader = input(true);
	readonly defaultModalClass =
		'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white z-30 rounded-lg shadow w-[500px] max-w-[90%]';
	@HostListener('window:keyup', ['$event'])
	closeOnEscape(event: KeyboardEvent) {
		if (event.key !== 'Escape') return;
		this.close.emit();
	}
}