@* Show all groups Modal *@
<div class="modal fade" id="groupsModal" tabindex="-1" data-bs-config='{"backdrop":"true", "focus":true, "keyboard":true}'>
    <div class="modal-dialog modal-xxl">
        <div class="modal-content">
            <div class="modal-header align-items-start">
                <h5 class="modal-title text-truncate flex-grow-1">All groups</h5>
                <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <table class="table table-hover align-middle w-100" id="groupsTable">
                    <thead>
                        <tr>
                            <th>Group ID<span class="ordering-icon"></span></th>
                            <th class="no-info-icon" data-bs-tooltip="A fixed group cannot have new members join">Fixed<span class="info-icon"></span><span class="ordering-icon"></span></th>
                            <th class="no-info-icon" data-bs-tooltip="All currently active members">Active members<span class="info-icon"></span></th>
                            <th class="no-info-icon" data-bs-tooltip="All members who were once in this group">Past members<span class="info-icon"></span></th>
                            <th class="no-info-icon" data-bs-tooltip="Time and date when the group was started">Start time<span class="info-icon"></span><span class="ordering-icon"></span></th>
                            <th class="no-info-icon" data-bs-tooltip="Time and date when the was finished">End time<span class="info-icon"></span><span class="ordering-icon"></span></th>
                            <th class="no-info-icon" data-bs-tooltip="Current state of the group">Group state<span class="info-icon"></span><span class="ordering-icon"></span></th>
                            <th id="groupSessionDataColumn"></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

@* Template groups button bar *@
<div class="d-none" id="groupToolbarTemplate">
    <div class="float-end text-nowrap">
        <button type="button" class="group-session btn btn-batch" data-bs-tooltip="Open and edit this group's session data">
            <i class="bi-list-columns-reverse"></i><span class="d-none d-xl-inline ps-1">Group Session Data</span>
        </button>
        <button class="group-results btn btn-batch" type="button" data-bs-tooltip="Show only the study results that belong to this group">
            <span class="d-none d-xl-inline">Group </span>Results
            <span class="badge text-batch bg-white rounded-pill no-info-icon ms-1"></span>
        </button>
    </div>
</div>

<script @{helper.CSPNonce.attr} type="module">
    import * as Helpers from "@routes.Assets.versioned("lib/jatos-gui/javascripts/helpers.js")";
    import * as Alerts from "@routes.Assets.versioned("lib/jatos-gui/javascripts/alerts.js")";
    import * as WaitingModal from "@routes.Assets.versioned("lib/jatos-gui/javascripts/waitingModal.js")";

    const alerts = new Alerts.Named("groups-modal");
    $("#groupsModal").on('hide.bs.modal', alerts.hideAll);

    $('#batchTable').on('click', '.groups', function() {
        const batch = Helpers.getDataFromDataTableRow($("#batchTable").DataTable(), this);
        Helpers.generateModalSubtitles("#groupsModal", {"Batch": batch.title});
        generateGroupsTable(batch);
        $('#groupsModal').modal('show');
    });

    let groupsTable;
    function generateGroupsTable(batch) {
        const dataUrl = window.routes.Api.getGroupsOfBatch(batch.id);
        if (groupsTable) {
            groupsTable.ajax.url(dataUrl).load();
            return;
        }
        groupsTable = $('#groupsTable').DataTable({
            "ajax": {
                "url" : dataUrl,
                "error": () => Alerts.error("Error reading group data")
            },
            "dom": `<'d-flex flex-row flex-wrap justify-content-between align-items-center form-batch gap-1 mt-1 mb-3'B<'mb-2'f><'mb-2'l>>
                    rt
                    <'d-flex flex-row flex-wrap justify-content-between align-items-center mt-3'<'mb-2'i><'mb-2'p>>`,
            "order": [[ 6, "desc" ]],
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "pageLength": 10,
            "pagingType": "full_numbers",
            "stateSave": true,
            "stateSaveParams": function (settings, data) {
                // does not work in FF
                data.search.search = "";
                data.start = 0;
            },
            "scrollX": true,
            buttons: [
                {
                    text: '<i class="bi-arrow-repeat"></i>',
                    "className": "btn btn-batch",
                    "attr": {
                        "data-bs-tooltip": "",
                        "data-bs-tooltip": "Refresh groups",
                    },
                    action: function ( e, dt, node, config ) {
                        $(node).tooltip("dispose");
                        this.disable();
                        groupsTable.ajax.reload();
                        setTimeout(this.enable, 3000);
                    }
                }
            ],
            "columns": [
                {
                    "data": "id",
                    "className": "ps-3",
                    "width": "1%"
                },
                {
                    "data": "groupState",
                    "width": "1%",
                    "render": drawFixedGroupButton
                },
                {
                    "data": "activeMemberList",
                    "orderable": false,
                    "render": drawMemberColumn
                },
                {
                    "data": "historyMemberList",
                    "orderable": false,
                    "render": drawMemberColumn
                },
                {
                    "data": "startDate",
                    "render": Helpers.getLocalTimeDataTables
                },
                {
                    "data": "endDate",
                    "render": Helpers.getLocalTimeDataTables
                },
                {
                    "data": "groupState"
                },
                {
                    "class": "toolbar",
                    "data": null,
                    "orderable": false,
                    "render": function (data, type, full, meta) {
                        const toolbar = $('#groupToolbarTemplate').clone().show();
                        $(toolbar).find('.group-results .badge').text(data.resultCount);
                        const tooltipResults = data.resultCount > 0
                                ? `This group has ${data.resultCount} result(s) so far. Click here to go to a result page that only shows the study results of this group.`
                                : "This group has no results yet.";
                        $(toolbar).find('.group-results').attr("data-bs-tooltip", tooltipResults);
                        return toolbar.html();
                    }
                }
            ],
            language: {
                "lengthMenu": "Show: _MENU_",
                "paginate": {
                    "first": `<i class="bi-chevron-double-left"></i>`,
                    "previous": `<i class="bi-chevron-left"></i>`,
                    "next": `<i class="bi-chevron-right"></i>`,
                    "last": `<i class="bi-chevron-double-right"></i>`
                },
                "emptyTable": "No groups yet"
            },
            "drawCallback": function(settings) {
                $("#groupsTable_wrapper .dt-length select").removeClass("form-select-sm");
                $("#groupsTable_wrapper .dt-search input").removeClass("form-control-sm");
                adjustColumns();
                Helpers.activateTooltips('#groupsTable_wrapper');
            }
        });
    }

    function drawFixedGroupButton(groupState) {
        switch(groupState) {
        case "STARTED":
            return `
                <button type="button" class="btn btn-batch fix-button" data-bs-tooltip="Currently unfixed (new members can join). Click to fix this group.">
                    <i class="bi-circle fw-bold"></i>
                </button>`;
        case "FIXED":
            return `
                <button type="button" class="btn btn-secondary fix-button fixed-group" data-bs-tooltip="Currently fixed (no new members can join). Click to unfix this group.">
                    <i class="bi-slash-circle fw-bold"></i>
                </button>`;
        case "FINISHED":
            return `
                <button type="button" class="btn btn-secondary fix-button" data-bs-tooltip="A finished group cannot be fixed." disabled>
                    <i class="bi-x-circle fw-bold"></i>
                </button>`;
        }
    }

    function drawMemberColumn(data) {
        if (data.length == 0) {
            return '<span class="text-body text-opacity-50">none</span>';
        } else {
            return data.join(', ');
        }
    }

    function adjustColumns() {
        // This is an ugly hack: just using 'DataTable.columns.adjust()' in "drawCallback" doesn't work. For some reason
        // all table elements have a negative width in the beginning for some time. Here we wait until the first 'th'
        // element has a width of > 1 and only then trigger the column resizing.
        const firstRow = $("#groupsTable th").first();
        if (firstRow.width() <= 1) {
            window.requestAnimationFrame(adjustColumns);
        } else {
            Helpers.setButtonWidthToMax("#groupsTable .group-results");
            groupsTable.columns.adjust();
        }
    };

    $('#groupsModal').on('click', '.fix-button', function() {
        const button = this;
        const tr = $(this).closest('tr');
        const groupId = groupsTable.row(tr).data().id;
        const fixed = $(this).hasClass('fixed-group');
        $.ajax({
            url: window.routes.StudyLinks.toggleGroupFixed(window.study.id, groupId, !fixed),
            type : "POST",
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            success: function(groupState) {
                $(button).parent().html(drawFixedGroupButton(groupState));
                groupsTable.cell(tr, 6).data(groupState);
            },
            error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't toggle group fix")
        });
    });

    $('#groupsTable').on('click', '.group-results', function() {
        const tr = $(this).closest('tr');
        const groupId = groupsTable.row(tr).data().id;
        window.location.href =  window.routes.StudyResults.groupsStudyResults(window.study.id, groupId);
    });
</script>