/**
* Class for handling select field functionality in Elementor forms.
*/
class CoolFormWYSIWYG_Editor_Render extends elementorModules.frontend.handlers.Base {
    /**
     * Retrieves the default select field functionality.
     * @returns {Object} An object containing selector configurations.
     */
    getDefaultSettings() {
        return {
            selectors: {
                textarea: '.cfkef-wysiwyg-field',
            },
        };
    }

    /**
     * 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 {
            $textarea: this.$element.find(selectors.textarea),
        };
    }

    /**
     * Binds events to the elements. This method is intended to be overridden by subclasses to add specific event handlers.
     */
    bindEvents() {
        this.textarea = this.elements.$textarea;
        this.WysiwygInit();
        this.applyBorderCss();
    }

    WysiwygInit() {
        // Loop through each element in this.textarea using jQuery's each
        this.textarea.each((index, textareaElement) => {
            const selector = `textarea#${textareaElement.id}.cfkef-wysiwyg-field`;
            const tinymceSettings = this.tinymceSettings();
            tinymceSettings.selector = selector;

            if (tinymce.get(textareaElement.id)) {
                tinymce.get(textareaElement.id).remove();
            }

            // Initialize TinyMCE if it's available
            if (tinymce && typeof tinymce === 'object') {
                tinymce.init(tinymceSettings);
            }
        });


    }

    tinymceSettings() {
        const tinymceObject = {
            "theme": "modern",
            "skin": "lightgray",
            "language": "en",
            "formats": {
                "alignleft": [
                    {
                        "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li",
                        "styles": {
                            "textAlign": "left"
                        },
                        "deep": false,
                        "remove": "none"
                    },
                    {
                        "selector": "img,table,dl.wp-caption",
                        "classes": [
                            "alignleft"
                        ],
                        "deep": false,
                        "remove": "none"
                    }
                ],
                "aligncenter": [
                    {
                        "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li",
                        "styles": {
                            "textAlign": "center"
                        },
                        "deep": false,
                        "remove": "none"
                    },
                    {
                        "selector": "img,table,dl.wp-caption",
                        "classes": [
                            "aligncenter"
                        ],
                        "deep": false,
                        "remove": "none"
                    }
                ],
                "alignright": [
                    {
                        "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li",
                        "styles": {
                            "textAlign": "right"
                        },
                        "deep": false,
                        "remove": "none"
                    },
                    {
                        "selector": "img,table,dl.wp-caption",
                        "classes": [
                            "alignright"
                        ],
                        "deep": false,
                        "remove": "none"
                    }
                ],
                "strikethrough": {
                    "inline": "del",
                    "deep": true,
                    "split": true
                }
            },
            "relative_urls": false,
            "remove_script_host": false,
            "convert_urls": false,
            "browser_spellcheck": true,
            "fix_list_elements": true,
            "entities": "38,amp,60,lt,62,gt",
            "entity_encoding": "raw",
            "keep_styles": false,
            "cache_suffix": "wp-mce-49110-20201110",
            "resize": "vertical",
            "menubar": false,
            "branding": false,
            "preview_styles": "font-family font-size font-weight font-style text-decoration text-transform",
            "end_container_on_empty_block": true,
            "wpeditimage_html5_captions": true,
            "wp_lang_attr": "en-US",
            "wp_keep_scroll_position": false,
            "wp_shortcut_labels": {
                "Heading 1": "access1",
                "Heading 2": "access2",
                "Heading 3": "access3",
                "Heading 4": "access4",
                "Heading 5": "access5",
                "Heading 6": "access6",
                "Paragraph": "access7",
                "Blockquote": "accessQ",
                "Underline": "metaU",
                "Strikethrough": "accessD",
                "Bold": "metaB",
                "Italic": "metaI",
                "Code": "accessX",
                "Align center": "accessC",
                "Align right": "accessR",
                "Align left": "accessL",
                "Justify": "accessJ",
                "Cut": "metaX",
                "Copy": "metaC",
                "Paste": "metaV",
                "Select all": "metaA",
                "Undo": "metaZ",
                "Redo": "metaY",
                "Bullet list": "accessU",
                "Numbered list": "accessO",
                "Insert/edit image": "accessM",
                "Insert/edit link": "metaK",
                "Remove link": "accessS",
                "Toolbar Toggle": "accessZ",
                "Insert Read More tag": "accessT",
                "Insert Page Break tag": "accessP",
                "Distraction-free writing mode": "accessW",
                "Add Media": "accessM",
                "Keyboard Shortcuts": "accessH"
            },
            "content_css": "http://codeupdate.com/wp-includes/css/dashicons.min.css?ver=6.6.2,http://codeupdate.com/wp-includes/js/tinymce/skins/wordpress/wp-content.css?ver=6.6.2",
            "plugins": "charmap,colorpicker,hr,lists,media,paste,tabfocus,textcolor,fullscreen,wordpress,wpautoresize,wpeditimage,wpemoji,wpgallery,wplink,wpdialogs,wptextpattern,wpview,image",
            "wpautop": true,
            "indent": false,
            "toolbar1": "formatselect,bold,italic,bullist,numlist,blockquote,alignleft,aligncenter,alignright,link,wp_more,spellchecker,fullscreen,wp_adv",
            "toolbar2": "strikethrough,hr,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help",
            "toolbar3": "",
            "toolbar4": "",
            "tabfocus_elements": ":prev,:next",
            "body_class": "form-field-nametesting post-type-page post-status-publish page-template-default locale-en-us"
        };

        return tinymceObject;
    }

    applyBorderCss() {
        let txtarea = this.textarea[0];
        if (txtarea) {

            let classList = txtarea.classList;// Accessing the `style` property directly
            let borderClass = Array.from(classList).filter(className => className.includes('border'))[0];
            // let borRadiusClass = Array.from(classList).filter(className => className.includes('radius'))[0];

            let borderStyle = borderClass.replace('border_', '').replace(/_/g, ' ');
            // let borderRadiStyle = borRadiusClass.replace('radius_', ''); 
            jQuery('.cfkef-wysiwyg-wrapper').css("border", borderStyle);
            //     jQuery('.cfkef-wysiwyg-wrapper').css("border-radius", borderRadiStyle);
        }

    }
}

jQuery(document).on('submit', 'form', function () {
    tinymce.triggerSave();
});

jQuery(window).on('elementor/frontend/init', () => {
    const addHandler = ($element) => {
        elementorFrontend.elementsHandler.addHandler(CoolFormWYSIWYG_Editor_Render, {
            $element,
        });
    };

    elementorFrontend.hooks.addAction('frontend/element_ready/cool-form.default', addHandler);
});
