let RepsolRegister = { 
    url: "/bin/repsol-ecommerce/store/register",
    init: function(){
        const $registerComponents = document.querySelectorAll(".register-component");
        $registerComponents.forEach(($component) => {
            RepsolRegister.events($component); 
            RepsolRegister.setModalText($component);
            const isNew360 = $component.querySelector('.new360')?.getAttribute("data-new-consents");
            const $form = $component.querySelector('.register-form');   
            $form.setAttribute('data-new-360', isNew360);
        });       
    },
    events: function($component){     
        const $form = $component.querySelector('.register-form');   
        const $inputs = $form.querySelectorAll("input");
        const $submitBtn =  $form.querySelector('.js-send-register-form');
        const $registerModals = $component.querySelectorAll(".register-aux-msg-modal");
        const $cifRegisterModal = $component.querySelector(".cif-register-modal");

        $inputs.forEach(($input) => {
            $input.addEventListener("change", ()=>{
                RepsolRegister.checkContent($form);
            });
        });       


        $submitBtn.addEventListener("click", (ev)=>{
            ev.preventDefault();         
            RepsolRegister.submitInfo( $form );
        });

        $($form).on("blur", "input[name='password']", function () {            
            Repsol.forms.validate.InputPassword($(this), true);
            if ($(this).attr("data-status") == 'false') {
                RepsolRegister.analytics.errorField($(this));
                var params = {
                    error_description: $(this).siblings('.error-msg:not(.d-none)').first().text(),                        
                    error_type: 'form_error'
                }
                Repsol.AnalyticsRomProd.errorRomProd($(this), params);

            }
        });

        $($form).on("blur", "input[name='document-number']", function () {
            var $typeDoc =$form.querySelector(".dropdown-toggle[data-name='id-document']"),
                $numberDoc = $form.querySelector("input[name='document-number']");
            if ($typeDoc?.getAttribute("data-value") != "") {
                Repsol.forms.validate.InputDocumentNumber({
                    $typeDocObj: $typeDoc ? $($typeDoc) : null,
                    $numberDocObj: $($numberDoc)
                });
                if ($numberDoc.getAttribute("data-status") == 'false') {
                    RepsolRegister.analytics.errorField($(this));
                    var params = {
                        error_description: $(this).siblings('.error-msg:not(.d-none)').first().text(),
                        error_type: 'form_error'
                    }
                    Repsol.AnalyticsRomProd.errorRomProd($(this), params);
                }
            } else {
                Repsol.forms.validate.SelectedDropdown($($typeDoc));
            }
        });

        $($form).on("rp-change", ".dropdown-toggle[data-name='id-document']", function () {
            var $typeDoc =$form.querySelector(".dropdown-toggle[data-name='id-document']"),
            $numberDoc = $form.querySelector("input[name='document-number']");

            let typeDoc = $typeDoc.getAttribute("data-value");
            if(typeDoc == 'CIF'){
                RepsolRegister.showCifModal($component)
            } else if ($numberDoc.value) {
                Repsol.forms.validate.InputDocumentNumber({
                    $typeDocObj: $typeDoc ? $($typeDoc) : null,
                    $numberDocObj: $($numberDoc)
                });                                    
            }                               
        }); 
        $($form).on("blur", "input[name='email']", function () {   
            Repsol.forms.validate.InputEmail($(this));
            if ($(this).attr("data-status") == 'false') {
                RepsolRegister.analytics.errorField($(this));
                var params = {
                    error_description: $(this).siblings('.error-msg:not(.d-none)').first().text(),
                    error_type: 'form_error'
                }
                Repsol.AnalyticsRomProd.errorRomProd($(this), params);
            }
        });            

        $($form).on("validated_field", "input[name='name'], input[name='surname']", function () { 
            if ($(this).attr("data-status") == 'false') {
                RepsolRegister.analytics.errorField($(this));
                var params = {
                    error_description: $(this).siblings('.error-msg:not(.d-none)').first().text(),
                    error_type: 'form_error'
                }
                Repsol.AnalyticsRomProd.errorRomProd($(this), params);
            }  
        });
        
        $registerModals.forEach(($registerModal) => {            
            $($registerModal).on('show.bs.modal', function (e) {                
                let $modal = $(this);
                $modal.addClass("backdrop");
            });

            $($registerModal).on('hidden.bs.modal', function (e) {
                let $modal = $(this);
                $modal.removeClass("backdrop");
                let $modalParent = $modal.parent().closest(".modal");
                if($modalParent.length > 0){                   
                    if(!$(document).find("body").hasClass("modal-open") && $modalParent.hasClass("show")){
                        $(document).find("body").addClass("modal-open")
                    }
                }
            });  

            $($registerModal).on("click", function (e) {                
                let $target = $(e.target);
                if( $target.hasClass("register-aux-msg-modal")){
                    $(this).modal("hide");
                }
            });
            
        });  

        $($cifRegisterModal).on('hidden.bs.modal', function (e) {            
            let typeDoc = $form.querySelector(".dropdown-toggle[data-name='id-document']")
            numberDoc = $form.querySelector("input[name='document-number']")
            let dniOption = typeDoc.closest(".rp-dropdown ").querySelector(".dropdown-item[data-value='DNI']")
            Repsol.select.setValue($(dniOption));
            
            if(numberDoc.value){
                Repsol.forms.validate.InputDocumentNumber({
                    $typeDocObj: (typeDoc) ? $(typeDoc) : null,
                    $numberDocObj: $(numberDoc)
                });
            }
        });
    },    
    checkContent: function($form){
        var $name = $form.querySelector("input[name='name']"),
            $surname = $form.querySelector("input[name='surname']"),
            $typeDoc = $form.querySelector(".dropdown-toggle[data-name='id-document']"),
            $numberDoc = $form.querySelector("input[name='document-number']"),            
            $email = $form.querySelector("input[name='email']"),
            $password = $form.querySelector("input[name='password']"),
            $legalPerfiladoComplejo = $form.querySelector("input[name='policy-perfilado-complejo-consent']"),
            $legalProfile = $form.querySelector("input[name='policy-cesion-profile']") ;           
            // $legalConsent = $form.querySelector("input[name='policy-cesion-consent']"),
            // $legalCosentThird = $form.querySelector("input[name='policy-cesion-third']")

        if (($typeDoc && $typeDoc.getAttribute("data-value").length) && ($numberDoc && $numberDoc.value.length) &&  $name.value.length && $surname.value.length && $email.value.length && $password.value.length) {
            $form.setAttribute("data-status", true);
        } else {
            $form.setAttribute("data-status", false);
        }
                  
    },
    submitInfo: function($form){
        var $name = $form.querySelector("input[name='name']"),
            $surname = $form.querySelector("input[name='surname']"),
            $typeDoc = $form.querySelector(".dropdown-toggle[data-name='id-document']"),
            $numberDoc = $form.querySelector("input[name='document-number']"),            
            $email = $form.querySelector("input[name='email']"),
            $password = $form.querySelector("input[name='password']"),
            $legalPerfiladoComplejo = $form.querySelector("input[name='policy-perfilado-complejo-consent']"),
            $legalProfile = $form.querySelector("input[name='policy-cesion-profile']");
            // $legalConsent = $form.querySelector("input[name='policy-cesion-consent']"),
            // $legalConsentTerceros = $form.querySelector("input[name='policy-cesion-third-consent']")

        if ( $name ){
            Repsol.forms.validate.InputName($($name));
        }

        if ($surname) {
            Repsol.forms.validate.InputSurname($($surname));
        }

        if ($typeDoc) {
            Repsol.forms.validate.SelectedDropdown($($typeDoc));
        }
       
        if ($numberDoc) {
            Repsol.forms.validate.InputDocumentNumber({
                $typeDocObj: $typeDoc ? $($typeDoc) : null,
                $numberDocObj: $($numberDoc)
            });
        }

        if ($email) {
            Repsol.forms.validate.InputEmail($($email));
        }

        if ($password) {
            Repsol.forms.validate.InputPassword($($password), true);
        }

        if ($legalProfile) {
            Repsol.forms.validate.CheckLegal($($legalProfile));
        }

        if ($legalPerfiladoComplejo) {
            Repsol.forms.validate.CheckLegal($($legalPerfiladoComplejo));
        }
        
        var nameStatus = ($name?.getAttribute("data-status") === "true"),
            surnameStatus = ($surname?.getAttribute("data-status") === "true"),
            typeDocStatus = ($typeDoc?.getAttribute("data-status") === "true"),
            numberDocStatus = ($numberDoc?.getAttribute("data-status") === "true"),
            emailStatus = ($email?.getAttribute("data-status") === "true"),            
            passwordStatus = ($password?.getAttribute("data-status") === "true"),
            legalPerfiladoComplejoStatus = ($legalPerfiladoComplejo?.getAttribute("data-status") === "true"),
            legalProfileStatus = ($legalProfile?.getAttribute("data-status") === "true");
            

        let allStatus = false;
    
        if (typeDocStatus && numberDocStatus && nameStatus && surnameStatus && emailStatus && passwordStatus) {
            allStatus = true;
        }
        
        if (allStatus){
            $form.closest(".form-ecommerce-content").getAttribute("data-status", "ok") 
            RepsolRegister.sendData($form);
        }else{
            RepsolRegister.analytics.error($form);
            var params = {                
                error_description: Repsol.AnalyticsRomProd.Getters.getFormErrorFields($($form)),
                funnel_type: 'register_long',
                funnel_action: 'create_account_form',
                funnel_step: '01',
                method: 'password',                
                service: 'tienda',                
                component_name: 'card de login'     
            }
            Repsol.AnalyticsRomProd.AccountErrorRomProd($($form), params);
        }
    },
    sendData: function($form){
        RepsolRegister.setLoader(true, $form); 


        var $name = $form.querySelector("input[name='name']"),
        $surname = $form.querySelector("input[name='surname']"),
        $typeDoc = $form.querySelector(".dropdown-toggle[data-name='id-document']"),
        $numberDoc = $form.querySelector("input[name='document-number']"),            
        $email = $form.querySelector("input[name='email']"),
        $password = $form.querySelector("input[name='password']"),
        $legalPerfiladoComplejoStatus = $form.querySelector("input[name='policy-perfilado-complejo-consent']");
        const isNew360 = $form.getAttribute('data-new-360') === 'true';
        
        var name = $name.value,
            surname = $surname.value,
            typeDoc =   $typeDoc.getAttribute("data-value")
            typeDocCode = "",
            numberDoc = $numberDoc.value,
            email = $email.value,
            password = $password.value,
            operation = "create",
            cartId = "";

        if (window.localStorage.cartId) {
            let data = JSON.parse(window.localStorage.cartId);
            cartId = data["id"];
        }

        const $typeDocOptions = $typeDoc.closest('.rp-dropdown').querySelectorAll(".dropdown-menu .dropdown-item");  
        $typeDocOptions.forEach(($option)=>{
            if($option.getAttribute("data-value") == typeDoc){
                typeDocCode = $option.getAttribute("data-code");
                return false;
            }
        });
       
        var data ={
            "name": name,
            "lastName": surname,
            "documentType": typeDocCode,
            "document" : numberDoc,
            "email": email,
            "password": password,
            "operation": operation,
            "cartId": cartId,
            "isNew360": isNew360
        };
      
        // if($form.querySelector("input[name=policy-cesion-consent]").checked){
        //     data["consentCesion"] = "true"
        // }

        if (isNew360 === "true") {
        //     data["consentCesionTerceros"] = $form.querySelector("input[name=policy-cesion-third-consent]")?.checked ? "true" : "false";
        } 
        else {
            
             data["consentPerfilado"] = $form.querySelector("input[name=policy-cesion-profile]")?.checked ? "true" : "false";            
        }
        
        if($form.querySelector("input[name=policy-perfilado-complejo-consent]")?.checked){
            data["consentPerfiladoComplejo"] = "true"
        }

        let dataJson = JSON.stringify(data)

        let xhr = new XMLHttpRequest();
        xhr.addEventListener("readystatechange", function () {   
            var errorMsg = '';         
            if (this.readyState === 4) {
                if (this.status == 200) {
                    let response = JSON.parse(this.responseText);
                    let errorCode = response.errorCode; 
                    if(errorCode == 0){
                        RepsolLoginStore.close();     

                        if(response.cartId && response.cartId != ""){
                            let cartId = response.cartId;
                        }
                        let landingPage = $form.querySelector('.register-landing-page').getAttribute('data-landing-page');
                        if (landingPage && landingPage != "") {
                            RepsolRegister.analytics.success($form, response);
                            var params = {                                
                                funnel_type: 'register_long',
                                funnel_action: 'create_account_ok',
                                funnel_step: '02',
                                method: 'password',                                
                                component_name: 'card de login'                            
                            }
                            Repsol.AnalyticsRomProd.AccountRegisterRomProd($($form), params);
                            $(location).attr('href', landingPage);
                        }
                    }else if(errorCode == 1 || errorCode == 2){
                        RepsolRegister.setLoader(false, $form);
                        let $modal = $form.closest('.register-component').querySelector('.register-error-modal');
                        let index = errorCode - 1;      
                        if($modal && $modal?.querySelector(`.modal-content.modal-case-${index}`)){                                                 
                            $modal.querySelector(`.modal-content:not(.modal-case-${index})`).classList.add("d-none");
                            $modal.querySelector(`.modal-content.modal-case-${index}`).classList.remove("d-none");
                            $($modal).modal("show");
                        }
                        RepsolRegister.analytics.error($form, response);
                        var params2 = {                
                            error_description: (response && response.errorMessage)? response.errorMessage : Repsol.AnalyticsRomProd.Getters.getFormErrorFields($($form)),
                            funnel_type: 'register_long',
                            funnel_action: 'create_account_form',
                            funnel_step: '01',
                            method: 'password',                
                            service: 'tienda',                
                            component_name: 'card de login'     
                        }
                        Repsol.AnalyticsRomProd.AccountErrorRomProd($($form), params2);
                        var params = {
                            error_type: 'form_error',
			                error_description: undefined,
                        };
                        Repsol.AnalyticsRomProd.errorRomProd($($form), params);
                    }else{
                        RepsolRegister.setLoader(false, $form);
                        RpAlert.msgError($form.getAttribute("data-msg-error"));
                        errorMsg = $form.getAttribute("data-msg-error")   
                        RepsolRegister.analytics.error($form, response);
                        var params2 = {                
                            error_description: (response && response.errorMessage)? response.errorMessage : Repsol.AnalyticsRomProd.Getters.getFormErrorFields($($form)),
                            funnel_type: 'register_long',
                            funnel_action: 'create_account_form',
                            funnel_step: '01',
                            method: 'password',                
                            service: 'tienda',                
                            component_name: 'card de login'     
                        }
                        Repsol.AnalyticsRomProd.AccountErrorRomProd($($form), params2);

                        Repsol.Analytics.Store.errorRpAlert(errorMsg);
                        var params = {
                            error_type: 'form_error',
			                error_description: undefined,
                        };
                        Repsol.AnalyticsRomProd.errorRomProd($($form), params);

                    }
                } else {
                    let response = JSON.parse(this.responseText);
                    RepsolRegister.setLoader(false, $form);
                    RpAlert.msgError($form.getAttribute("data-msg-error"));
                    errorMsg = $form.getAttribute("data-msg-error")   
                    RepsolRegister.analytics.error($form, response);

                    Repsol.Analytics.Store.errorRpAlert(errorMsg);
                    var params = {
                        error_type: 'form_error',
                        error_description: undefined,
                    };
                    Repsol.AnalyticsRomProd.errorRomProd($($form), params);
                }                
            }

        });
        xhr.open("POST", RepsolRegister.url);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(dataJson);
    },   
    resetInfo: function ($form) {
        const $inputs = $form.querySelectorAll(".cmp-form-text input");

        $inputs.forEach(($input) => {
           $input.value = "";
           $input.setAttribute("data-status", "false");
        });    
        $form.closest(".form-ecommerce-content").setAttribute("data-status", "ko");
    },
    setLoader: function(isLoader, obj){
        var objLoader = obj.closest(".register") ?  obj.closest(".register") : obj.closest(".register-component");
               
        if(obj.closest(".modal")){
            objLoader = obj.closest(".modal");
        }
        Repsol.utils.setLoader(isLoader, $(objLoader));
    },
    showCifModal: ($component) =>{
        const $cifRegisterModal = $component.querySelector(".cif-register-modal");
        if($cifRegisterModal){
            $($cifRegisterModal).modal("show")
        }
    },
    setModalText: ($component) => {
        const $modal = $component.querySelector('.register-error-modal');
        const $modalContent = $modal.querySelectorAll('.modal-content');
        $modalContent.forEach(($content)=> {
            const $modalText = $content.querySelector('.modal-text');
            const textData = $modalText.getAttribute('data-text');
            if(textData){
                $modalText.innerHTML = textData;
            }
        });
    },
    analytics: {
        success: function (obj, response) {
            var jsonInfo = {
                event: 'account_register',
                funnel_type: 'register_long',
                funnel_action: 'create_account_ok',
                funnel_step: '02',
                method: 'password',
                component_position: undefined,
                component_name: 'card de login',
                account_action: 'register',
                service: 'tienda',
                // loyalty_cesion: obj.querySelector("input[name='policy-cesion-consent']") ? (obj.querySelector("input[name='policy-cesion-consent']").checked ? 'true' : 'false' ) : undefined,
                // loyalty_cesion_terceros: obj.querySelector("input[name='policy-cesion-third-consent']") ? (obj.querySelector("input[name='policy-cesion-third-consent']").checked ? 'true' : 'false' ) : undefined      
            }

            Repsol.Analytics.ES.form(jsonInfo);
        },
        error: function (obj, response) {
            var jsonInfo = {
                event: 'account_error',
                error_type: Repsol.Analytics.ES.getFormErrorType($(obj)),
                error_description: (response && response.errorMessage)? response.errorMessage : Repsol.Analytics.ES.getErrorDescription($(obj)),
                funnel_type: 'register_long',
                funnel_action: 'create_account_form',
                funnel_step: '01',
                method: 'password',
                account_action: 'error',
                service: 'tienda',
                // loyalty_cesion: obj.querySelector("input[name='policy-cesion-consent']") ? (obj.querySelector("input[name='policy-cesion-consent']").checked ? 'true' : 'false' ) : undefined,
                // loyalty_cesion_terceros: obj.querySelector("input[name='policy-cesion-third-consent']") ? (obj.querySelector("input[name='policy-cesion-third-consent']").checked ? 'true' : 'false' ) : undefined,
                //component_position: undefined,
                component_name: 'card de login'     
            }
            Repsol.Analytics.ES.form(jsonInfo);
        },
        errorField: function (obj, response) {
            var userIsLogged = Repsol.Analytics.Store.userIsLogged();
            var userId = undefined;
            let clientID = Repsol.Analytics.getIdUser() ? Repsol.Analytics.getIdUser() : undefined;		
            if( userIsLogged == "true" && userIsLogged != null ){
                var data = Repsol.Analytics.getAccountInfoDL();
                if(data && data.user && data.user != ''){
                    userId = data.user;
                }
            }
            var jsonInfo = {
                event: 'r_error',
                error_type: (response && response.errorMessage)? response.errorMessage : obj.attr('name'),
                error_description: (response && response.errorMessage)? response.errorMessage : obj.siblings('.rds-caption-02.error-msg:not(.d-none)').first().text(),
                user_id: userId,
                user_is_subscribed: undefined, // TODO: retomar cuando este listo la newsletter
                user_is_logged: userIsLogged,
                page_real_url:  window.self !== window.top ? urlRealIframeRT() : window.location.href,
                client_id: clientID,     
            }
            Repsol.Analytics.ES.form(jsonInfo);
        }
    }
}

window.addEventListener("load", (event) => {
    RepsolRegister.init();
})