@* Study link setup is responsible for the collapsible details of a batch (with the link types) *@

@* Template study links setup (each batch has one) *@
<div class="d-none" id="studyLinksSetupTemplate">
    <div class="collapse study-links-setup-item m-2 mx-5">

        <div class="study-links-setup d-flex align-items-center mb-2" data-type="PersonalSingle">
            <label class="switch no-info-icon" data-bs-tooltip="Use this switch to de-/activate this type. Study links from deactivated types will not work.">
                <input class="active-type" type="checkbox">
                <span class="slider slider-batch round"></span>
            </label>
            <div class="flex-grow-1 mx-3">
                <span data-bs-tooltip="Study links with the type Personal Single can run a study only once. They are typically used to be distributed amongst workers that you contact individually. Each link can be personalized with a comment.">Personal Single</span>
            </div>
            <div class="text-nowrap float-end">
                <button class="btn btn-batch study-links-manager" type="button" data-bs-tooltip="Manage study links (show existing, add new) for the type Personal Single">
                    <span class="d-none d-xl-inline"><i class="bi-link-45deg pe-1"></i>Study </span>Links<span class="study-links-badge badge text-batch bg-white rounded-pill ms-1"></span>
                </button>
                <button class="btn btn-batch worker-results-button" type="button" data-bs-tooltip="Show all study results that belong to this batch and type Personal Single">
                    Results<span class="worker-results-badge badge text-batch bg-white rounded-pill ms-1"></span>
                </button>
            </div>
        </div>

        <div class="study-links-setup d-flex align-items-center mb-2" data-type="PersonalMultiple">
            <label class="switch no-info-icon" data-bs-tooltip="Use this switch to de-/activate this type. Study links from deactivated types will not work.">
                <input class="active-type" type="checkbox">
                <span class="slider slider-batch round"></span>
            </label>
            <div class="flex-grow-1 mx-3">
                <span data-bs-tooltip="Study links with the type Personal Multiple can run a study multiple times. They are typically used to be distributed amongst workers that you contact individually. Each link can be personalized with a comment.">Personal Multiple</span>
            </div>
            <div class="text-nowrap float-end">
                <button class="btn btn-batch study-links-manager" type="button" data-bs-tooltip="Manage study links (show existing and add new) for the type Personal Multiple">
                    <span class="d-none d-xl-inline"><i class="bi-link-45deg pe-1"></i>Study </span>Links<span class="study-links-badge badge text-batch bg-white rounded-pill ms-1"></span>
                </button>
                <button class="btn btn-batch worker-results-button" type="button" data-bs-tooltip="Show all study results that belong to this batch and type Personal Multiple">
                    Results<span class="worker-results-badge badge text-batch bg-white rounded-pill ms-1"></span>
                </button>
            </div>
        </div>

        <div class="study-links-setup d-flex align-items-center mb-2" data-type="GeneralSingle">
            <label class="switch no-info-icon" data-bs-tooltip="Use this switch to de-/activate this type. Study links from deactivated types will not work.">
                <input class="active-type" type="checkbox">
                <span class="slider slider-batch round"></span>
            </label>
            <div class="flex-grow-1 mx-3">
                <span data-bs-tooltip="Study links with the type General Single can be used many times - but only once in the same browser. There is only one link of this type per batch. They are typically used to be distributed in a mailing list or posting in social media.">General Single</span>
            </div>
            <div class="text-nowrap float-end">
                <button class="btn btn-batch study-link-button" type="button" data-bs-tooltip="Show the study link for type General Single">
                    <span class="d-none d-xl-inline"><i class="bi-link-45deg pe-1"></i>Study </span>Link<span class="study-links-badge badge text-batch bg-white rounded-pill ms-1"></span>
                </button>
                <button class="btn btn-batch worker-results-button" type="button" data-bs-tooltip="Show all study results that belong to this batch and type General Single">
                    Results<span class="worker-results-badge badge text-batch bg-white rounded-pill ms-1"></span>
                </button>
            </div>
        </div>

        <div class="study-links-setup d-flex align-items-center mb-2" data-type="GeneralMultiple">
            <label class="switch no-info-icon" data-bs-tooltip="Use this switch to de-/activate this type. Study links from deactivated types will not work.">
                <input class="active-type" type="checkbox">
                <span class="slider slider-batch round"></span>
            </label>
            <div class="flex-grow-1 mx-3">
                <span data-bs-tooltip="Study links with the type General Multiple can be used many times - even in the same browser. There is only one link of this type per batch. They are typically used to be distributed in a mailing list or posting in social media.">General Multiple</span>
            </div>
            <div class="text-nowrap float-end">
                <button class="btn btn-batch study-link-button" type="button" data-bs-tooltip="Show the study link for type General Multiple">
                    <span class="d-none d-xl-inline"><i class="bi-link-45deg pe-1"></i>Study </span>Link<span class="study-links-badge badge text-batch bg-white rounded-pill ms-1"></span>
                </button>
                <button class="btn btn-batch worker-results-button" type="button" data-bs-tooltip="Show all study results that belong to this batch and type General Multiple">
                    Results<span class="worker-results-badge badge text-batch bg-white rounded-pill ms-1"></span>
                </button>
            </div>
        </div>

        <div class="study-links-setup d-flex align-items-center" data-type="MT">
            <label class="switch no-info-icon" data-bs-tooltip="Use this switch to de-/activate this type. Study links from deactivated types will not work.">
                <input class="active-type" type="checkbox">
                <span class="slider slider-batch round"></span>
            </label>
            <div class="flex-grow-1 mx-3">
                <span data-bs-tooltip="MTurk workers do not have a study link they have source code that contains the study link. This source code has to be copied into the 'source' field of your study's design layout in Mechanical Turk.">MTurk</span>
            </div>
            <div class="text-nowrap float-end">
                <button class="btn btn-batch mt-source-code" type="button" data-bs-tooltip="Show code that has to be copied into the 'source' field of your study's design layout in Mechanical Turk">
                    <span class="d-none d-xl-inline"><i class="bi-code-slash pe-1"></i>Source </span>Code
                </button>
                <button class="btn btn-batch worker-results-button" type="button" data-bs-tooltip="Show all study results that belong to this batch and type MTurk">
                    Results<span class="worker-results-badge badge text-batch bg-white rounded-pill ms-1"></span>
                </button>
            </div>
        </div>
    </div>
</div>

@* Study link display Modal for the general link types *@
<div class="modal fade" id="singleStudyLinkDisplayModal" tabindex="-1" data-bs-config='{"backdrop":"static", "focus":true, "keyboard":true}'>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header align-items-start">
                <h5 class="modal-title text-truncate flex-grow-1">Study link</h5>
                <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="singleStudyLinkDisplayStudyLinksToggle"></div>
                <div class="card card-body" id="singleStudyLinkDisplayStudyLink"></div>
            </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 StudyLinks from "@routes.Assets.versioned("lib/jatos-gui/javascripts/studyLinks.js")";

    const alerts = new Alerts.Named("single-study-link-display");
    $("#singleStudyLinkDisplayModal").on('hide.bs.modal', alerts.hideAll);

    $('#batchTable').on('click', 'td.details-control', function() {
        const tr = $(this).closest('tr');
        const row = $("#batchTable").DataTable().row(tr);
        if (row.child.isShown()) {
            const collapseElement = row.child().find(".collapse");
            // First we collapse with Bootstrap and then we hide the DataTable row
            collapseElement.one('hidden.bs.collapse', row.child.hide);
            new bootstrap.Collapse(collapseElement).hide();
        } else {
            const batch = row.data();
            $.ajax({
                url: window.routes.StudyLinks.studyLinksSetupData(window.study.id, batch.id),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
            }).done(function(studyLinksSetupData) {
                const studyLinksSetupDiv = $('#studyLinksSetupTemplate .study-links-setup-item').clone();
                // We first show the DataTables row and then de-collapse with Bootstrap
                row.child(studyLinksSetupDiv).show(); // Let DataTables add the child row. But it's still collapsed.
                fillStudyLinksSetup(studyLinksSetupData, studyLinksSetupDiv);
                tr.next().addClass('info').find("td:first").addClass("p-0");
                const collapseElement = row.child().find(".collapse");
                new bootstrap.Collapse(collapseElement).show();
                Helpers.setButtonWidthToMax(".study-links-setup-item .worker-results-button");
                Helpers.setButtonWidthToMax(".study-links-setup-item .study-links-manager");
                Helpers.activateTooltips(collapseElement);
            }).fail(function(err) {
                Alerts.error("Couldn't load study links setup.");
            }).always(WaitingModal.hide);
        }
    });

    function fillStudyLinksSetup(studyLinksSetupData, studyLinksSetupDiv) {
        setAllowedWorkerTypes(studyLinksSetupDiv, studyLinksSetupData.allowedWorkerTypes);

        renderStudyLinksManagerButton("PersonalSingle", studyLinksSetupData.personalSingleLinkCount, studyLinksSetupDiv);
        renderStudyLinksManagerButton("PersonalMultiple", studyLinksSetupData.personalMultipleLinkCount, studyLinksSetupDiv);

        renderResultsButton("PersonalSingle", studyLinksSetupData.studyResultCountsPerWorker.PersonalSingle, studyLinksSetupDiv);
        renderResultsButton("PersonalMultiple", studyLinksSetupData.studyResultCountsPerWorker.PersonalMultiple, studyLinksSetupDiv);
        renderResultsButton("GeneralSingle", studyLinksSetupData.studyResultCountsPerWorker.GeneralSingle, studyLinksSetupDiv);
        renderResultsButton("GeneralMultiple", studyLinksSetupData.studyResultCountsPerWorker.GeneralMultiple, studyLinksSetupDiv);
        renderResultsButton("MT", studyLinksSetupData.studyResultCountsPerWorker.MT, studyLinksSetupDiv);
    }

    function renderStudyLinksManagerButton(type, count, studyLinksSetupDiv) {
        $(studyLinksSetupDiv).find(`.study-links-setup[data-type="${type}"] .study-links-badge`).text(count);
        const tooltip = count > 0
                ? `${count} study link(s) belong to this type so far. Click here to manage them (show existing or add new study links).`
                : "This type has no study links yet. Click here to add and manage study links for this type.";
        $(studyLinksSetupDiv).find(`.study-links-setup[data-type="${type}"] .study-links-manager`).attr("data-bs-tooltip", tooltip);
    }

    function renderResultsButton(type, count, studyLinksSetupDiv) {
        $(studyLinksSetupDiv).find(`.study-links-setup[data-type="${type}"] .worker-results-badge`).text(count);
        const tooltip = count > 0
                ? `This type has ${count} result(s) so far. Click here to go to a result page that only shows the study results of this type.`
                : "This type has no results yet.";
        $(studyLinksSetupDiv).find(`.study-links-setup[data-type="${type}"] .worker-results-button`).attr("data-bs-tooltip", tooltip);
    }

    function setAllowedWorkerTypes(studyLinksSetupDiv, allowedWorkerTypes) {
        // First clear all allowed types
        $(studyLinksSetupDiv).find(".active-type").each(function(index) {
            $(this).prop('checked', false);
        });
        // Now set the allowed ones
        $.each(allowedWorkerTypes, function(index, type) {
            $(studyLinksSetupDiv).find(`.study-links-setup[data-type="${type}"] .active-type`).prop('checked', true);
        });
    }

    $('#batchTable').on('click', '.active-type', function(e) {
        e.preventDefault();
        const checkbox = this;
        const workerType = $(checkbox).parents(".study-links-setup").data("type");
        const allow = $(checkbox).is(':checked');
        const batch = Helpers.getDataFromDataTableRow($("#batchTable").DataTable(), checkbox);
        const studyLinksSetupDiv = $(checkbox).closest('.study-links-setup-item');
        $.ajax({
            url: window.routes.StudyLinks.toggleAllowedWorkerType(window.study.id, batch.id, workerType, allow),
            type : "POST",
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            success: function(allowedWorkerTypes) {
                batch.allowedWorkerTypes = allowedWorkerTypes;
                setAllowedWorkerTypes(studyLinksSetupDiv, allowedWorkerTypes);
            },
            error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't change type activation.")
        });
    });

    $('#batchTable').on('click', '.worker-results-button', function() {
        const batch = Helpers.getDataFromDataTableRow($("#batchTable").DataTable(), this);
        const type = $(this).parents(".study-links-setup").data("type");
        window.location.href = window.routes.StudyResults.batchesStudyResultsForType(window.study.id, batch.id, type);
    });

    // Handles clicks on the study link button of the general types
    $('#batchTable').on('click', '.study-link-button', function() {
        const batch = Helpers.getDataFromDataTableRow($("#batchTable").DataTable(), this);
        const type = $(this).parents(".study-links-setup").data("type");
        $('#singleStudyLinkDisplayModal').data('batch', batch);
        $('#singleStudyLinkDisplayModal').data('type', type);
        $('#singleStudyLinkDisplayModal').modal('show');
    });

    $("#singleStudyLinkDisplayModal").on('show.bs.modal', function() {
        const batch = $('#singleStudyLinkDisplayModal').data('batch');
        const type = $('#singleStudyLinkDisplayModal').data('type');
        $.ajax({
            url: window.routes.Api.getStudyCodes(window.study.id, batch.id, type, "", 1),
            success: (response) => renderSingleStudyLinkDisplayModal(response.data, batch, type),
            error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't get study code")
        });
    });

    function renderSingleStudyLinkDisplayModal(studyCode, batch, type) {
        const studyLinksToggle = new StudyLinks.LinksWithToggle();
        const typeUI = Helpers.getWorkerTypeUIName(type);
        Helpers.generateModalSubtitles("#singleStudyLinkDisplayModal", {"Batch": batch.title, "Type": typeUI});
        studyLinksToggle.renderToggle("#singleStudyLinkDisplayStudyLinksToggle", "#singleStudyLinkDisplayStudyLink", "mb-1");
        $("#singleStudyLinkDisplayStudyLink").empty();
        studyLinksToggle.renderLinks(studyCode, "#singleStudyLinkDisplayStudyLink");
        $('#singleStudyLinkDisplayModal').modal('show');

        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.`);
        }
    }

    $('#batchTable').on('click', '.mt-source-code', function() {
        const batch = Helpers.getDataFromDataTableRow($("#batchTable").DataTable(), this);
        $('#mtSourceCodeModal').data('batch', batch);
        $("#mtSourceCodeModal").modal('show');
    });
</script>