class EhpForm_LSFEFHandler extends elementorModules.frontend.handlers.Base {
    getDefaultSettings() {
        return {
            selectors: {
                inputDiv: '.ehp-form__field-group',
                inputField: '.ehp-form__field',
                formStyleWrp: '.lsfef-form-style, .icon_clss'
            },
        };
    }

    getDefaultElements() {
        const selectors = this.getSettings('selectors');
        return {
            $form: this.$element.find('form'),
            $inputDivGet: this.$element.find(selectors.inputDiv),
            $formWrp: this.$element.find(selectors.formStyleWrp),
        }
    }

    bindEvents() {
        if (this.elements.$formWrp.length > 0) {
            this.addCustomClass();
            this.changeLablePosition();
            this.addIconInputField();
        }

        this.changeIconPostion();
    }

    addCustomClass() {
        const inputs = this.$element.find("form .lsfef_custom_class");
        
        inputs.each(function (index) {
            const input = jQuery(this);
            const classList = input[0].classList;
            let styleClass = "";
            let iconClass = "";
            let iconSvgClass = "";
            let iconStyleClass = "";

            classList.forEach(function (className) {
                if (className.startsWith("lsfef_custom_style_class_")) {
                    styleClass = className;
                }

                if (className.startsWith("lsfef_icon_cls_")) {
                    iconClass = className;
                }

                if (className.startsWith("lsfef_icon_cls_svg_")) {
                    iconSvgClass = className;
                }

                if (className.startsWith("lsfe_icon_style")) {
                    iconStyleClass = className;
                }


            });
            const style = styleClass.replace("lsfef_custom_style_class_", "");
            const lsfe_iconstyle = iconStyleClass.replace("lsfe_icon_style_", "")

            const fieldGroup = input.closest(".ehp-form__field-group");
            fieldGroup.attr("data-lsfef-style", style);
            fieldGroup.addClass(`label-${style}`);
            fieldGroup.addClass(`${lsfe_iconstyle}`);
            if (input.hasClass('icon_clss')) {
                fieldGroup.addClass('icon_clss');
                input.removeClass('icon_clss')
            }

            input.removeClass("lsfef_custom_class");
            input.removeClass(styleClass);
            input.removeClass(iconStyleClass);

            const iconsvgCls = iconSvgClass
            .replace("lsfef_icon_cls_svg_", "");

            const iconCls = iconClass
                .replace("lsfef_icon_cls_", "")
                .replace("_", " ");
                
            if (iconCls) {
                const iconHtml = `<div class="icon_div"><i aria-hidden="true" class="${iconCls}"></i></div>`;
                fieldGroup.append(iconHtml);
            }
            
            if (iconsvgCls) {
                const iconHtml = `<div class="icon_div"><img src="${iconsvgCls}" alt="icon" class="svg-icon"></div>`;
                fieldGroup.append(iconHtml);
            }
    
            input.removeClass(iconClass);
        });
    }


    changeLablePosition() {

        const inputs = this.$element.find('.ehp-form__field-group[data-lsfef-style]');
        inputs.each(function (index) {
            const wrraper = jQuery(this);
            const input = wrraper.find('.ehp-form__field');

            if (wrraper.attr('data-lsfef-style') === 'none') {
                return;
            }


            if (input[0].placeholder === '') {
                if (input.length > 0 && input[0].placeholder === '') {
                    if(!input.closest('.is-field-type-tel')){
                        wrraper.find('.ehp-form__field')[0].placeholder = ' ';
                    }
                }
                // wrraper.find('.ehp-form__field')[0].placeholder = ' ';
            }
            const label = wrraper.find('label.ehp-form__field-label');
            const clonedLabel = label.clone();
            label.remove();
            input.after(clonedLabel);

        });
    }


    addIconInputField() {
        // const inputMainDiv = this.$element.find('.elementor-form-fields-wrapper');
        this.$element.find('.ehp-form__field-group').each(function () {
            const fieldGroup = jQuery(this);
            const inputField = fieldGroup.find('.ehp-form__field').first();
            const label = fieldGroup.find('.ehp-form__field-label').first();
            if (inputField.length <= 0) {
                return;
            }
            const inputStyles = getComputedStyle(inputField[0]);
            const fontSize = parseInt(inputStyles.fontSize);
            // const labelLeftpos = parseInt(inputStyles.paddingLeft);
            // const labelTopPos = parseInt(inputStyles.paddingTop);
            const padingBottom = parseInt(inputStyles.paddingBottom);
            const borderTopWidth = parseInt(inputStyles.borderTopWidth);
            const borderbottomWidth = parseInt(inputStyles.borderBottomWidth);
            const paddingTop = parseInt(inputStyles.paddingTop);
            const paddingLeft = parseInt(inputStyles.paddingLeft);
            const offsetTop = inputField[0].offsetTop;
            const offsetLeft = inputField[0].offsetLeft;
            const LeftBorder = parseInt(inputStyles.borderLeftWidth);
            const topradius = parseInt(inputStyles.borderTopLeftRadius);
            const rightradius = parseInt(inputStyles.borderTopRightRadius);
            const leftradius = parseInt(inputStyles.borderBottomLeftRadius);
            const bottomradius = parseInt(inputStyles.borderBottomRightRadius);
            const inputHeight = inputField.height();
            const rightPadding = parseInt(inputStyles.paddingRight);
            const backgroundColor = inputStyles.backgroundColor;
            const previousStyle = fieldGroup.attr('style');
            if (inputField.hasClass('lsfef-form-style')) {
                fieldGroup.addClass('lsfef-form-style');
            }
            let cssVarStyle = `${previousStyle}  --lsfef-input-offset-top: ${offsetTop}px; --lsfef-input-padding-top: ${paddingTop}px; --lsfef-input-offset-left: ${offsetLeft}px;  --lsfef-input-height: ${inputHeight}px; --lsfef-input-padding-bottom:${padingBottom}px; --lsfef-input-padding-left:${paddingLeft}px;  --lsfef-field-border-top:${borderTopWidth}px;  --lsfef-field-border-left:${LeftBorder}px; --lsfef-input-padding-right:${rightPadding}px; --lsfef-field-border-bottom :${borderbottomWidth}px; --lsfef-field-border-right-radius:${rightradius}px; --lsfef-field-border-bottom-radius:${bottomradius}px; --lsfef-field-border-top-radius:${topradius}px; --lsfef-field-border-left-radius:${leftradius}px; --lsfef-site-field-font-size:${fontSize}px; --lsfef-site-field-background-color:${backgroundColor};`;
            if (label[0]) {
                const labelStyle = getComputedStyle(label[0]);
                const labelFontSize = parseInt(labelStyle.fontSize);
                cssVarStyle += ` --lsfef-site-label-spacing:${labelFontSize}px;`;
            }
 
            fieldGroup[0].style = cssVarStyle;

            if (fieldGroup.hasClass('icon_clss')) {
                fieldGroup.find('.ehp-form__field').addClass("lsfef-padding");
            }
        });
    }

    changeIconPostion() {
        // const inputMainDiv = this.$element.find(".elementor-form-fields-wrapper");        
        this.$element.find(".ehp-form__field-group").each(function (index) {
            if (jQuery(this)[0].previousElementSibling) {
                if (
                    jQuery(this)[0].previousElementSibling.classList.contains("icon_div")
                ) {
                    const iconELe = jQuery(this)[0].previousElementSibling;
                    const iconMainDiv = jQuery(iconELe).clone();
                    iconELe.remove();
                    jQuery(this).append(iconMainDiv);
                }
            }
        });
    }
}

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


