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

{% endblock %}
{% block content %}
    <h1>{{ title }}</h1>
    <p>
        Los gráficos circulares, o circular plots, representan datos en una forma de círculo dividido en secciones
        proporcionales a los valores que representan. Aunque son populares, es importante abordar su accesibilidad. Para
        lograr esto, se deben proporcionar etiquetas claras y descriptivas para cada sección del círculo, asegurando que
        la información sea comprensible para todos los usuarios. Además, se deben evitar esquemas de color confusos y
        proporcionar alternativas textuales para usuarios con discapacidades visuales. La simplicidad en la presentación
        y la atención al contraste y tamaño de fuente son esenciales para garantizar que la información sea accesible y
        comprensible para una amplia audiencia.
    </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="chart"></div>
            </div>
            <div class="c">
                <div id="chart2"></div>
            </div>
            <div class="c">
                <div id="chart3"></div>
            </div>
            <div class="c">
                <div id="chart4"></div>
            </div>
        </div>
        <div class="row">

        </div>
    </div>

{% endblock %}

{% block script %}

    <script type="text/javascript">

        const apiUrl = 'https://accesible-theme-altair.onrender.com/api/circularplots';
        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 %}