import { Controller } from '@hotwired/stimulus';

/*
 * Otwiera podgląd "live view" projektu w modalu stylizowanym na okno przeglądarki.
 * Adres i tytuł są przekazywane przez przyciski z data-webview-url-param
 * oraz data-webview-title-param. iframe ładuje się dopiero przy otwarciu.
 */
export default class extends Controller {
    static targets = ['dialog', 'frame', 'address', 'title', 'external', 'fallback'];

    connect() {
        this.onKeydown = this.onKeydown.bind(this);
    }

    open(event) {
        const { url, title } = event.params;

        this.addressTarget.textContent = url.replace(/^https?:\/\//, '');
        this.titleTarget.textContent = title;
        this.externalTargets.forEach((el) => { el.href = url; });
        this.fallbackTarget.hidden = true;

        // Jeśli strona blokuje osadzanie (X-Frame-Options), pokaż podpowiedź.
        this.frameTarget.onerror = () => { this.fallbackTarget.hidden = false; };
        this.frameTarget.src = url;

        this.dialogTarget.showModal();
        this.dialogTarget.addEventListener('close', () => this.reset(), { once: true });
        document.addEventListener('keydown', this.onKeydown);
    }

    close() {
        this.dialogTarget.close();
    }

    backdrop(event) {
        // Klik poza ramką (w tło <dialog>) zamyka podgląd.
        if (event.target === this.dialogTarget) {
            this.close();
        }
    }

    onKeydown(event) {
        if (event.key === 'Escape') {
            this.close();
        }
    }

    reset() {
        this.frameTarget.src = 'about:blank';
        document.removeEventListener('keydown', this.onKeydown);
    }
}