{% load static %}

<link href="{% static 'django_superset_integration/css/django-superset-integration.css' %}" rel="stylesheet"/>

<button id="superset-fullscreen" class="{{ button_fullscreen_classes }}">
    Afficher en plein écran
</button>

<button id="superset-fullscreen-exit" class="{{ button_quit_fullscreen_classes }}">
    Quitter le mode plein écran
</button>

<div id="superset-integration">
</div>

<script src="{% static 'django_superset_integration/js/superset-embedded-sdk.js' %}"></script>
<script>
    // Get guest token from django app backend
    // The token has a lifetime of 5 min. This function is called
    // periodically to refresh the token
    async function fetchGuestTokenFromBackend() {
        const response = await fetch('/superset_integration/guest_token/{{ dashboard_id }}');
        const token = await response.text();
        return token;
    }

    // Display dashboard inside #graph element
    supersetEmbeddedSdk.embedDashboard({
        id: "{{ dashboard_integration_id }}",
        supersetDomain: "https://" + "{{ superset_domain }}",
        mountPoint: document.getElementById("superset-integration"),
        fetchGuestToken: () => fetchGuestTokenFromBackend(),
        dashboardUiConfig: {
            hideTitle: true,
            filters: {
                expanded: true,
            }
        },
    });

    let iframe = document.getElementById("superset-integration").firstElementChild;
    let iframe_height = "1200px";

    window.onload = (event) => {
        {% if iframe_height and iframe_height.isdigit %}
            iframe_height = "{{ iframe_height }}px";
        {% elif iframe_height %}
            iframe_height = "{{ iframe_height }}";
        {% endif %}
        iframe.height = iframe_height;
    };

    const btn_fullscreen = document.getElementById("superset-fullscreen");
    const btn_fullscreen_exit = document.getElementById("superset-fullscreen-exit");
    const header = document.getElementsByTagName("header")[0];
    const footer = document.getElementsByTagName("footer")[0];
    let superset_integration = document.getElementById("superset-integration");
    btn_fullscreen.addEventListener("click", function()
    {
        try {
            header.style.display = "none";
        } catch (error) {
            // no header element
        }

        try {
            footer.style.display = "none";
        } catch (error) {
            // no footer element
        }
        
        btn_fullscreen_exit.style.display = "block";
        btn_fullscreen_exit.style.visibility = "visible";
        btn_fullscreen_exit.style.opacity = 100;
        superset_integration.classList.add("fullScreen");
        iframe.height = "100%";
    }); 

    
    btn_fullscreen_exit.addEventListener("click", function()
    { 
        try {
            header.style.display = "block";
        } catch (error) {
            // no header element
        }

        try {
            footer.style.display = "block";
        } catch (error) {
            // no footer element
        }

        btn_fullscreen_exit.style.display = "none";
        superset_integration.classList.remove("fullScreen");
        iframe.height = iframe_height;
    }); 
</script>
