var getAncestorByAttribute = (elem,attr,val) => {
    while (elem.getAttribute(attr) != val || elem == null) elem = elem.parentElement;
    return elem;
}

var getDescendantByAttribute = (elem,attr,val) => {
    if (elem == null || elem.getAttribute(attr) == val) return elem;
    return Array.from(elem.children).reduce( (a,b) => {
        let x = getDescendantByAttribute(a,attr,val);
        let y = getDescendantByAttribute(b,attr,val);
        return x == null ? y : x;
    }, null);
}

function HabilitarTab(tc,n){
    if (tc == null) return console.log("El contenedor no existe")
    if (typeof n != "number") return console.log("El entero es invalido");
    
    for (let it = 0; it < tc.children.length; it++) {
        if (it == n) tc.children[it].style.display = "block";
        else tc.children[it].style.display = "none";
    }
}

function HabilitarButton(bc,n){
    if (bc == null) return console.log("El contenedor no existe")
    if (typeof n != "number") return console.log("El entero es invalido");

    for (let it = 0; it < bc.children.length; it++) {
        if (it == n) bc.children[it].classList.add("BotonesActive");
        else bc.children[it].classList.remove("BotonesActive");
    }
}

function Otro(otroselect){
    let inputs = getAncestorByAttribute(otroselect,"class","FieldInput");
    let other = getDescendantByAttribute(inputs,"class","Other");
    if (otroselect.nodeName == "SELECT"){
        if (otroselect.selectedOptions[0].value == "Otro") other.style.display = "block";
        else other.style.display = "none";
    }
    else {
        if (otroselect.checked) other.style.display = "block";
        else other.style.display = "none";
    }
}

var accessDataContainer = tab => getDescendantByAttribute(tab, "class", "FieldsContainer");

function Boton(tc, url) {
    button = document.createElement("button");
    button.value = "Enviar";
    button.setAttribute("onclick", "Enviar(Leer(document.getElementById('TabsContainer')),'" + url + "')");
    button.setAttribute("class","SendButton");
    button.innerText = "Enviar";
    tc.lastElementChild.children[0].appendChild(button);
}

function NoValido(input,msg){
    let tab = getAncestorByAttribute(input,"class","Tabs");
    let n = parseInt(tab.id[tab.id.length - 1]);
    HabilitarTab(document.getElementById('TabsContainer'),n);
    HabilitarButton(document.getElementById('BotonesContainer'),n);
    input.setCustomValidity(msg);
    input.reportValidity();
    input.oninput = () => input.setCustomValidity('');
}

function CheckboxValidity(checkboxContainer){
    return Array.from(checkboxContainer.children).reduce(
        (last,checkbox) => checkbox.className != "Checkbox" ? last : checkbox.lastElementChild.firstElementChild.checked || last,
        false
    );
}

function GetCheckboxes(field) {
    let data = [];
    Array.from(field.children).forEach( child => {
        if (child.className != "Checkbox") return;
        if (child.lastElementChild.firstElementChild.checked) data.push(child.firstElementChild.innerText.replace(/[\n\s\*]*/g,""));
        if (data[data.length-1] == "Otro") data[data.length-1] = getAncestorByAttribute(child,"class","FieldInput").lastElementChild.value;
    });
    return data;
}

function Leer(tc){
    let data = {};
    let valid = true;
    Array.from(tc.children).forEach( tab =>
        Array.from(accessDataContainer(tab).children).forEach( field => {
            if (valid == false) return;
            if (field.className == "Field") {
                let name = getDescendantByAttribute(field,"class","FieldTitle").innerText.replace(/[\n\s\*]*/g,"");
                let input = getDescendantByAttribute(field,"class","FieldInput").children[0];
                
                if (input.className == "Checkbox") {
                    if (CheckboxValidity(input.parentElement) == false) {
                        valid = false;
                        NoValido(input.lastElementChild.firstElementChild, "Debe seleccionar al menos una casilla");
                    }
                    data[name] = GetCheckboxes(input.parentElement);
                }
                
                else if (input.nodeName == "SELECT") {
                    if (input.checkValidity() == false) {
                        valid = false;
                        NoValido(input, "Debe llenar este campo");
                    }
                    
                    data[name] = input.selectedOptions[0].value;
                    if (data[name] == "Otro") data[name] = getAncestorByAttribute(input,"class","FieldInput").lastElementChild.value;
                }
                
                else {
                    if (input.checkValidity() == false) {
                        valid = false;
                        if (input.type == "email") NoValido(input, "Mail inválido");
                        else NoValido(input, "Debe llenar este campo");
                    }

                    data[name] = input.value
                }
            }
        })
    );
    if (valid == false) return valid;
    return data;
}

function Enviar(data, url){
    http = new XMLHttpRequest();
    http.open("POST", url, true);
    http.setRequestHeader("Content-Type", "application/json");
    http.onload = () => { if (http.status == 200) alert("Enviado con éxito"); }; 
    http.send(JSON.stringify(data));
}