import { nompropio } from "./functions.js";

// punto central de donde se colocará el mapa, latitud, longitud y zoom
var map = L.map("map").setView([24.026078546314853, -102.65858297569135], 5);

let tableSitios = document.getElementById("dataSitiosInstalados");

let verde = "#10312B";
let morado = "#691c32";
let blanco = "#ffffff";
let negro = "#000000";
let url_icon_ai = window.location.origin + "/mapa/img_ai"
let sitios = window.location.origin + "/mapa/sitios_info"
let coordenadas = window.location.origin + "/mapa/coordenadas"


let sitioIcon = L.icon({
    iconUrl: url_icon_ai,
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34]
});



// JSON estados, de inicio los establezco en cero (0) y se actualizara dependiendo el los registros en el archivo sitios.json
let estados = [{
        IDEDO: 1,
        ESTADO: "Aguascalientes",
        ACRONIMO: "Ags.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 2,
        ESTADO: "Baja California",
        ACRONIMO: "B.C.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 3,
        ESTADO: "Baja California Sur",
        ACRONIMO: "B.C.S.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 4,
        ESTADO: "Campeche",
        ACRONIMO: "Camp.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 5,
        ESTADO: "Coahuila",
        ACRONIMO: "Coah.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 6,
        ESTADO: "Colima",
        ACRONIMO: "Col.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 7,
        ESTADO: "Chiapas",
        ACRONIMO: "Chis.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 8,
        ESTADO: "Chihuahua",
        ACRONIMO: "Chih.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 9,
        ESTADO: "Ciudad de México",
        ACRONIMO: "CDMX",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 10,
        ESTADO: "Durango",
        ACRONIMO: "Dgo.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 11,
        ESTADO: "Guanajuato",
        ACRONIMO: "Gto.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 12,
        ESTADO: "Guerrero",
        ACRONIMO: "Gro.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 13,
        ESTADO: "Hidalgo",
        ACRONIMO: "Hgo.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 14,
        ESTADO: "Jalisco",
        ACRONIMO: "Jal.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 15,
        ESTADO: "México",
        ACRONIMO: "Méx.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 16,
        ESTADO: "Michoacán",
        ACRONIMO: "Mich.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 17,
        ESTADO: "Morelos",
        ACRONIMO: "Mor.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 18,
        ESTADO: "Nayarit",
        ACRONIMO: "Nay.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 19,
        ESTADO: "Nuevo León",
        ACRONIMO: "N.L.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 20,
        ESTADO: "Oaxaca",
        ACRONIMO: "Oax.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 21,
        ESTADO: "Puebla",
        ACRONIMO: "Pue.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 22,
        ESTADO: "Querétaro",
        ACRONIMO: "Qro.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 23,
        ESTADO: "Quintana Roo",
        ACRONIMO: "Q.R.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 24,
        ESTADO: "San Luis Potosí",
        ACRONIMO: "S.L.P.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 25,
        ESTADO: "Sinaloa",
        ACRONIMO: "Sin.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 26,
        ESTADO: "Sonora",
        ACRONIMO: "Son.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 27,
        ESTADO: "Tabasco",
        ACRONIMO: "Tab.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 28,
        ESTADO: "Tamaulipas",
        ACRONIMO: "Tams.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 29,
        ESTADO: "Tlaxcala",
        ACRONIMO: "Tlax.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 30,
        ESTADO: "Veracruz",
        ACRONIMO: "Ver.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 31,
        ESTADO: "Yucatán",
        ACRONIMO: "Yuc.",
        SITIOS_INSTALADOS: 0,
    },
    {
        IDEDO: 32,
        ESTADO: "Zacatecas",
        ACRONIMO: "Zac.",
        SITIOS_INSTALADOS: 0,
    },
];


// función que al pasar el cursor encima de un th o tr de la tabla este se refleje en el mapa
function thMapStyle(idThName) {
    let edoTh = document.getElementById(idThName);
    let strTh = String(idThName).substring(3);

    if (idThName) {
        let th = `th_${strTh}`;
        let td = `td_${strTh}`;

        let thAffect = document.getElementById(th);
        let tdAffect = document.getElementById(td);

        edoTh.addEventListener("mouseenter", () => {
            thAffect.style.background = verde;
            tdAffect.style.background = verde;
            tdAffect.style.color = blanco;
            let estado = document.getElementById(strTh);
            estado.style.fill = "#f3722c"
            estado.style.fillOpacity = '0.8';
        });

        edoTh.addEventListener("mouseleave", () => {
            thAffect.style.background = "#691c32";
            tdAffect.style.background = blanco;
            tdAffect.style.color = negro;

            let estado = document.getElementById(strTh);
            estado.style.fill = "#3388ff";
            estado.style.fillOpacity = '0.2'
        });
    }
}


function sitioData(objeto) {
    let lenguasIndigenas = String(objeto["lenguasIndigenas"]).length == 0 ? "N/D" : nompropio(objeto["lenguasIndigenas"]);
    let denominacion = String(objeto["Denominacion"]).length == 0 ? "N/D" : nompropio(objeto["Denominacion"]);

    let marker = L.marker(
        [objeto["ubicacion"]["latitud"], objeto["ubicacion"]["longitud"]], { title: "Más información", icon: sitioIcon }
    ).addTo(map).bindPopup(`<table id="${objeto["Estado"]}">
        <tr>
            <th class="specialWidth">
                Nombre Unidad:
            </th>
            <td>
                ${nompropio(objeto["NombreUnidad"])}
            </td>
        </tr>
        <tr>
            <th class="specialWidth">
                GID:
            </th>
            <td>
                ${objeto["CodigoGid"]}
            </td>
        </tr>
        <tr>
            <th class="specialWidth">
                Denominación:
            </th>
            <td>
                ${denominacion}
            </td>
        </tr>
        <tr>
            <th class="specialWidth">
                Estado:
            </th>
            <td>
                ${nompropio(objeto["Estado"])}
            </td>
        </tr>
        <tr>
            <th class="specialWidth">
                Municipio:
            </th>
            <td>
                ${nompropio(objeto["Municipio"])}
            </td>
        </tr>
        <tr>
            <th class="specialWidth">
                Localidad:
            </th>
            <td>
                ${nompropio(objeto["Localidad"])}
            </td>
        </tr>
        <tr>
            <th class="specialWidth">
                Localización:
            </th>
            <td>
                ${objeto["ubicacion"]["latitud"]} ${
    objeto["ubicacion"]["longitud"]
  }
            </td>
        </tr>
        <tr>
            <th class="specialWidth">
                Lengua indígena:
            </th>
            <td>
                ${lenguasIndigenas}
            </td>
        </tr>
        <tr>
            <th class="specialWidth">
                Fecha instalación:
            </th>
            <td>
                ${objeto["fechaInstalacion"]}
            </td>
        </tr>
        <tr>
            <th class="specialWidth">
                Página sitio:
            </th>
            <td>
                <a href="${objeto["infografiaSitio"]}" target="_blank">
                    Infografía Sitio
                </a>
            </td>
        </tr>
        </table>`);
}

// tabla conteo de sitios por estado
(() => {
    // petición de sitios y actualización de json estados y sitios instalados
    fetch(sitios)
        .then((data) => data.json())
        .then((resData) => {
            resData.forEach((element) => {

                if (element["ubicacion"]) {
                    sitioData(element);

                    // actualizar los sitios instalados
                    estados.forEach((ele) => {
                        if (nompropio(ele["ESTADO"]) == nompropio(element["Estado"])) {
                            ele["SITIOS_INSTALADOS"] += 1;
                        }
                    });
                }
            });

            let t = 0;

            estados.forEach((ele) => {

                if (ele["SITIOS_INSTALADOS"] > 0) {
                    let idEdoTh = `th_${ele["ESTADO"]}`;
                    let idEdoTd = `td_${ele["ESTADO"]}`;

                    t += ele["SITIOS_INSTALADOS"];

                    tableSitios.insertAdjacentHTML(
                        "beforeend",
                        `<tr id="tr_${ele["ESTADO"]}">
                            <th class="centerText" id="th_${ele["ESTADO"]}">
                                ${nompropio(ele["ESTADO"])}
                            </th>
                            <td id="td_${ele["ESTADO"]}" >
                                ${ele["SITIOS_INSTALADOS"]}
                            </td>
                        </tr>`
                    );

                    thMapStyle(idEdoTh);
                    thMapStyle(idEdoTd);
                }

            });

            let btnDownload = document.getElementById("nsitios");
            btnDownload.innerText = `${t} sitios instalados`;

        });
})();

// importar las delimitaciones estatales de toda la república mexica
(() => {
    // estado JSON 2
    fetch(coordenadas)
        .then((data) => data.json())
        .then((resJson) => {
            // let geoJsonLayer = L.geoJson(resJson).addTo(map);

            resJson.forEach((ele) => {
                let idDbEdo = ele["properties"]["sta_name"];
                let idEdo = String(idDbEdo);
                let geoJsonLayer = L.geoJson(ele["geometry"]).addTo(map);
                // console.log(ele.properties.geo_point_2d)
                geoJsonLayer.eachLayer(function(layer) {
                    // layer._path.id = ele['properties']['nombre_igg'];
                    layer._path.id = idEdo;
                    // console.log(layer._path.attributes)
                    layer.on('mouseover', function() {
                        // console.log(layer._path.attributes.id.nodeValue)

                        this.setStyle({
                            'fillColor': '#f3722c',
                            'fillOpacity': '0.3',
                            // "color": "red"
                        })
                    });

                    layer.on('mouseout', function() {
                        this.setStyle({
                            'fillColor': '#3388ff',
                            'fillOpacity': '0.2'
                        })
                    });

                    layer.on('click', function() {
                        // console.log(layer._path.attributes);
                        let texto = `<b>Estado: ${layer._path.attributes.id.nodeValue}</b>`;
                        layer.bindPopup(texto).openPopup();
                        // .setLatLng(latlng);

                    });

                });
            });
        });
})();

L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
    maxZoom: 18,
}).addTo(map);

// btn de descarga base de datos
(() => {
    let btnDescarga = document.getElementById("csvDescarga");
    btnDescarga.addEventListener("click", () => {
        let lstSitios = [];
        let columns =
            "Código GID|Nombre Unidad|Denominación|Lengua indígena|Estado|Municipio|Localidad|Fecha instalación|Latitud|Longitud\n";

        fetch(sitios)
            .then((data) => data.json())
            .then((data) => {
                data.forEach((ele) => {
                    if (ele["ubicacion"]) {
                        lstSitios.push([
                            ele["CodigoGid"],
                            ele["NombreUnidad"],
                            nompropio(ele["Denominacion"]),
                            nompropio(ele["lenguasIndigenas"]),
                            nompropio(ele["Estado"]),
                            nompropio(ele["Municipio"]),
                            nompropio(ele["Localidad"]),
                            ele["fechaInstalacion"],
                            ele["ubicacion"]["latitud"],
                            ele["ubicacion"]["longitud"],
                        ]);
                    }
                });

                lstSitios.forEach((row) => {
                    columns += row.join("|");
                    columns += "\n";
                });

                var hiddenElement = document.createElement("a");
                hiddenElement.href =
                    "data:text/csv;charset=utf-8," + encodeURI(columns);

                hiddenElement.download = "sitios_instalados.csv";
                hiddenElement.click();
            });
    });
})();

// descargar json
function downloadObjectAsJson(exportObj, exportName) {
    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
    var downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href", dataStr);
    downloadAnchorNode.setAttribute("download", exportName + ".json");
    document.body.appendChild(downloadAnchorNode); // required for firefox
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
}

(() => {
    let lstSitios = [];
    let jsonDownload = document.getElementById("jsonDescarga");
    jsonDownload.addEventListener('click', () => {
        fetch(sitios).then(data => data.json()).then(data => {
            data.forEach(ele => {
                lstSitios.push(ele)
            })
            downloadObjectAsJson(lstSitios, "sitios_instalados");
        })

    })
})();

// descargar txt
(() => {
    let btnDescarga = document.getElementById("txtDescarga");
    btnDescarga.addEventListener("click", () => {
        let lstSitios = [];
        let columns =
            "Código GID|Nombre Unidad|Denominación|Lengua indígena|Estado|Municipio|Localidad|Fecha instalación|Latitud|Longitud\n";

        fetch(sitios)
            .then((data) => data.json())
            .then((data) => {
                data.forEach((ele) => {
                    if (ele["ubicacion"]) {
                        lstSitios.push([
                            ele["CodigoGid"],
                            ele["NombreUnidad"],
                            nompropio(ele["Denominacion"]),
                            nompropio(ele["lenguasIndigenas"]),
                            nompropio(ele["Estado"]),
                            nompropio(ele["Municipio"]),
                            nompropio(ele["Localidad"]),
                            ele["fechaInstalacion"],
                            ele["ubicacion"]["latitud"],
                            ele["ubicacion"]["longitud"],
                        ]);
                    }
                });

                lstSitios.forEach((row) => {
                    columns += row.join("|");
                    columns += "\n";
                });

                var hiddenElement = document.createElement("a");
                hiddenElement.href =
                    "data:text/txt;charset=utf-8," + encodeURI(columns);

                hiddenElement.download = "sitios_instalados.txt";
                hiddenElement.click();
            });
    });
})();

// var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(storageObj));
// var dlAnchorElem = document.getElementById('downloadAnchorElem');

// dlAnchorElem.setAttribute("href",     dataStr     );
// dlAnchorElem.setAttribute("download", "scene.json");
// dlAnchorElem.click();


// verificar info
// js download array as csv file
// https://www.javatpoint.com/javascript-create-and-download-csv-file