{% load inventree_extras %}
{% load i18n %}
{% load static %}

<script>
    var exitTimer = false
    const get_url = "{% url 'plugin:kicad-library-plugin:get_import_progress' %}"
    var file_name = ""

    function startTimer() {

        // Poll server for progress status
        if (!exitTimer) {
            $.ajax({
                url: get_url,
                type: 'GET',
                dataType: 'json',
                success: function (res) {
                    document.getElementById("progress_bar").setAttribute("aria-valuenow", res.value);
                    document.getElementById("progress_bar").setAttribute("style", "width:" + res.value + "%;");
                    document.getElementById("progress_bar").innerText = res.value + "%";

                    if (res.value === 100) {
                        exitTimer = true;
                        document.getElementById("btn_import").disabled = false;
                    }

                }
            });
        }

    }

    async function upload_csv() {
        var formData = new FormData();

        formData.append("file", fileupload.files[0]);

        exitTimer = false;
        setInterval(startTimer, 500);

        const cmd_url = "{% url 'plugin:kicad-library-plugin:meta_data_upload' %}"

        document.getElementById("progress_bar_container").hidden = false;
        document.getElementById("btn_import").disabled = true;
        document.getElementById("btn_import").setAttribute("class", "btn btn-outline-primary")

        inventreeFormDataUpload(url = cmd_url, data = formData).then(function (data) {

            exitTimer = true;
            document.getElementById("btn_import").setAttribute("class", "btn btn-primary")
            document.getElementById("btn_import").disabled = false;

            document.getElementById("progress_bar").setAttribute("aria-valuenow", 100);
            document.getElementById("progress_bar").setAttribute("style", "width: 100%;");
            document.getElementById("progress_bar").innerText = "100%";

            showMessage("Metadata has been processed!", {
                style: 'success',
                icon: 'fas fa-server icon-green',
                details: '',
            });
        });

    }

    async function submit_button_controller() {
        $('#upload-form').on('change', function (evt) {

            if (evt.target.files == null) {
                return;
            }

            document.getElementById("btn_import").disabled = false;

            var filesCount = evt.target.files.length;

            if (!filesCount) {
                document.getElementById("btn_import").disabled = true;
            }

        });

        return true;
    }


</script>

<div class="panel-heading">
    <h4>KiCad Metadata Import</h4>
</div>

<div class='panel-content'>

    <!-- Generic note for user -->
    <div class='alert alert-info alert-block'>
        <strong>Requirements for KiCad Metadata upload:</strong>
        <ul>
            <li>
                Open the KiCad BOM export tool and use any of the generator scripts to export the part data.
            </li>

            <li>
                KiCad will create an intermediate file with .xml extension which contains all the project's data which
                is needed.
            </li>

            <li>Each part must already exist in the database. If not, KiCad will return an error for that specific
                part.
            </li>
        </ul>
    </div>

    <div id="progress_bar_container" class="container mb-5 mt-5" hidden>

        <div class="progress">
            <div id="progress_bar" class="progress-bar" role="progressbar" style="width: 0;"
                 aria-valuenow="0"
                 aria-valuemin="0"
                 aria-valuemax="100">
            </div>
        </div>
    </div>

</div>

<form id="upload-form">

    <div class="mb-3">
        <label for="formFile" class="form-label">Please select an XML file</label>
        <input class="form-control" accept=".xml" type="file" id="fileupload" name="fileupload"
               onchange="submit_button_controller()">
    </div>

</form>

<button type="submit" class="btn btn-primary" onclick="upload_csv()" title='Import' id="btn_import" disabled>
    Import Metadata
</button>