class InputHandler extends elementorModules.frontend.handlers.Base {

    getDefaultSettings() {
        return {
            selectors: {
                calInput: '.elementor-field-textual',
                calDiv: '.elementor-field-type-text',
                form: '.elementor-form'
            },
        };
    }

    getDefaultElements() {
        const selectors = this.getSettings('selectors');
        return {
            $calInput: this.$element.find(selectors.calInput),
            $calDiv: this.$element.find(selectors.calDiv),
            $form: this.$element.find(selectors.form),
        };
    }

    bindEvents() {
        let elmWrapper = this.elements.$calDiv;
        let eleInput = jQuery(elmWrapper).find('input');
    
        if (eleInput.length === 0) return; 
    
        eleInput.each((index, input) => {
            let maskClass, maskFormat, maskPrefix,maskDecimalPlaces,maskTimeMaskFormat,phoneFormat,creditCardOptions,maskAutoPlaceholder,brazilianFormats;
    
            input.classList.forEach(className => {
                if (className.includes('mask_control_@')) maskClass = className;
                if (className.includes('money_mask_format_@')) maskFormat = className;
                if (className.includes('mask_prefix_@')) maskPrefix = className;
                if (className.includes('mask_decimal_places_@')) maskDecimalPlaces = className;
                if (className.includes('mask_time_mask_format_@')) maskTimeMaskFormat = className;
                if (className.includes('fme_phone_format_@')) phoneFormat = className;
                if (className.includes('credit_card_options_@')) creditCardOptions = className;
                if (className.includes('mask_auto_placeholder_@')) maskAutoPlaceholder = className;
                if (className.includes('fme_brazilian_formats_@')) brazilianFormats = className;
            });
    
            if (maskClass) maskClass = maskClass.split('@');
            if (maskFormat) maskFormat = maskFormat.split('@');
            if (maskPrefix) maskPrefix = maskPrefix.split('@');
            if (maskDecimalPlaces) maskDecimalPlaces = maskDecimalPlaces.split('@');
            if (maskTimeMaskFormat) maskTimeMaskFormat = maskTimeMaskFormat.split('@');
            if (phoneFormat) phoneFormat = phoneFormat.split('@');
            if (creditCardOptions) creditCardOptions = creditCardOptions.split('@');
            if (maskAutoPlaceholder) maskAutoPlaceholder = maskAutoPlaceholder.split('@');
            if (brazilianFormats) brazilianFormats = brazilianFormats.split('@');
    
            if (!jQuery(input).data('mask')) {
                input.setAttribute('data-input_mask', maskClass?.[1] || '');
            }
    
            input.setAttribute('data-moneymask-format', maskFormat?.[1] || 'dot');
            input.setAttribute('data-moneymask-prefix', maskPrefix?.[1] || '');
            input.setAttribute('data-decimal-places', maskDecimalPlaces?.[1] || '2');
            input.setAttribute('data-timemask-format', maskTimeMaskFormat?.[1] || 'one');
            input.setAttribute('data-phone-format', phoneFormat?.[1] || 'phone_usa');
            input.setAttribute('data-creditcard-options', creditCardOptions?.[1] || 'hyphen');
            input.setAttribute('data-auto-placeholder', maskAutoPlaceholder?.[1] || '');
            input.setAttribute('data-brazilian-formats', brazilianFormats?.[1] || '');
        });
    
        this.applyMasks();
    }    

    applyMasks() {
        const masks = {
            "ev-phone": "phone",
            "ev-tel": "####-####",
            "ev-tel-ddd": "(##) ####-####",
            "ev-tel-ddd9": "(##) #####-####",
            "ev-tel-us": "(###) ###-####",
            "ev-cpf": "###.###.###-##",
            "ev-cnpj": "##.###.###/####-##",
            "ev-money": "###.###.###.###.###,##",
            "ev-ccard": "####-####-####-####",
            "ev-ccard-valid": "##/##",
            "ev-cep": "#####-###",
            "ev-time": "##:##:##",
            "ev-date": "##/##/####",
            "ev-date_time": "##/##/#### ##:##",
            "ev-ip-address": "###.###.###.###",
            "ev-br_fr": "brazilian_formats",
        };
        
        jQuery('input[data-input_mask]').each(function () {
            const $input = jQuery(this);
            const maskKey = jQuery(this)[0].dataset.input_mask;
            const timemaskFormat = jQuery(this)[0].dataset.timemaskFormat;
            const phoneFormat = jQuery(this)[0].dataset.phoneFormat;
            const creditcardOptions = jQuery(this)[0].dataset.creditcardOptions
            const autoPlaceholder = jQuery(this)[0].dataset.autoPlaceholder
            const brazilianFormats = jQuery(this)[0].dataset.brazilianFormats

            if (masks[maskKey]) {
                if(masks[maskKey] === 'phone'){
                    $input.attr('inputmode','tel')
                }else{
                    $input.attr('inputmode','numeric')
                }
                if(masks[maskKey] === 'brazilian_formats'){
                    switch(brazilianFormats){
                        case 'fme_cpf':
                            $input.addClass('mask-cpf');
                            $input.after('<div class="mask-error error-cpf"></div>');
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XXX.XXX.XXX-XX')
                            }
                            break;
                        case 'fme_cnpj':
                            $input.addClass('mask-cnpj');
                            $input.after('<div class="mask-error error-cnpj"></div>');
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XX.XXX.XXX/XXXX-XX')
                            }
                            break;
                        case 'fme_cep':
                            $input.addClass('mask-cep');
                            $input.after('<div class="mask-error error-cep"></div>');
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XXXXX-XXX')
                            }
                            break;
                        default:
                            $input.addClass('mask-cpf');
                            $input.after('<div class="mask-error error-cpf"></div>');
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XXX.XXX.XXX-XX')
                            }
                    }
                }
                if (masks[maskKey] === "##/##/####") {
                  $input.addClass('mask-dmy');
                  $input.after('<div class="mask-error error-dmy"></div>');
                  if(autoPlaceholder === 'yes'){
                    $input.attr('placeholder','XX/XX/XXXX')
                  }
                }
                if (masks[maskKey] === "##.###.###/####-##") {
                  $input.addClass('mask-cnpj');
                  $input.after('<div class="mask-error error-cnpj"></div>');
                  if(autoPlaceholder === 'yes'){
                    $input.attr('placeholder','XX.XXX.XXX/XXXX-XX')
                  }
                }
                if (masks[maskKey] === "###.###.###-##") {
                  $input.addClass('mask-cpf');
                  $input.after('<div class="mask-error error-cpf"></div>');
                  if(autoPlaceholder === 'yes'){
                    $input.attr('placeholder','XXX.XXX.XXX-XX')
                  }
                }
                if (masks[maskKey] === "#####-###") {
                  $input.addClass('mask-cep');
                  $input.after('<div class="mask-error error-cep"></div>');
                  if(autoPlaceholder === 'yes'){
                    $input.attr('placeholder','XXXXX-XXX')
                  }
                }
                if (masks[maskKey] === "(###) ###-####") {
                  $input.addClass('mask-phus');
                  $input.after('<div class="mask-error error-phus"></div>');
                  if(autoPlaceholder === 'yes'){
                    $input.attr('placeholder','(XXX) XXX-XXXX')
                  }
                }
                if (masks[maskKey] === "phone") {
                    switch(phoneFormat){
                        case 'phone_usa':
                            $input.addClass('mask-phus');
                            $input.after('<div class="mask-error error-phus"></div>');          
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','(XXX) XXX-XXXX')
                            }
                            break;
                        case 'phone_d8':
                            $input.addClass('mask-ph8');
                            $input.after('<div class="mask-error error-ph8"></div>');          
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XXXX-XXXX')
                            }
                            break;
                        case 'phone_ddd8':
                            $input.addClass('mask-ddd8');
                            $input.after('<div class="mask-error error-ddd8"></div>');          
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','(XX) XXXX-XXXX')
                            }
                            break;
                        case 'phone_ddd9':
                            $input.addClass('mask-ddd9');
                            $input.after('<div class="mask-error error-ddd9"></div>');          
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','(XX) XXXXX-XXXX')
                            }
                            break;
                        default:
                            // $input.addClass('mask-ph8');
                            // $input.after('<div class="mask-error error-ph8"></div>');
                            // if(autoPlaceholder === 'yes'){
                            //     $input.attr('placeholder','XXXX-XXXX')
                            // }
                            // break
                    }
                }
                if (masks[maskKey] === "####-####") {
                    $input.addClass('mask-ph8');
                    $input.after('<div class="mask-error error-ph8"></div>'); 
                    if(autoPlaceholder === 'yes'){
                        $input.attr('placeholder','XXXX-XXXX')
                    }
                }
                if (masks[maskKey] === "(##) ####-####") {
                  $input.addClass('mask-ddd8');
                  $input.after('<div class="mask-error error-ddd8"></div>');
                  if(autoPlaceholder === 'yes'){
                    $input.attr('placeholder','(XX) XXXX-XXXX')
                  }
                }
                if (masks[maskKey] === "(##) #####-####") {
                  $input.addClass('mask-ddd9');
                  $input.after('<div class="mask-error error-ddd9"></div>');
                  if(autoPlaceholder === 'yes'){
                    $input.attr('placeholder','(XX) XXXXX-XXXX')
                  }
                }
                if (masks[maskKey] === "##/##/####") {
                  $input.addClass('mask-dmy');
                  $input.after('<div class="mask-error error-dmy"></div>');
                  if(autoPlaceholder === 'yes'){
                    $input.attr('placeholder','XX/XX/XXXX')
                  }
                }
                if (masks[maskKey] === "##:##:##") {
                    switch(timemaskFormat){
                        case 'one':
                            $input.addClass('mask-hm');
                            $input.after('<div class="mask-error error-hm"></div>');
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XX:XX')
                            }
                            break;
                        case 'two':
                            $input.addClass('mask-hms');
                            $input.after('<div class="mask-error error-hms"></div>');
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XX:XX:XX')
                            }
                            break;
                        case 'three':
                            $input.addClass('mask-dmy');
                            $input.after('<div class="mask-error error-dmy"></div>');
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XX/XX/XXXX')
                            }
                            break;
                        case 'four':
                            $input.addClass('mask-mdy');
                            $input.after('<div class="mask-error error-mdy"></div>');
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XX/XX/XXXX')
                            }
                            break;
                        case 'five':
                            $input.addClass('mask-dmyhm');
                            $input.after('<div class="mask-error error-dmyhm"></div>');
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XX/XX/XXXX XX:XX')
                            }
                            break;
                        case 'six':
                            $input.addClass('mask-mdyhm');
                            $input.after('<div class="mask-error error-mdyhm"></div>');
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XX/XX/XXXX XX:XX')
                            }
                            break;
                        case 'seven':
                            $input.addClass('mask-my');
                            $input.after('<div class="mask-error error-my"></div>');
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XX/XXXX')
                            }
                            break;
                        default:
                            $input.addClass('mask-hm');
                            $input.after('<div class="mask-error error-hm"></div>');
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XX:XX')
                            }
                    }
                }
                if (masks[maskKey] === "##:##") {
                  $input.addClass('mask-hm');
                  $input.after('<div class="mask-error error-hm"></div>');
                  if(autoPlaceholder === 'yes'){
                    $input.attr('placeholder','XX:XX')
                  }
                }
                if (masks[maskKey] === "##/##/#### ##:##") {
                  $input.addClass('mask-dmyhm');
                  $input.after('<div class="mask-error error-dmyhm"></div>');
                  if(autoPlaceholder === 'yes'){
                    $input.attr('placeholder','XX/XX/XXXX XX:XX')
                  }
                }
                if (masks[maskKey] === "####-####-####-####") {
                    switch(creditcardOptions){
                        case 'space':
                            $input.addClass('mask-ccs');
                            $input.after('<div class="mask-error error-ccs"></div>');
                            const $errorDivCCS = $input.next('.error-ccs'); 
                            if ($errorDivCCS.next('.card-logo').length === 0) { 
                                $errorDivCCS.after('<img id="card-logo" class="card-logo" src="" alt="Card Logo">');
                            }
                            if (autoPlaceholder === 'yes') {
                                $input.attr('placeholder', 'XXXX XXXX XXXX XXXX');
                            }
                            break;
                        case 'hyphen':
                            $input.addClass('mask-cch');
                            $input.after('<div class="mask-error error-cch"></div>');
                            const $errorDiv = $input.next('.error-cch'); 
                            if ($errorDiv.next('#card-logo').length === 0) { 
                                $errorDiv.after('<img id="card-logo" class="card-logo" src="" alt="Card Logo">');
                            }
                            if (autoPlaceholder === 'yes') {
                                $input.attr('placeholder', 'XXXX-XXXX-XXXX-XXXX');
                            }                         
                            break;
                        case 'credit_card_date':
                            $input.addClass('mask-ccmy');
                            $input.after('<div class="mask-error error-ccmy"></div>');
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XX/XX')
                            }
                            break;
                        case 'credit_card_expiry_date':
                            $input.addClass('mask-ccmyy');
                            $input.after('<div class="mask-error error-ccmyy"></div>');
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XX/XXXX')
                            }
                            break;
                        default:
                            $input.addClass('mask-ccs');
                            $input.after('<div class="mask-error error-ccs"></div>');
                            jQuery('.mask-error').after('<img id="card-logo" class="card-logo" src="" alt="Card Logo">')
                            if(autoPlaceholder === 'yes'){
                                $input.attr('placeholder','XXXX XXXX XXXX XXXX')
                            }
                    }
                }
                if (masks[maskKey] === "##/##") {
                  $input.addClass('mask-ccmy');
                  $input.after('<div class="mask-error error-ccmy"></div>');
                  if(autoPlaceholder === 'yes'){
                    $input.attr('placeholder','XX/XX')
                  }
                }
                if (masks[maskKey] === "##/####") {
                  $input.addClass('mask-my');
                  $input.after('<div class="mask-error error-my"></div>');
                  if(autoPlaceholder === 'yes'){
                    $input.attr('placeholder','XX/XXXX')
                  }
                }
                if (masks[maskKey] === "###.###.###.###") {
                  $input.addClass('mask-ipv4');
                  $input.after('<div class="mask-error error-ipv4"></div>');
                  if(autoPlaceholder === 'yes'){
                    $input.attr('placeholder','XXX.XXX.XXX.XXX')
                  }
                }
                if (masks[maskKey] === "###.###.###.###.###,##") {
                  $input.addClass('mask-moneyc');
                  $input.after('<div class="mask-error error-moneyc"></div>');
                  if(autoPlaceholder === 'yes'){
                    let moneyPrefix = ($input.data('moneymask-prefix') !== "") ? $input.data('moneymask-prefix'): '$';
                    let format = ($input.data('moneymask-format') === 'dot' ? ',':'.')
                    $input.attr('placeholder',moneyPrefix+`0${format}00`)
                  }
                }
            }
        });
    }
}

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