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

export default class extends Controller {
    static targets = ['modal'];

    connect() {
        console.log('#modal controller connected');
    }
    /**
     * 
     * @param {Event} event 
     */
    showSemanticModal(event) {
        const modal = this.modalTarget;
        const title = modal.querySelector('.modal-title');
        // Clear any existing content first
        title.innerHTML = '';
        title.innerHTML = event.content?.title;
        const body = modal.querySelector('.modal-body');
        body.innerHTML = '';
        const contentType = event.content?.type;

        const content = document.createElement(contentType);
        if (contentType === 'img') {
            content.src = event.content?.imgSrc;
            content.alt = event.content?.description.trim();
            content.classList.add('img-fluid');
        }

        body.appendChild(content);

        const description = document.createElement('p');
        description.textContent = event.content?.description.trim();
        description.classList.add('py-3', 'my-0', 'fst-italic');

        body.appendChild(description);

        bootstrap.Modal.getOrCreateInstance(modal).show();
    }
}