class RSFEHandler extends elementorModules.frontend.handlers.Base {
    getDefaultSettings() {
        return {
            selectors: {
                sliderCls: '.form-range-field',
            },
          
        };
    }
    
    getDefaultElements() {
        const selectors = this.getSettings('selectors');
        return {
            $element: this.$element.find(selectors.sliderCls),
        };
    }

    bindEvents() {
      
        const element = this.elements.$element;
        const applySliderStyle = (element) => {
            this.skinClass(element);
            const $element = jQuery(element);
            const $wrapper = $element.closest('.elementor-field-type-slider');
            if($wrapper.hasClass('rsfe-custom-skin')){
                setTimeout(()=>{
                    $element.ionRangeSlider({
                        skin: 'round',
                        onStart: this.attachCustomInput,
                        onChange: (data) => {
                            const $inp = data.input.closest('.elementor-field-type-slider').find('span.irs-input-span input');
                            if ($inp){
                                $inp.prop('value',data.from)
                            } 
                        },
                        onUpdate: this.attachCustomInput
                    });
                },100)

            }else{
                jQuery(element).ionRangeSlider({
                    skin:'round',
                });
            }
        };
        element.each((_, element) => {
            applySliderStyle(element);
            // element.value='';
            this.customSkin(element);
            this.customPointer(element);
            this.addRepeaterId(element);
        });

        this.resetFormData();
    }

    customSkin(ele){
       const element=jQuery(ele);
       const skin=element.data('custom-skin');

       if(skin && 'custom' === skin){
        let trigger=false;
        const wrapper=element.closest('.elementor-field-type-slider');
        wrapper.addClass('rsfe-custom-skin');

        const updateClass=()=>{
            if(!trigger){
                trigger=true;
                wrapper.addClass('rsfe-active');
                document.addEventListener('mouseup',updateClass);
            }else{
                trigger=false;
                wrapper.removeClass('rsfe-active');
                document.removeEventListener('mouseup',updateClass);
            }
        };

        const handle=wrapper.find('.irs-handle');
        if(handle.length > 0){
            handle[0].addEventListener('mousedown',updateClass);
        }
       }
    }
 
    attachCustomInput(data) {
        let $wrapper = jQuery(data.input).closest('.elementor-field-type-slider');
        if($wrapper.hasClass('rsfe-rangetype-double')) return;
        let $firstIrs  = $wrapper.find('.irs--round');

        if($wrapper.find('.irs-input-span input').length === 0){
            $firstIrs.before('<span class="irs-input-span"><input type="text"/></span>')
            let irsInput = $wrapper.find('.irs-input-span input')

            irsInput.prop('value',data.from)
            irsInput.on('input', function() {
                let val = parseFloat(jQuery(this).val()) || data.from;
                let instance = data.input.data('ionRangeSlider')
                instance.update({ from: val });
            });
        }
    }

    skinClass(ele){
        const element=jQuery(ele);
        const skin=element.data('custom-skin');
        const rangeType = element.data('type')
        const wrapper=element.closest('.elementor-field-type-slider');
 
        wrapper.addClass(`rsfe-rangetype-${rangeType}`);
        if(skin && 'custom' === skin){
         let trigger=false;
         wrapper.addClass('rsfe-custom-skin');
        }else{
            const skinCls=element.data('skin');
            wrapper.addClass(`rsfe-${skinCls}-skin`);
        }
    }
    

    customPointer(ele){
        const element=jQuery(ele);
        const skin=element.data('custom-skin');
        const wrapper=element.closest('.elementor-field-type-slider');
        let pointerTrigger=false;
        const rsfeUpdatePointer=()=>{
            if(!pointerTrigger){
                pointerTrigger=true;
                jQuery('body').addClass('rsfe-grab-pointer');
                document.addEventListener('mouseup',rsfeUpdatePointer);
            }else{
                pointerTrigger=false;
                jQuery('body').removeClass('rsfe-grab-pointer');
                document.removeEventListener('mouseup',rsfeUpdatePointer);
            }
        };
        const handle=wrapper.find('.irs-handle');
        if(handle.length > 0){
            handle[0].addEventListener('mousedown',rsfeUpdatePointer);
        }
    }
    
    resetFormData() {
        // Update form filed hidden status after form submit
        const currentForm = this.$element.data('id');
        const element = this.elements.$element;
        jQuery(document).on('submit_success',  (e, data) => {
            const submitFormId = jQuery(e.target).closest('.elementor-element.elementor-widget.elementor-widget-form').data('id');
            if (submitFormId === currentForm) {
                element.each((_, element) => {
                    let my_range = jQuery(element).data("ionRangeSlider");
                    my_range.reset();
                });
            }
        });
    }

    addRepeaterId(element){
        const uniqueId=element.getAttribute('data-input-id');
        element.closest('.elementor-field-type-slider').classList.add(`elementor-repeater-item-${uniqueId}`);
    }
}

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