{% comment %}

Compare cell types

Input:
- id: prefix used in the identifiers of all elements

{% endcomment %}

<style>
    .w-400px {
        width: 400px;
    }

    .w-250px {
        width: 250px;
    }

    #{{ id }}-vs-cell-type {
        width:50px;
        height:50px;
        background-color: var(--primary-color);
    }

    #{{ id }}-cell-type-compare-empty > span {
        max-width: 32rem;
        text-wrap: balance;
    }
</style>

{% load static %}
{% with metric=query.metric|default:"samap" %}
    <div class="row g-2 mb-4 align-items-start">
        <div class="col-auto">
            <div class="d-flex justify-content-between align-items-center small">
                <label class="col-form-label">
                    <i class="fa fa-list-check"></i>
                    Dataset for comparison
                </label>
            </div>

            <div class="btn-group w-400px" role="group">
                {% include "../select/dataset.html" with id="cell-types" redirect="query" placeholder="Search..." prefix="" class="w-100" dataset=dataset2.slug anchor="cell-types" dataset_dict=compare_dataset_dict %}
            </div>
        </div>

        <div class="col-auto">
            <div class="d-flex justify-content-between align-items-center small">
                <label class="col-form-label">
                    <i class="fa fa-ruler-horizontal"></i>
                    Metric
                </label>
            </div>

            <select id="metric"
                    aria-label="Select metric"
                    class="form-select form-select mb-3 btn-outline-primary">
                <option {% if metric == 'samap' %}selected{% endif %} value="samap">SAMap</option>
                <option {% if metric == 'pesci' %}selected{% endif %} value="pesci">Pesci</option>
                <option {% if metric == 'aucell' %}selected{% endif %} value="aucell">AUCell</option>
            </select>
        </div>

        <div class="col-auto">
            <div class="d-flex justify-content-between align-items-center small">
                <label class="col-form-label">
                    <i class="fa fa-chart-simple"></i>
                    Plot type
                </label>
            </div>

            <select id="plot"
                    aria-label="Select plot type"
                    class="form-select form-select mb-3 btn-outline-primary">
                <option {% if query.plot == 'alluvial' %}selected{% endif %} value="alluvial">Alluvial plot</option>
                <option {% if query.plot == 'heatmap' %}selected{% endif %} value="heatmap">Heatmap</option>
            </select>
        </div>

        <div class="col-auto">
            <div class="d-flex justify-content-between align-items-center small">
                <label class="col-form-label">
                    <i class="fa fa-filter"></i>
                    Threshold
                </label>
            </div>
            <div class="btn-group" role="group">
                <button type="button"
                        class="btn btn-outline-primary dropdown-toggle"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        data-bs-auto-close="outside">
                    Score ≥ <span id="threshold_value">5</span> %
                </button>
                <div class="dropdown-menu">
                    <div class="mx-4 mb-3 w-250px">
                        <form novalidate action="#{{ id }}">
                            <label for="threshold" class="col-form-label">
                                <small>Minimum alignment score</small>
                            </label>

                            <input type="range"
                                   class="js-range-slider opacity-0"
                                   id="threshold"
                                   name="min_{{ metric }}"
                                   value="0"
                                   step="1">

                            <div class="d-flex justify-content-end">
                                <button id="{{ id }}_submit" type="submit" class="btn btn-primary mt-3">Apply</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="module">
    import { initRangeSlider } from "{% static 'app/dist/utils/range_slider.js' %}";
    import { handleFormSubmit, updateParam } from "{% static 'app/dist/atlas/celltype_compare.js' %}";

    const metric = "{{ metric }}";
    const params = new URLSearchParams(window.location.search);
    const fromValue = parseInt(params.get(`min_${metric}`) || "5");

    initRangeSlider("#threshold",
        { min: 0, max: 100, from: fromValue },
        ["#threshold_value", undefined]
    );

    handleFormSubmit();

    // Hide alluvial option when AUCell is selected (directional scores)
    const plotSelect = document.getElementById("plot");
    const alluvialOption = plotSelect.querySelector('option[value="alluvial"]');
    if (metric === "aucell" && alluvialOption) {
        alluvialOption.hidden = true;
        if (plotSelect.value === "alluvial") {
            plotSelect.value = "heatmap";
        }
    }

    document.getElementById("metric").addEventListener("change", function () {
        const url = new URL(window.location);
        url.searchParams.set("metric", this.value);
        // Force heatmap when switching to AUCell
        if (this.value === "aucell" && url.searchParams.get("plot") === "alluvial") {
            url.searchParams.set("plot", "heatmap");
        }
        window.location.href = url.href;
    });

    plotSelect.addEventListener("change", function () {
        updateParam("plot", this.value);
    });
    </script>

    <!-- Use column due to vega-lite's bug with containers for concatenated plots -->
    {% if not dataset2 %}
        <p class="text-muted">
            <i class="fa fa-circle-exclamation"></i>
            Choose a dataset to compare.
        </p>
    {% elif dataset2 == dataset %}
        <p class="text-muted">
            <i class="fa fa-circle-exclamation"></i>
            Choose a dataset different than the current one to compare.
        </p>
    {% elif dataset2.species == dataset.species %}
        <p class="text-muted">
            <i class="fa fa-circle-exclamation"></i>
            Choose a dataset from a different species to compare.
        </p>
    {% else %}
        <div class="row">
            <div {% if query.plot == 'heatmap' or metric == 'aucell' %}class="col-9 col-sm-10 col-lg-3"{% else %}class="col-12 col-lg-5"{% endif %}>
                {% include "../plot_container.html" with id=id ratio="16/9" %}
            </div>

            {% if query.plot == "heatmap" or metric == "aucell" %}
                <div class="col-3 col-sm-2 col-lg-2"></div>
            {% endif %}

            <div class="col-12 col-lg-7">
                <div class="d-flex justify-content-center gap-3 align-items-center text-center small mb-3">
                    <div class="d-flex flex-column align-items-center flex-grow-1 flex-shrink-1">
                        <div>{{ dataset.get_html_link }}</div>
                        <div id="{{ id }}-metacell-type">Select a cell type pair</div>
                    </div>

                    <div id="{{ id }}-vs-cell-type"
                         class="fw-bold fs-5 text-white rounded-circle d-flex align-items-center justify-content-center shadow">
                        VS
                    </div>

                    <div class="d-flex flex-column align-items-center flex-grow-1 flex-shrink-1">
                        <div>{{ dataset2.get_html_link }}</div>
                        <div id="{{ id }}-metacell2-type">Select a cell type pair</div>
                    </div>
                </div>

                <div class="small mb-2 text-center">
                    <span id="{{ id }}-gene-pair-summary">Gene pairs</span>
                    <i class="fa fa-circle-question text-secondary"
                       data-bs-toggle="tooltip"
                       data-bs-placement="bottom"
                       data-bs-title="Gene pairs contributing to cell-type alignment"></i>
                </div>

                <div id="{{ id }}-cell-type-compare-empty"
                     class="text-center text-muted py-5 small">
                    <span class="d-block mx-auto">Select a cell-type pair in the plot to compare its aligned gene pairs.</span>
                </div>
                <table id="{{ id }}-cell-type-compare-table"
                       class="table table-sm table-striped small">
                </table>
            </div>
        </div>

        <script type="module">
        import { initCellTypeCompare } from "{% static 'app/dist/atlas/celltype_compare.js' %}";
        const id = "{{id}}";
        const label = "{{dataset}}";
        const dataset = "{{dataset.slug}}";
        const species = "{{dataset.species}}";

        const label2 = "{{dataset2}}";
        const dataset2 = "{{dataset2.slug}}";
        const species2 = "{{dataset2.species}}";
        const metric = "{{ metric }}";

        initCellTypeCompare(id, label, dataset, species, label2, dataset2, species2, metric);
        </script>
    {% endif %}
{% endwith %}