{% extends 'base.html' %}


{% block title %} MSEL Viewer {% endblock %}

{% block content %}
<div class="container" id="content">
    <div class="row align-items-center">
        <div class="col">
            <h3>MSEL Viewer:</h3>
        </div>
        <div class="col-auto">
            <input id="load-json-file" class="btn btn-success" type="file">
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="bg-light rounded p-3" id="msel-content">
            </div>
        </div>
    </div>
    <nav aria-label="Page navigation" class="mt-3">
        <ul class="pagination justify-content-center" id="pagination"></ul>
    </nav>
</div>

<script>
    // Work with MSEL file
    let jsonData;
    let pageSize = 5;
    let currentPage = 1;
    let totalPages = 1;

    document.getElementById("load-json-file").addEventListener("change", function (event) {
        console.log("File loaded");
        const file = event.target.files[0];
        const reader = new FileReader();
        reader.readAsText(file, "UTF-8");
        reader.onload = function (evt) {
            jsonData = JSON.parse(evt.target.result);
            totalPages = Math.ceil(Object.keys(jsonData).length / pageSize);
            renderPage(currentPage);
        }
        reader.onerror = function (evt) {
            console.error("Error loading the file");
        }
    });

    function buildHtmlFromJson(jsonData) {
        let html = "<ul>";
        for (const key in jsonData) {
            if (jsonData.hasOwnProperty(key)) {
                const value = jsonData[key];
                if (typeof value === "object") {
                    // This is the Inject position
                    html += "<li>" + key + ": " + buildHtmlFromJson(value) + "</li>";
                } else {
                    // This is the inject's data
                    html += "<li>" + key + ": <input type='text' value='" + value + "' onchange='updateJsonData(\"" + key + "\", this.value)'></li>";
                }
            }
        }
        html += "</ul>";
        return html;
    }

	function renderPage(page) {
	    currentPage = page; // Update currentPage
	    let start = (page - 1) * pageSize;
	    let end = start + pageSize;
	    let mselContent = document.getElementById("msel-content");
	    let keys = Object.keys(jsonData).slice(start, end);
	    let html = buildHtmlFromJson(keys.reduce((obj, key) => {
	        obj[key] = jsonData[key];
	        return obj;
	    }, {}));
	    mselContent.innerHTML = html;
	    renderPagination();
	}

    function renderPagination() {
        let pagination = document.getElementById("pagination");
        let html = "";
        if (totalPages > 1) {
            for (let i = 1; i <= totalPages; i++) {
                if (i == currentPage) {
                    html += `<li class="page-item active" aria-current="page"><span class="page-link">${i}</span></li>`;
                } else {
                    html += `<li class="page-item"><a class="page-link" href="#" onclick="renderPage(${i})">${i}</a></li>`;
                }
            }
        }
        pagination.style.marginBottom = "60px";
        pagination.innerHTML = html;
    }

	function updateJsonData(key, value) {
	    updateJson(key, value);
	    renderPage(currentPage);
	}

	function updateJson(path, value) {
	  let keys = path.split(".");
	  let obj = jsonData;
	  for (let i = 0; i < keys.length - 1; i++) {
	    obj = obj[keys[i]];
	  }
	  obj[keys[keys.length - 1]] = value;
	  return obj; // Change this line to return obj
	}

</script>
{% endblock %}