import {Controller} from '@hotwired/stimulus'
import Quill from 'quill'

export default class extends Controller {
    static values = {
        application: String,
        organization: String,
    }
    static targets = ['hidden', 'submitBtn']

    connect() {
        // Map each editor to its toolbar and hidden field
        if (document.querySelector('#editor-description')) {
            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,
                    },
                    theme: 'snow',
                    placeholder: 'Écrivez votre texte...',
                })

                quill.on('text-change', () => {
                    hiddenTarget.value = quill.root.innerHTML
                })

                hiddenTarget.value = quill.root.innerHTML
            })
        }
    }

    handleAuthorizeSubmit(event) {
        event.preventDefault();

        const originalText = this.submitBtnTarget.textContent;

        if (!confirm(`Vous vous apprêtez à donner l'accès à ${this.organizationValue} pour ${this.applicationValue}. Êtes‑vous sûr(e) ?`)) {
            return;
        }

        this.submitBtnTarget.textContent = 'En cours...';
        this.submitBtnTarget.disabled = true;

        fetch(event.target.action, {
            method: 'POST',
            body: new FormData(event.target)
        })
            .then(response => {
                if (response.ok) {
                    this.submitBtnTarget.textContent = 'Autorisé ✓';
                    this.submitBtnTarget.classList.replace('btn-secondary', 'btn-success');
                } else {
                    this.submitBtnTarget.textContent = originalText;
                    this.submitBtnTarget.disabled = false;
                    alert('Erreur lors de l\'action');
                }
            })
            .catch(error => {
                this.submitBtnTarget.textContent = originalText;
                this.submitBtnTarget.disabled = false;
                alert('Erreur lors de l\'action');
            });
    }

    handleRemoveSubmit(event) {
        event.preventDefault();

        const originalText = this.submitBtnTarget.textContent;

        if (!confirm(`Vous vous apprêtez à retirer l'accès à ${this.applicationValue} pour ${this.organizationValue}. Êtes‑vous sûr(e) ?`)) {
            return;
        }

        this.submitBtnTarget.textContent = 'En cours...';
        this.submitBtnTarget.disabled = true;

        fetch(event.target.action, {
            method: 'POST',
            body: new FormData(event.target)
        })
            .then(response => {
                if (response.ok) {
                    this.submitBtnTarget.textContent = 'Retiré ✓';
                    this.submitBtnTarget.classList.replace('btn-secondary', 'btn-danger');
                } else {
                    this.submitBtnTarget.textContent = originalText;
                    this.submitBtnTarget.disabled = false;
                    alert('Erreur lors de l\'action');
                }
            })
            .catch(error => {
                this.submitBtnTarget.textContent = originalText;
                this.submitBtnTarget.disabled = false;
                alert('Erreur lors de l\'action');
            });
    }
}