import { Controller } from '@hotwired/stimulus'
import Quill from 'quill'
// controllers/application_controller.js
export default class extends Controller {
    static targets = ['hidden']

    connect() {
        // Map each editor to its toolbar and hidden field
        this.editors = [
            {
                editorSelector: '#editor-description',
                toolbarSelector: '#toolbar-description',
                hiddenTarget: this.hiddenTargets[0],
            },
            {
                editorSelector: '#editor-descriptionSmall',
                toolbarSelector: '#toolbar-descriptionSmall',
                hiddenTarget: this.hiddenTargets[1],
            },
        ]

        this.editors.forEach(({ editorSelector, toolbarSelector, hiddenTarget }) => {
            const quill = new Quill(editorSelector, {
                modules: {
                    toolbar: toolbarSelector, // HTML toolbar container
                },
                theme: 'snow', // include quill.snow.css
                placeholder: 'Écrivez votre texte...',
            })

            // Keep hidden field in sync with editor HTML
            quill.on('text-change', () => {
                hiddenTarget.value = quill.root.innerHTML
            })

            // Ensure initial value sync in case user submits without changes
            hiddenTarget.value = quill.root.innerHTML
        })
    }
}