{% extends 'aa_contacts/base.html' %}

{% block extra_javascript %}
<script type="text/javascript">
    var BASE_URL = "/static/aa_contacts/react/";

    function loadCss(cssFiles) {
        (cssFiles || []).forEach(function (css) {
            console.log("Loading: ", css)

            $('<link>')
                .appendTo('head')
                .attr({
                    type: 'text/css',
                    rel: 'stylesheet',
                    href: css,
                });
        });
    }

    function loadScript(scriptUrl) {
        console.log("Loading JS: ", scriptUrl);
        var tag = document.createElement("script");
        tag.src = scriptUrl;
        tag.type = "module"; // you can set "module" if it's ESModules
        document.getElementsByTagName("head")[0].appendChild(tag);
    }

    function showLoaderError() {
        console.log("Unable to load react app, manifest file not accessible or corrupted");
        const error_div = document.querySelector("#error-div");
        const loading_div = document.querySelector("#loading-div");
        error_div.classList.toggle("d-none");
        loading_div.classList.toggle("d-none");
    }


    $.ajax(BASE_URL + 'manifest.json?version={{ version }}', {
        dataType: "json",
        success : function (manifest) {
            if (!manifest) {
                return showLoaderError();
            }

            // Option A) If we detect the “new format”:
            if (manifest["index.html"]) {
                // => handle the "example" manifest style
                const indexEntry = manifest["index.html"];
                const imports = (indexEntry.imports || []).map(f => BASE_URL + manifest[f].file);
                const cssFiles = (indexEntry.css || []).map(f => "/" + f);
                const mainJs = BASE_URL + indexEntry.file;

                loadCss(cssFiles);
                imports.forEach(loadScript);
                loadScript(mainJs);

            } else if (manifest.files && manifest.entrypoints) {
                let cssFiles = [];
                let jsFiles = [];

                manifest.entrypoints.forEach((entry) => {
                    if (entry.endsWith(".css")) {
                        cssFiles.push(BASE_URL + entry);
                    } else if (entry.endsWith(".js")) {
                        jsFiles.push(BASE_URL + entry);
                    }
                });
                loadCss(cssFiles);
                jsFiles.forEach(loadScript);
            } else {
                showLoaderError();
            }
        },
        error: showLoaderError,
        cache: false
    });
</script>
{% endblock extra_javascript %}

{% block content %}
<div id="root">
    <div id="app">
        <div id="loading-div" class="flex-container-main">
            <div class="text-center">
                <div>
                    <div class="lds-dual-ring-main"></div>
                </div>
                <h3>Loading Page</h3>
                <p>Please Wait</p>
            </div>
        </div>
        <div id="error-div" class="flex-container-main d-none">
            <div class="text-center">
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg"
                        width="100"
                        height="100"
                        fill="currentColor"
                        class="bi bi-exclamation-triangle error-anim-main"
                        viewBox="0 0 16 16">
                        <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z" />
                        <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z" />
                    </svg>
                </div>
                <h3>Error Loading JavaScript</h3>
                <p>Check Browser Console for Logs</p>
                <p></p> {% comment %}???{% endcomment %}
            </div>
        </div>
    </div>
</div>
{% endblock content %}