/**
     * Class for handling select field functionality in Elementor forms.
     */
     class CoolFormCONFIRM_DIALOG_BEFORE_SUBMIT extends elementorModules.frontend.handlers.Base {
        /**
         * Retrieves the default select field functionality.
         * @returns {Object} An object containing selector configurations.
         */
        getDefaultSettings() {
            return {
                selectors: {
                    dialogWrapper: '.cdfef-input',
                    confirmButton: '.cdfef-dialog-confirm-btn',
                    cancelButton: '.cdfef-dialog-cancel-btn',
                    crossIcon: '.cdfef-dialog-close-btn'
                },
            };
        }
 
        /**
         * Retrieves the default elements based on the settings defined.
         * @returns {Object} An object containing jQuery elements for the select field.
         */
        getDefaultElements() {
            const selectors = this.getSettings('selectors');
            return {
                $dialogWrapper: this.$element.find(selectors.dialogWrapper),
                $confirmButton: this.$element.find(selectors.confirmButton),
                $cancelButton: this.$element.find(selectors.cancelButton),
                $crossIcon: this.$element.find(selectors.crossIcon),
            };
        }  
    
        /**
         * Binds events to the elements. This method is intended to be overridden by subclasses to add specific event handlers.
         */
        bindEvents() {

            this.dialogDiv = "";
            this.confirmButton = "";
            this.cancelButton = "";
            this.crossIcon = "";
            this.getButtonElements();

        }
    
        /**
         * Retrieves and stores unique select input IDs from the Elementor div element.
         */ 
    
        getButtonElements(){
            this.confirmButton = this.elements.$confirmButton[0];
            this.cancelButton = this.elements.$cancelButton[0];
            this.crossIcon = this.elements.$crossIcon[0];
            this.dialogDiv= this.elements.$dialogWrapper[0];
            if(this.dialogDiv){
                const submitButton = this.dialogDiv.parentNode.querySelector('.cool-form__submit-group .cool-form-submit-button');
                this.showDialogBox(submitButton);
            }
        }

        showDialogBox(submitButton) {
            submitButton.addEventListener('click', (e) => {
                if (!this.dialogDiv.classList.contains('preventSubmission')) {
                    this.dialogDiv.classList.add('preventSubmission');
                    e.preventDefault(); // Prevent form submission
                    this.dialogDiv.style.display = "block";
                }else{
                    this.dialogDiv.classList.remove('preventSubmission');
                    this.dialogDiv.style.display = "none";
                }
            });

            if (this.crossIcon) {
                this.crossIcon.addEventListener('click', (e) => {
                    this.dialogDiv.classList.remove('preventSubmission');
                    this.dialogDiv.style.display = "none";
                });
            }
            
            if (this.cancelButton) {
                this.cancelButton.addEventListener('click', (e) => {
                    this.dialogDiv.classList.remove('preventSubmission');
                    this.dialogDiv.style.display = "none";
                });
            }

            this.confirmButton.addEventListener('click', (e) => {
                this.dialogDiv.style.display = "none";
                 submitButton.click();

            })
        }        
        }
    
    jQuery(window).on('elementor/frontend/init', () => {
        const addHandler = ($element) => {
            elementorFrontend.elementsHandler.addHandler(CoolFormCONFIRM_DIALOG_BEFORE_SUBMIT, {
                $element,
            });
        };
    
        elementorFrontend.hooks.addAction('frontend/element_ready/cool-form.default', addHandler);
    });
    