// components/Modal.ts
import { createElement } from '../utils/utils';
import { Widget } from './Widget';

export class Modal {
    private modalOverlay: HTMLDivElement;
    private modalContent: HTMLDivElement;
    private widget: Widget | null = null;
    private isVisible: boolean = false;

    constructor() {
        this.modalOverlay = createElement('div') as HTMLDivElement;
        this.modalOverlay.classList.add('modal-overlay');
        this.modalOverlay.style.display = 'none'; // Initially hidden
        this.modalOverlay.addEventListener('click', (event) => {
            if (event.target === this.modalOverlay) {
                this.hide(); // Close modal if clicked outside content
            }
        });

        this.modalContent = createElement('div') as HTMLDivElement;
        this.modalContent.classList.add('modal-content');
        this.modalOverlay.appendChild(this.modalContent);
        document.body.appendChild(this.modalOverlay); // Append to body once
    }

    setWidget(widget: Widget): void {
        this.widget = widget;
        this.modalContent.innerHTML = ''; // Clear previous content
        this.modalContent.appendChild(widget.render());
    }

    show(): void {
        if (this.widget) {
            this.modalOverlay.style.display = 'flex';
            this.isVisible = true;
        }
    }

    hide(): void {
        this.modalOverlay.style.display = 'none';
        this.isVisible = false;
    }

    isVisibleModal(): boolean {
        return this.isVisible;
    }

    getContainer(): HTMLDivElement {
        return this.modalOverlay;
    }

    getModalContentContainer(): HTMLDivElement {
        return this.modalContent;
    }
}