@*
 * Study link manager is the Modal that pops up if someone clicks on the Study Links button of Personal types and that
 * shows all study links and lets you create new ones.
 *@

@* Study link manager Modal (Personal Single or Personal Multiple) *@
<div class="modal fade" id="studyLinksManagerModal" 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">Study Links</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="studyLinksManagerTable">
                    <thead>
                        <tr>
                            <th class="no-info-icon" data-bs-tooltip="Activate / inactivate this study link - only activated links can be used to run this study">Active<span class="info-icon"></span><span class="ordering-icon"></span></th>
                            <th class="no-info-icon" data-bs-tooltip="ID of the worker that belongs to this study link">Worker ID<span class="info-icon"></span><span class="ordering-icon"></span></th>
                            <th class="no-info-icon" data-bs-tooltip="This code, handed to a worker, can be used in the /publix/run page to start the study.">Study code<span class="info-icon"></span><span class="ordering-icon"></span></th>
                            <th><span class="align-bottom">Study Links</span><span id="studyLinksManagerStudyLinksToggle"></span></th>
                            <th class="no-info-icon" data-bs-tooltip="Comment given during creation of study link">Comment<span class="info-icon"></span><span class="ordering-icon"></span></th>
                            <th class="no-info-icon" data-bs-tooltip="State of the study result that belongs to this link. In case of a Personal Multiple link it's the state of the study result which study link was started last."><span class="state">Study result state</span><span class="info-icon"></span><span class="ordering-icon"></span></th>
                            <th class="results no-info-icon" data-bs-tooltip="Get the study results of this type and batch">Study results<span class="info-icon"></span></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

@* Study link comment edit Modal (Personal Single or Personal Multiple) *@
<div class="modal fade" id="editCommentModal" tabindex="-1" data-bs-config='{"backdrop":"true", "focus":true, "keyboard":true}'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header align-items-start">
                <h5 class="modal-title text-truncate flex-grow-1">Edit comment of a study link</h5>
                <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form class="form-batch" id="editCommentForm">
                    <div class="row">
                        <label class="col-sm-3 col-form-label" for="editCommentInput">Comment</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="editCommentInput" name="comment" placeholder="Your comment">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-batch" id="editCommentConfirmed">Save</button>
            </div>
        </div>
    </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")";
    import * as CopyToClipboard from "@routes.Assets.versioned("lib/jatos-gui/javascripts/copyToClipboard.js")";
    import * as FormValidation from "@routes.Assets.versioned("lib/jatos-gui/javascripts/formValidation.js")";
    import * as StudyLinks from "@routes.Assets.versioned("lib/jatos-gui/javascripts/studyLinks.js")";

    const alerts = new Alerts.Named("study-links-manager");
    $("#studyLinksManagerModal, #editCommentModal").on('hide.bs.modal', alerts.hideAll);

    const studyLinksToggle = new StudyLinks.LinksWithToggle();

    let studyLinksTable;

    $('#batchTable').on('click', '.study-links-manager', function(e) {
        const batch = Helpers.getDataFromDataTableRow($("#batchTable").DataTable(), this);
        const type = $(this).parents('.study-links-setup').data('type');
        const typeUI = Helpers.getWorkerTypeUIName(type);
        if (type === "PersonalSingle") {
            $('#studyLinksManagerModal th .state').text('Study result state');
            $('#studyLinksManagerModal th.results').html('Study result<span class="info-icon"></span>');
        } else if (type === "PersonalMultiple") {
            $('#studyLinksManagerModal th .state').text('Study result state (latest)');
            $('#studyLinksManagerModal th.results').html('Study results<span class="info-icon"></span>');
        } else {
            Alerts.error("Error showing study links manager: unknown type");
        }
        Helpers.generateModalSubtitles("#studyLinksManagerModal", {"Batch": batch.title, "Type": typeUI});

        if (!batch.active) {
            alerts.warning(`The batch (${batch.title}) is currently deactivated and study links belonging to this batch will not run. Activate this batch to allow study runs.`);
        }
        if (!batch.allowedWorkerTypes.includes(type)) {
            alerts.warning(`Type "${typeUI}" is currently not allowed in this batch and study links belonging to this type will not run. Activate this type to allow study runs.`);
        }
        fillStudyLinksTable(batch, type);
        $('#studyLinksManagerModal').data('batch', batch);
        $('#studyLinksManagerModal').data('type', type);
        $('#studyLinksManagerModal').modal('show');
    });

    function fillStudyLinksTable(batch, workerType) {
        studyLinksTable = $('#studyLinksManagerTable').DataTable({
            "ajax": {
                "url": window.routes.StudyLinks.studyLinksData(window.study.id, batch.id, workerType),
                "error": () => Alerts.error(`Couldn't load study links for type "${Helpers.getWorkerTypeUIName(workerType)}" in batch "${batch.title}".`)
            },
            "destroy": true,
            "dom": `<'d-flex flex-row flex-wrap justify-content-between align-items-center form-batch gap-1 mt-1 mb-3'Bfl>
                    rt
                    <'d-flex flex-row flex-wrap justify-content-between align-items-center gap-1 mt-3'ip>`,
            "pageLength": 10,
            "pagingType": "full_numbers",
            "order": [[ 1, "desc" ]],
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            "scrollX": true,
            "columns": [
                {
                    "className": "link-active",
                    "data": null,
                    "width": "1%",
                    "render": (data, type, full, meta) => {
                        if (type === 'export' || type === 'sort') return full.active.toString();
                        if (workerType === "PersonalSingle" && isLinkUsed(workerType, full)) {
                            return '<span class="used" data-bs-tooltip="Links of type Personal Single can only be used once by a worker. This link was already used.">used</span>';
                        } else {
                            return `
                                <label class="switch no-info-icon" data-bs-tooltip="Use this switch to de-/activate this study link.">
                                    <input type="checkbox" ${full.active ? "checked" : ""}>
                                    <span class="slider slider-batch round"></span>
                                </label>`;
                        }
                    }
                },
                {
                    "data": "workerId",
                },
                {
                    "data": "studyCode",
                    "className": "study-code",
                    "render": function(studyCode, type, row) {
                        return `
                            <div class="text-nowrap">
                                <span>${studyCode}</span>
                                <span class="btn-clipboard no-info-icon" data-bs-tooltip="Copy to clipboard"></span>
                            </div>`;
                    }
                },
                {
                    "data": "studyCode",
                    "orderable": false,
                    "render": function (data, type, full, meta) {
                        if (type === 'display') return studyLinksToggle.renderLink(data);
                        else return data;
                    }
                },
                {
                    "data": "comment",
                    "render": function (data, type, full, meta) {
                        const comment = data ? data : '<span class="text-body text-opacity-50">none</span>';
                        return `<span class="btn-edit edit-comment no-info-icon" data-bs-tooltip="Edit this comment by clicking on it">
                            ${comment}</span>`;
                    }
                },
                {
                    "data": "studyResultState",
                    "render": (d) => d ? d : '<span class="text-body text-opacity-50">not yet</span>'
                },
                {
                    "data": null,
                    "orderable": false,
                    "width": "1%",
                    "render": renderWorkerResultsButton
                }
            ],
            "buttons": [
                {
                    "text": '<i class="bi-plus-lg fw-bold pe-1"></i><i class="bi-link-45deg"></i>',
                    "attr":  {
                        "id": "oneNewStudyLinkButton",
                        "data-bs-tooltip": "Shortcut to add just one study link without comment",
                    },
                    "className": "btn btn-batch",
                    "action": function(e, dt, node, config, cb) {
                        $(node).tooltip("dispose");
                    }
                },
                {
                    "text": '<i class="bi-plus-lg fw-bold pe-1"></i>New Study Links<i class="bi-link-45deg ps-1"></i>',
                    "attr":  {
                        "id": "newStudyLinksButton",
                        "data-bs-tooltip": "Add new study links",
                    },
                    "className": "btn btn-batch",
                    "action": function(e, dt, node, config, cb) {
                        $(node).tooltip("dispose");
                    }
                },
                {
                    "text": '<i class="bi-arrow-repeat"></i>',
                    "attr":  {
                        "id": "refreshButton",
                        "data-bs-tooltip": "Refresh the table",
                    },
                    "className": "btn btn-batch",
                    "action": function(e, dt, node, config) {
                        $(node).tooltip("dispose");
                        this.disable();
                        studyLinksTable.ajax.reload();
                        setTimeout(this.enable, 3000);
                    }
                }
            ],
            language: {
                "lengthMenu": "_MENU_",
                "search": "Search:",
                "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 links yet",
            },
            "initComplete": function(settings, json) {
                generateShowButtonGroup();
                studyLinksToggle.renderToggle("#studyLinksManagerStudyLinksToggle", "#studyLinksManagerTable", "ms-1");
                $("#studyLinksManagerTable_wrapper .dt-buttons").not("#studyLinksTableShow").removeClass("btn-group");
                Helpers.activateTooltips('#studyLinksManagerModal');
            },
            "drawCallback": function(settings) {
                adjustColumns();
                $(".study-code .btn-clipboard").click(CopyToClipboard.onClick);
                $("#studyLinksManagerTable_wrapper .dt-length").addClass("text-start");
                $("#studyLinksManagerTable_wrapper .dt-length select").removeClass("form-select-sm");
                $("#studyLinksManagerTable_wrapper .dt-search input").removeClass("form-control-sm");
                Helpers.activateTooltips('#studyLinksManagerModal');
            }
        });

        function generateShowButtonGroup() {
            new $.fn.dataTable.Buttons(studyLinksTable, {
                "name": "showButtonGroup",
                "buttons": [
                    {
                        "text": "All",
                        "className": "btn-batch",
                        "init": (dt, node, config) => node.removeClass("btn-secondary"),
                        "attr":  {
                            "data-bs-tooltip": "Show all study links",
                        },
                        "action": function(e, dt, node, config) {
                            $(node).tooltip("dispose");
                            dt.column(0).search("").draw();
                        }
                    },
                    {
                        "text": "Active",
                        "className": "btn-outline-secondary",
                        "init": (dt, node, config) => node.removeClass("btn-secondary"),
                        "attr":  {
                            "data-bs-tooltip": "Show only active study links",
                        },
                        "action": (e, dt, node, config) => {
                            $(node).tooltip("dispose");
                            dt.column(0).search((str, data, idx) => data.active && !isLinkUsed(workerType, data)).draw();
                        }
                    },
                    {
                        "text": "Deactivated",
                        "className": "btn-outline-secondary",
                        "init": (dt, node, config) => node.removeClass("btn-secondary"),
                        "attr":  {
                            "data-bs-tooltip": "Show only deactivated study links",
                        },
                        "action": (e, dt, node, config) => {
                            $(node).tooltip("dispose");
                            dt.column(0).search((str, data, idx) => !data.active).draw();
                        }
                    },
                    {
                        "text": "Used",
                        "className": "btn-outline-secondary",
                        "init": (dt, node, config) => {
                            node.removeClass("btn-secondary");
                            //if (workerType !== "PersonalSingle") node.disable();
                        },
                        "attr":  {
                            "data-bs-tooltip": "Show only study links that were already used by a worker.",
                        },
                        "action": function(e, dt, node, config) {
                            $(node).tooltip("dispose");
                            dt.column(0).search((str, data, idx) => isLinkUsed(workerType, data)).draw();
                        }
                    }
                ]
            });

            studyLinksTable.buttons('showButtonGroup', null).containers()
                    .attr('id', 'studyLinksTableShow')
                    .addClass('me-2')
                    .prependTo('#studyLinksManagerTable_wrapper .dt-length');
            $('<label for="studyLinksTable_show" class="me-2">Show:</label>').prependTo('.dt-length');

            $('#studyLinksTableShow').on('click', 'button', function() {
                $(this).parent().children('button').each((i, button) => {
                    $(button).removeClass('btn-batch').addClass('btn-outline-secondary');
                });
                $(this).removeClass('btn-outline-secondary').addClass('btn-batch');
            });
        }

        function renderWorkerResultsButton(data, type, full) {
            const workerType = $('#studyLinksManagerModal').data('type');
            let buttonText, count, hideBadge, tooltip;
            if (workerType === "PersonalMultiple") {
                buttonText = "Results";
                count = full.studyResultCount,
                hideBadge = false;
                tooltip = count > 0
                    ? `This study link has ${count} result(s) so far. Click here to go to a result page that only shows the study results of the worker that is associated to this study link.`
                    : "This study link has no results yet.";
            } else {
                buttonText = "Result";
                count = "";
                hideBadge = true;
                tooltip = "Click here to go to a result page that only shows the study result of the worker that is associated to this study link.";
            }
            const button = `
                <a type="button" class="btn btn-batch worker-results-button no-info-icon text-nowrap"
                    data-bs-tooltip="${tooltip}"
                    href="${window.routes.StudyResults.workersStudyResults(full.workerId)}">
                    ${buttonText}
                    <span class="badge text-batch bg-white rounded-pill ms-1 ${hideBadge ? "d-none" : ""}">${count}</span>
                </a>`;
            return full.studyResultState !== null ? button : '<span class="text-body text-opacity-50">none</span>';
        }

        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 = $("#studyLinksManagerTable th").first();
            if (firstRow.width() <= 1) {
                window.requestAnimationFrame(adjustColumns);
            } else {
                Helpers.setButtonWidthToMax("#studyLinksManagerTable .worker-results-button");
                studyLinksTable.columns.adjust();
            }
        };
    }

    $('#studyLinksManagerModal').on('click', '#newStudyLinksButton', function(e) {
        const batch = $('#studyLinksManagerModal').data('batch');
        const type = $('#studyLinksManagerModal').data('type');
        $("#studyLinksCreatorModal").data("batch", batch);
        $("#studyLinksCreatorModal").data("type", type);
        $('#studyLinksCreatorModal').modal('show');
    });

    $('#studyLinksManagerModal').on('click', '#oneNewStudyLinkButton', function(e) {
        const batch = $('#studyLinksManagerModal').data('batch');
        const type = $('#studyLinksManagerModal').data('type');
        $.ajax({
            url: window.routes.Api.getStudyCodes(window.study.id, batch.id, type, "", 1),
            success: () => studyLinksTable.ajax.reload(),
            error: (err) => err.responseText ? alerts.error(err.responseText) : alerts.error("Couldn't get study codes")
        });
    });

    $('#studyLinksManagerModal').on('click', '.refreshButton', function(e) {
        this.tooltip("dispose");
        this.disable();
        studyLinksTable.ajax.reload();
        setTimeout(this.enable, 3000);
    });

    $('#studyLinksManagerModal').on('click', '.link-active input', function(e) {
        e.preventDefault();
        const checkbox = this;
        const batch = $('#studyLinksManagerModal').data('batch');
        const active = $(checkbox).is(':checked');
        const tr = $(checkbox).closest('tr');
        const linkData = studyLinksTable.row(tr).data();
        $.ajax({
            url: window.routes.StudyLinks.toggleStudyLinkActive(window.study.id, batch.id, linkData.studyCode, active),
            type: "POST",
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            success: function(active) {
                linkData.active = active;
                $(checkbox).prop('checked', linkData.active);
            },
            error: (err) => err.responseText ? alerts.error(err.responseText) : alerts.error("Couldn't toggle study link activation")
        });
    });

    $('#studyLinksManagerModal').on('click', '.edit-comment', function(e) {
        $("#editCommentForm")[0].reset();
        FormValidation.clear("#editCommentForm");

        const tr = $(this).closest('tr');
        const linkData = studyLinksTable.row(tr).data();
        Helpers.generateModalSubtitles("#editCommentModal", {"Worker ID": linkData.workerId, "Study code": linkData.studyCode});
        $('#editCommentModal #editCommentInput').val(linkData.comment);

        $('#editCommentModal').data('workerId', linkData.workerId);
        $('#editCommentModal').modal('show');
    });

    Helpers.triggerButtonByEnter("#editCommentModal", "#editCommentConfirmed");

    $("#editCommentConfirmed").click(function(event) {
        const workerId = $('#editCommentModal').data('workerId');
        $.ajax({
            url: window.routes.StudyLinks.editWorkerComment(workerId),
            type : "POST",
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            data : $('#editCommentForm').serialize(),
            success: function() {
                $('#editCommentModal').modal('hide');
                studyLinksTable.ajax.reload();
            },
            error : function(err) {
                const errMsg = err.responseText ? err.responseText : "Couldn't change study link comment";
                FormValidation.show("#editCommentForm", {comment: [errMsg]});
            }
        });
    });

    function isLinkUsed(workerType, linkData) {
        if (workerType === "PersonalSingle") {
            return linkData.studyResultState !== null && linkData.studyResultState !== "PRE";
        } else {
            return linkData.studyResultState !== null;
        }
    }
</script>