class TemplatesUplImgDialog extends EICDialogContent {
    constructor() {
        super();
        Object.assign(this, app.helpers.validators); // Inject validators
        this.actions = [
            {
                label: 'Cancel',
                onclick: this.cancel.bind(this),
                severity: 'secondary',
                role: 'cancel'
            }
        ];
    }

    DOMContentLoaded() {
        const imgId = crypto.randomUUID()

        const host = window.location.hostname 
        let envUrl = (host.split('.')[1] !== 'eismea') ? host.split('.')[1] + '.' : ''
        
        // Initialize file upload
        this.fileUpload = new FileUpload(this.find('.browseBtn'), {
            uploadId: imgId,
            uploadUrl: `https://myeic.${envUrl}eismea.eu/public/images/common/${imgId}`,
            uploadMethod: 'PUT',
            allowedExtensions: ['jpg', 'jpeg', 'png', 'svg'],
            allowedMimes: ['image/jpeg', 'image/pjpeg', 'image/png', 'image/svg+xml'],
            allowDrop: true,
            maxFiles: 1,
            minFiles: 1,
            dndLabel: 'Drop your image here !',
            imageTitle: '',
            noUpload: false,
        })
    
        const dropArea = this.find('.file-drop-area')
        const uplButton = this.find('.uploadBtn.custom-class')
        const fileUpl = this.el.querySelector('.file-upload')
    
        dropArea.addEventListener('change', () => {
            const existingInput = fileUpl.querySelector('.tpl-imgTitle')
            if (!existingInput) {
                const inputTitle = ui.create(`
                    <input eicinput type="text" name="title" class="tpl-imgTitle" placeholder="title of your image" required>
                `)
                dropArea.appendChild(inputTitle)
    
                // Desabled upload button if input Title empty
                uplButton.disabled = true
    
                // Add listener to input Title
                inputTitle.addEventListener('input', () => {
                    const titleValue = inputTitle.value.trim()
                    if (titleValue) {
                        inputTitle.classList.remove('highlight')
                        uplButton.disabled = false
                    } else {
                        inputTitle.classList.add('highlight')
                        uplButton.disabled = true
                    }
                    this.fileUpload.options.imageTitle = inputTitle.value
                })
                    
            }
        })
    
        // Event upload button
        uplButton.addEventListener('click', () => {
            this.fileUpload.onFileAdded.bind(this)
            this.addFile()
        })
    }
    

    // Handle File Added
    addFile() {
        const fileUpL = this.fileUpload
        const uplUrl = fileUpL.options?.uploadUrl
        const extension = uplUrl.split('.').pop()
        const uplId = fileUpL.options?.uploadId
        const fileName = uplId+'.'+extension
        let data = { 
            id: uplId, 
            name: fileName, 
            type: extension,
            path: '/common',
            imageTitle: fileUpL.options?.imageTitle,
            meta:'',
         }
        this.commit(data)
        
    }

    commit(data) {
    this.result = data
    // NE PAS appeler this.cancel() ou this.close() ici
}

    showDialogSpinner(show = true) {
    let spinner = this.find('.dialog-spinner')
    if (!spinner && show) {
        spinner = document.createElement('div')
        spinner.className = 'dialog-spinner'
        spinner.innerHTML = `<span class="eic-spinner"></span> Uploading...`
        this.el.appendChild(spinner)
    }
    if (spinner) spinner.style.display = show ? 'block' : 'none'
}
}

// Register the class
app.registerClass('TemplatesUplImgDialog', TemplatesUplImgDialog)