{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block head %}
    {{ super() }}

{% endblock %}
{% block content %}
    <h1>{{ title }}</h1>
    <p> Los mapas visuales representan datos geoespaciales y son esenciales para la visualización de patrones
        regionales. Para hacer los mapas accesibles, es fundamental proporcionar etiquetas claras para ubicaciones
        geográficas, asegurándose de que la información sea comprensible para todos los usuarios. Se deben elegir
        esquemas de color que tengan suficiente contraste y evitar depender únicamente del color para transmitir
        información, ya que algunas personas pueden tener dificultades para distinguir ciertos colores. Además,
        proporcionar alternativas textuales para la información visual, como descripciones de ubicaciones y regiones, es
        crucial para aquellos que dependen de lectores de pantalla u otras tecnologías de asistencia. Considerar la
        accesibilidad también implica facilitar la navegación en mapas interactivos, asegurándose de que los controles
        sean comprensibles y utilizables para personas con discapacidades.
    </p>

    <label for="miSelector">Select a theme:</label>
    <select id="miSelector">
        <option value="default">Default</option>
        <option value="accessible_theme">Accessible theme</option>
        <option value="dark_accessible_theme">Dark accessible theme</option>
        <option value="filler_pattern_theme">Filler pattern theme</option>
        <option value="print_theme">Print theme</option>
    </select>
    <div class="container-fluid ">
        <div class="d-flex flex-row flex-wrap">
            <div class="c">
                <div id="chart4"></div>
            </div>

            <div class="c">
                <div id="chart2"></div>
            </div>
            <div class="c">
                <div id="chart"></div>
            </div>

        </div>
        <div class="row">

        </div>
    </div>

{% endblock %}

{% block script %}

    <script type="text/javascript">

        const apiUrl = 'https://accesible-theme-altair.onrender.com/api/mapscharts';
        let spec;

        let embedOpt = {"renderer": "svg"};

        // Parámetros de consulta
        let theme_chart = "default"


        function showError(el, error) {
            el.innerHTML = ('<div style="color:red;">'
                + '<p>JavaScript Error: ' + error.message + '</p>'
                + "<p>This usually means there's a typo in your chart specification. "
                + "See the javascript console for the full traceback.</p>"
                + '</div>');
            throw error;
        }

        function fetchCharts(params, divId) {
            let el = document.getElementById(divId);
            // Realizar la llamada a la API con Axios
            axios.get(apiUrl, {params: params})
                .then(response => {
                    // Manejar los datos obtenidos de la API
                    spec = response.data
                })
                .then(r => {
                    vegaEmbed("#" + divId, spec, embedOpt).catch(error => showError(el, error));
                })
                .catch(error => {
                    // Manejar errores de la solicitud
                    console.error('Error al realizar la solicitud:', error);
                });
        }

        function callCharts(theme_name) {

            fetchCharts({type_chart: '4', theme_chart: theme_name}, 'chart')
            fetchCharts({type_chart: '3', theme_chart: theme_name}, 'chart2')
            fetchCharts({type_chart: '2', theme_chart: theme_name}, 'chart3')
            fetchCharts({type_chart: '1', theme_chart: theme_name}, 'chart4')
        }

        callCharts("default")


        $(document).ready(function () {
            $("#miSelector").change(function () {
                // Obtener el valor seleccionado
                var valorSeleccionado = $(this).val();

                // Utilizar un switch para manejar diferentes casos
                switch (valorSeleccionado) {
                    case "default":
                        callCharts(valorSeleccionado)
                        break;
                    case "accessible_theme":
                        callCharts(valorSeleccionado)
                        break;
                    case "dark_accessible_theme":
                        callCharts(valorSeleccionado)
                        break;
                    case "filler_pattern_theme":
                        callCharts(valorSeleccionado)
                        break;
                    case "print_theme":
                        callCharts(valorSeleccionado)
                        break;
                    default:
                        console.log("error en el nombre de tema")
                }
            });
        });

    </script>

{% endblock %}