{% extends "Admin.html" %}
{% from "Macros.html" import json_input, modal %}

{% block titlearea %}

<div class="align-center d-flex justify-content-between my-4" id="title-container">
    <h2 id="uproot-title" class="fw-semibold">
        {% translate %}
        Session
        {% endtranslate %}
        <a href="../" class="font-monospace link-subtle">{{ sname }}</a>
        <span class="fw-light text-secondary">&rsaquo; {% translate %}Pipelines{% endtranslate %}</span>
    </h2>
</div>

{% endblock titlearea %}


{% block main3 %}

{% for appname in apps %}

<h3>{{ appname }}</h3>

<div class="mb-5">
    {% if appname in subhtml %}
    <div class="mb-3">
    {{ subhtml[appname] }}
    </div>
    {% endif %}
    <div class="btn-group">
        <button
            type="button"
            class="btn btn-outline-uproot"
            onclick="uprootRunPipeline('{{ appname | urlencode }}', 'csv')"
        >{% translate %}Run pipeline{% endtranslate %}</button>
        <button type="button" class="btn btn-outline-uproot dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">{% translate %}Pipeline options{% endtranslate %}</span>
        </button>
        <ul class="dropdown-menu">
            <li>
                <button class="dropdown-item" type="button" onclick="uprootRunPipeline('{{ appname | urlencode }}', 'jsonl')">{% translate %}Run as JSONL{% endtranslate %}</button>
            </li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li>
                <button class="dropdown-item" type="button" onclick="uprootOpenPipelineData('{{ appname | urlencode }}')">{% translate %}Invoke with data...{% endtranslate %}</button>
            </li>
        </ul>
    </div>
</div>

{% endfor %}

{% call modal(_, "pipeline-data", title=_("Invoke with data"), action_text=_("Run pipeline"), action_handler="uprootRunPipelineWithData()") %}
<p class="mb-3">
    <span id="pipeline-data-appname" class="font-monospace"></span>
</p>
<div class="form-floating mb-3">
    <select class="form-select" id="pipeline-data-filetype">
        <option value="csv" selected>{% translate %}Automatic (CSV if tabular){% endtranslate %}</option>
        <option value="jsonl">JSONL</option>
    </select>
    <label for="pipeline-data-filetype">{% translate %}Output{% endtranslate %}</label>
</div>
{{ json_input(_, "pipeline-data-input", _("Pipeline data"), rows=8, help_text=_("Input is evaluated as a JavaScript expression. You can use comments, calculations, variables, etc. The result must be JSON-serializable.")) }}
{% endcall %}

{% call modal(_, "pipeline-result", title=_("Pipeline result"), dialog_class="modal-lg") %}
<textarea class="form-control font-monospace" id="pipeline-result-output" rows="16" style="resize: none;" readonly></textarea>
{% endcall %}

<script>
let uprootPipelineDataAppname = null;
let uprootPipelineDataShown = Promise.resolve();
let uprootPipelineDataHidden = Promise.resolve();

I("pipeline-data-modal").addEventListener("show.bs.modal", event => {
    const modal = event.currentTarget;

    uprootPipelineDataShown = new Promise(resolve => {
        modal.addEventListener("shown.bs.modal", resolve, {once: true});
    });
    uprootPipelineDataHidden = new Promise(resolve => {
        modal.addEventListener("hidden.bs.modal", resolve, {once: true});
    });
});

function uprootOpenPipelineData(appname) {
    uprootPipelineDataAppname = appname;

    I("pipeline-data-appname").textContent = decodeURIComponent(appname);
    I("pipeline-data-filetype").value = "csv";
    I("pipeline-data-input").value = "";

    const modal = bootstrap.Modal.getOrCreateInstance(I("pipeline-data-modal"));
    modal.show();
}

function uprootRunPipelineWithData() {
    if (!uprootPipelineDataAppname) {
        return;
    }

    const filetype = I("pipeline-data-filetype").value;
    const dataText = I("pipeline-data-input").value.trim();

    if (!dataText) {
        return uproot.error(_("Please enter pipeline data."));
    }

    const options = {};

    try {
        options.method = "POST";
        options.headers = {"Content-Type": "application/json"};
        options.body = JSON.stringify(JSON.parse(uproot.looseJSONtoJSON(dataText)));
    } catch {
        return uproot.error(_("The data you entered cannot be properly encoded as JSON."));
    }

    uprootRunPipeline(uprootPipelineDataAppname, filetype, options);
}

async function uprootRunPipeline(appname, filetype, options = {}) {
    const response = await fetch(`${appname}/run/?filetype=${filetype}`, options);
    const disposition = response.headers.get("content-disposition") || "";

    if (!response.ok) {
        alert(await uprootPipelineResponseText(response));
        return;
    }

    if (!disposition.includes("attachment")) {
        return uprootShowPipelineResult(await response.text());
    }

    const blob = await response.blob();
    const match = disposition.match(/filename="?([^"]+)"?/);
    const filename = match ? match[1] : `pipeline.${filetype}`;
    const link = document.createElement("a");

    link.href = URL.createObjectURL(blob);
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    URL.revokeObjectURL(link.href);
    link.remove();

    await uprootHidePipelineDataModal();
}

async function uprootHidePipelineDataModal() {
    await uprootPipelineDataShown;

    const modal = bootstrap.Modal.getInstance(I("pipeline-data-modal"));
    if (modal) {
        modal.hide();
    }

    await uprootPipelineDataHidden;
}

async function uprootShowPipelineResult(text) {
    const output = I("pipeline-result-output");

    output.value = text;
    output.scrollTop = 0;

    await uprootHidePipelineDataModal();
    bootstrap.Modal.getOrCreateInstance(I("pipeline-result-modal")).show();
}

async function uprootPipelineResponseText(response) {
    const text = await response.text();

    try {
        return JSON.parse(text).detail || text;
    } catch {
        return text;
    }
}
</script>

{% endblock main3 %}