function notify(type, message, segundos) {
    let n = document.createElement("div");
    let id = Math.random().toString(36).substr(2, 10);
    let notificationArea = document.getElementById("notification-area");
    // let imgDinamic = document.getElementById('notifyImg');
    // notificationArea.style.height = '100vh';
    n.setAttribute("id", id);
    n.classList.add("notification", type);
    n.innerText = message;
    // imgDinamic.setAttribute('src', imgPath);
    document.getElementById("notification-area").appendChild(n);
    setTimeout(() => {
        let notifications = document
            .getElementById("notification-area")
            .getElementsByClassName("notification");
        for (let i = 0; i < notifications.length; i++) {
            if (notifications[i].getAttribute("id") == id) {
                // imgDinamic.remove();
                notifications[i].remove();
                break;
            }
        }
        notificationArea.style.height = "0%";
    }, segundos);
    // {# 5000 = 5 segundos #}
}

function setDataSpan(idSpan, value) {
    document.getElementById(idSpan).innerText = value;
}

function stringDay(dayNumber) {
    let dayString = '';
    if (dayNumber >= 1 && dayNumber <= 9) {
        dayString = `0${dayNumber}`;
    } else {
        dayString = `${dayNumber}`;
    };
    return dayString;
}

function currentDate() {
    let today = new Date();
    let date = `${stringDay(today.getDate())}/${stringMonth(
	today.getMonth() + 1
)}/${today.getFullYear()}`;
    return date;
}

function fastReplace(myString, characterReplacement, newCharacter) {
    `${myString}`
    .replace(characterReplacement, newCharacter)
        .replace(characterReplacement, newCharacter);
}

function nompropio(stringToconvert) {
    let largoStr = stringToconvert.length;
    let i = 0;
    let resp;
    let nextMayus = false;
    for (; i < largoStr; i++) {
        let letra = stringToconvert[i];
        if (i == 0) {
            resp = letra.toUpperCase();
        } else {
            if (nextMayus == false && letra == " ") {
                resp += letra;
                nextMayus = true;
            } else if (nextMayus == true) {
                resp += letra.toUpperCase();
                nextMayus = false;
            } else {
                resp += letra.toLowerCase();
            }
        }
    }
    return resp;
}

function validarContentInput(idInput, colorAlerta, colorNoAlerta) {
    let inputToValidate = document.getElementById(idInput);

    if (inputToValidate.disabled == false) {
        // inputToValidate.style.backgroundColor = colorAlerta;
        inputToValidate.style.border = `3px solid ${colorAlerta}`;
    }

    inputToValidate.addEventListener("change", () => {
        if (inputToValidate.value == "") {
            inputToValidate.style.border = `3px solid ${colorAlerta}`;
        } else {
            inputToValidate.style.border = `2px solid ${colorNoAlerta}`;
        }
    });
}

function roundNumber(numfloat, tipoMedida) {
    let respuesta;
    if (tipoMedida == "Porcentaje.") {
        respuesta = numfloat * 100;
    } else {
        respuesta = numfloat;
    }
    return parseFloat(respuesta.toFixed(2));
}

function stringMonth(mesNumero) {
    let m = "";
    if (mesNumero <= 9) {
        m = `0${mesNumero}`
    } else {
        m = mesNumero
    }
    /*
		switch (mesNumero) {
        case 1:
            m = "enero";
            break;
        case 2:
            m = "febrero";
            break;
        case 3:
            m = "marzo";
            break;
        case 4:
            m = "abril";
            break;
        case 5:
            m = "mayo";
            break;
        case 6:
            m = "junio";
            break;
        case 7:
            m = "julio";
            break;
        case 8:
            m = "agosto";
            break;
        case 9:
            m = "septiembre";
            break;
        case 10:
            m = "octubre";
            break;
        case 11:
            m = "noviembre";
            break;
        case 12:
            m = "diciembre";
            break;
    }
		*/
    return m;
}

//aquí me quede
function isFrecuenciaAbsoluta(idTagUnidadMedida, idCirculo, idTable, idTipoMeta) {

    let circulo = document.getElementById(idCirculo);
    let tabla = document.getElementById(idTable);
    let idTag = document.getElementById(idTagUnidadMedida);
    let meta = document.getElementById(idTipoMeta);

    //console.log(idTag.firstChild.data);

    if (idTag.innerText != 'Porcentaje.') {

        circulo.remove();
        tabla.remove();
    }

    if (meta.innerText != 'Trimestral.') {

        circulo.remove();
        tabla.remove();
    }
}


function camposObligatorios() {
    let mensaje;
    let req = 0;
    let inputTags = document.getElementsByTagName("input");
    let fieldSoporte = document.getElementById("infosoporte");
    for (let i = 0; i < inputTags.length; i++) {
        if (inputTags[i].value == '' && inputTags[i].disabled == false && inputTags[i].getAttribute('type') != 'file') {
            req += 1;
        }
    }

    if (fieldSoporte.value.length == 0) {
        req += 1;
    }

    if (req > 0) {
        if (req == 1) {
            mensaje = "El campo con borde naranja es obligatorio";
        } else {
            mensaje = `Los ${req} campos marcados con borde naranja son obligatorios`;
        }
    }
    return mensaje
}

function limpiarFormulario(colorAlerta) {
    let ArrayInputs = document.getElementsByTagName("input");
    let ArrayTxtarea = document.getElementsByTagName("textarea");

    let i = 0;
    while (i < ArrayInputs.length) {

        if (ArrayInputs[i].disabled == false) {
            ArrayInputs[i].value = "";
            document.getElementById(
                ArrayInputs[i].id
            ).style.border = `3px solid ${colorAlerta}`;
        }

        i++;
    }

    ArrayTxtarea[0].value = "";
    ArrayTxtarea[1].value = "";
    ArrayTxtarea[1].style.border = `3px solid ${colorAlerta}`;
}

function lastDayOfMonth(myYear, myMonth) {
    var month = myMonth;
    var d = new Date(myYear, myMonth, 0);
    return d.getDate();
}

function numFrmt(num) {
    let r;
    if (num < 10) {
        r = `0${num}`;
    } else {
        r = `${num}`;
    }
    return r;
}

function validarContentTextArea(idTxtArea, colorAlerta, colorNoAlerta) {
    let txtArea = document.getElementById(idTxtArea);
    txtArea.style.border = `3px solid ${colorAlerta}`;
    txtArea.addEventListener('change', () => {
        if (txtArea.value == '') {
            txtArea.style.border = `3px solid ${colorAlerta}`;
            // inputToValidate.style.border = `2px solid ${colorNoAlerta}`;
        } else {
            txtArea.style.border = `2px solid ${colorNoAlerta}`;
        }
    });
}


function valorSemaforo(
    idVarA,
    idVarB,
    semaforoToChange,
    idSemaforoForm,
    idAmarilloLi,
    idAmarilloLs,
    idSigno,
    idFilaRojo,
    idFilaAmarillo,
    idFilaVerde
) {
    /*
    								idVarA: contenedor de la variable a (input), 
    								idVarB: contenedor de la variable b (input), 
    								semaforoToChange: es en donde se pintara el porcentaje (span), 
    								idSemaforoForm: es el id del semáforo que se pintara
    								idAmarilloLi: es el id del amarillo límite inferior (span)
    								idAmarilloLs: es el id del amarillo límite superior (span)
    								idSigno: es el id donde tiene el signo de porcentaje, pendiente de meterle la lójica
    								*/
    let varA = document.getElementById(idVarA);
    let varB = document.getElementById(idVarB);
    let circulo = document.getElementById(idSemaforoForm);
    let amarilloLi = document.getElementById(idAmarilloLi);
    let amarilloLs = document.getElementById(idAmarilloLs);
    let signo = document.getElementById(idSigno);

    let redColor = "#9b2226";
    let yellowColor = "#fca311";
    let greenColor = "#008000";
    let whiteColor = "#ffffff";

    let listObj = [varA, varB];

    listObj.forEach((ele) => {
        ele.addEventListener("change", () => {
            let parseVarA = parseFloat(varA.value);
            let parseVarB = parseFloat(varB.value);
            let valPorcentual;

            let parseAmarilloLi = parseFloat(amarilloLi.textContent);
            let parseAmarilloLs = parseFloat(amarilloLs.textContent);

            let semaforo = document.getElementById(semaforoToChange);
            if (varA.value != "" && varB.value != "") {
                valPorcentual = ((parseVarA / parseVarB) * 100).toFixed(2);
                let r = (semaforo.textContent = valPorcentual);
                if (valPorcentual < parseAmarilloLi) {
                    circulo.style.background = redColor;
                    tableRowStyleSemaforo(idFilaRojo, redColor, whiteColor);
                    // quitar estilos a las otras filas
                    tableRowStyleSemaforo(idFilaAmarillo, whiteColor, "black");
                    tableRowStyleSemaforo(idFilaVerde, whiteColor, "black");
                } else if (
                    valPorcentual > parseAmarilloLs &&
                    valPorcentual != "Infinity"
                ) {
                    circulo.style.background = greenColor;
                    tableRowStyleSemaforo(idFilaVerde, greenColor, whiteColor);
                    // quitar estilos a las otras filas
                    tableRowStyleSemaforo(idFilaRojo, whiteColor, "black");
                    tableRowStyleSemaforo(idFilaAmarillo, whiteColor, "black");
                } else if (
                    valPorcentual >= parseAmarilloLi &&
                    valPorcentual <= parseAmarilloLs
                ) {
                    circulo.style.background = yellowColor;
                    tableRowStyleSemaforo(idFilaAmarillo, yellowColor, "black");
                    // quitar estilos a las otras filas
                    tableRowStyleSemaforo(idFilaRojo, whiteColor, "black");
                    tableRowStyleSemaforo(idFilaVerde, whiteColor, "black");
                } else if (valPorcentual == "NaN") {
                    circulo.style.background = whiteColor;
                    signo.textContent = "";
                    tableRowStyleSemaforo(idFilaRojo, whiteColor, "black");
                    tableRowStyleSemaforo(idFilaAmarillo, whiteColor, "black");
                    tableRowStyleSemaforo(idFilaVerde, whiteColor, "black");
                    //console.log("not a number");
                } else {
                    circulo.style.background = whiteColor;
                    semaforo.textContent = "";
                    tableRowStyleSemaforo(idFilaRojo, whiteColor, "black");
                    tableRowStyleSemaforo(idFilaAmarillo, whiteColor, "black");
                    tableRowStyleSemaforo(idFilaVerde, whiteColor, "black");
                }
                semaforo.style.color = whiteColor;
                signo.textContent = "%";
                signo.style.color = whiteColor;
            } else {
                semaforo.textContent = "";

                circulo.style.background = whiteColor;
            }
        });
    });
}

function tableRowStyleSemaforo(idRow, bgColor, fgColor) {
    let fila = document.getElementById(idRow);
    fila.style.background = bgColor;
    fila.style.color = fgColor;
}

function generalStylesSignField(idDivTagFirma, idImgTag, idInputFiletag) {
    // idDivTagFirma div contenedor del input y el img (tags)
    let divAffect = document.getElementById(idDivTagFirma);

    // función para afectar los estilos contenedores de la imagen
    let imgAffect = document.getElementById(idImgTag);

    // afectar el input type file
    let inputTag = document.getElementById(idInputFiletag);

    divAffect.style.display = "table-cell";
    divAffect.style.height = "150px";
    divAffect.style.width = "1%";
    divAffect.style.verticalAlign = "middle";
    divAffect.style.textAlign = "center";
    divAffect.style.color = "#000000";
    divAffect.style.backgroundColor = "#FFFFFF";
    divAffect.style.border = "solid 2px #000000";
    divAffect.style.borderRadius = "10px";
    divAffect.style.padding = "10px";

    imgAffect.style.display = "None";
    imgAffect.style.width = "100%";
    imgAffect.style.height = "125px";
    imgAffect.style.objectFit = "contain";

    inputTag.style.display = "none";
}

function uploadPictureToWeb(idDivSignContainer, idInputFile, idImgContainer) {
    let divTagC = document.getElementById(idDivSignContainer);
    let inputTag = document.getElementById(idInputFile);
    let spanTag = divTagC.querySelector("span");
    divTagC.addEventListener("dblclick", () => {
        inputTag.click();

        if (spanTag) {
            spanTag.innerText = "";
        }

        $(idInputFile).onChange(function() {
            runUpload(this.files[0], idImgContainer);
        });
    });
}

function runUpload(file, idImgTag) {
    // https://www.photoroom.com/quitar-fondo-imagen/
    let imgcont = document.getElementById(idImgTag);
    let span = imgcont.parentElement.querySelector("span");
    try {
        if (file == undefined) {
            // console.log("no se ha elegido ninguna imagen de firma");
            imgcont.style.display = "none";
            imgcont.setAttribute("src", "");
            span.textContent = "Dar docle click para cargar imagen firma";
        }

        if (
            file.type === "image/png" ||
            file.type === "image/jpg" ||
            file.type === "image/jpeg"
        ) {
            let reader = new FileReader(),
                image = new Image();

            reader.readAsDataURL(file);
            reader.onload = function(_file) {
                if (_file.target.result.length > 0) {
                    $(idImgTag).el.src = _file.target.result;
                    $(idImgTag).el.style.display = "inline";
                    span.textContent = "";
                }
            }; // END reader.onload()
        }
    } catch (error) {
        imgcont.style.display = "none";
        imgcont.setAttribute("src", "");
        span.textContent = "Doble click para cargar firma digitalizada";
    }
}

function deshabilitarInput(idInputToDisabled) {
    let elemento = document.getElementById(idInputToDisabled);
    elemento.disabled = true;
    elemento.placeholder = 'N/A';
    elemento.style.background = '#ced4da';
    elemento.style.border = `3px solid #000`;

}


export {
    notify,
    setDataSpan,
    currentDate,
    nompropio,
    fastReplace,
    validarContentInput,
    roundNumber,
    limpiarFormulario,
    lastDayOfMonth,
    numFrmt,
    valorSemaforo,
    tableRowStyleSemaforo,
    generalStylesSignField,
    uploadPictureToWeb,
    runUpload,
    isFrecuenciaAbsoluta,
    validarContentTextArea,
    deshabilitarInput,
    camposObligatorios
};