@*
* Study link creator is the Modal that handles the creation of new study links of the single link types.
* It allows you to add an arbitrary number of links and add a comment.
*@

@* Study links creator Modal for the single link types *@
<div class="modal fade" id="studyLinksCreatorModal" tabindex="-1" data-bs-config='{"backdrop":"static", "focus":true, "keyboard":false}'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header align-items-start">
                <h5 class="modal-title text-truncate flex-grow-1">Add study links</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="studyLinksCreatorForm">
                    <div class="row mb-2">
                        <label class="col-sm-3 col-form-label" for="studyLinksCreatorComment" data-bs-tooltip="Use the comment to distinguish the links from others.">
                            Comment
                        </label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="studyLinksCreatorComment" name="comment" placeholder="Your comment">
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-sm-3 col-form-label" for="studyLinksCreatorAmount" data-bs-tooltip="Enter the number of links you want to add.">
                            Amount
                        </label>
                        <div class="col-sm-5 col-md-3">
                            <input type="number" min="1" max="100" value="1" class="form-control" id="studyLinksCreatorAmount" name="amount">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-batch" id="studyLinksCreatorConfirmed">Add</button>
            </div>
        </div>
    </div>
</div>

@* Study links display Modal for the single link types*@
<div class="modal fade" id="studyLinksDisplayModal" 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">New study links</h5>
                <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="studyLinksDisplayStudyLinksToggle"></div>
                <div class="card">
                    <span class="btn-clipboard btn-clipboard-top-right no-info-icon" data-bs-tooltip="Copy to clipboard"></span>
                    <div class="card-body" id="studyLinksDisplayStudyLinks"></div>
                </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 FormValidation from "@routes.Assets.versioned("lib/jatos-gui/javascripts/formValidation.js")";
    import * as CopyToClipboard from "@routes.Assets.versioned("lib/jatos-gui/javascripts/copyToClipboard.js")";
    import * as StudyLinks from "@routes.Assets.versioned("lib/jatos-gui/javascripts/studyLinks.js")";

    const alerts = new Alerts.Named("study-links-creator");
    $("#studyLinksCreatorModal, #studyLinksDisplayModal").on('hide.bs.modal', alerts.hideAll);

    const studyLinksToggle = new StudyLinks.LinksWithToggle();

    $("#studyLinksCreatorModal").on('show.bs.modal', function() {
        $("#studyLinksCreatorForm")[0].reset();
        FormValidation.clear("#studyLinksCreatorForm");

        const batch = $('#studyLinksCreatorModal').data('batch');
        const type = $('#studyLinksCreatorModal').data('type');
        const typeUI = Helpers.getWorkerTypeUIName(type);
        Helpers.generateModalSubtitles("#studyLinksCreatorModal", {"Batch": batch.title, "Type": typeUI});
    });

    $("#studyLinksCreatorConfirmed").click(function(event) {
        const batch = $('#studyLinksCreatorModal').data('batch');
        const type = $('#studyLinksCreatorModal').data('type');
        const comment = $('#studyLinksCreatorComment').val();
        const amount = $('#studyLinksCreatorAmount').val();
        $.ajax({
            url: window.routes.Api.getStudyCodes(window.study.id, batch.id, type, encodeURIComponent(comment), amount),
            success: (res) => {
                // In case we have an open study links manager Modal reload its DataTable
                if ($("#studyLinksManagerModal").hasClass('show')) $('#studyLinksManagerTable').DataTable().ajax.reload();
                $('#studyLinksCreatorModal')
                    .modal('hide')
                    .one('hidden.bs.modal', () => showStudyLinksDisplayModal(res.data, batch, type, comment));
            },
            error: (err) => {
                const message = err?.responseJSON?.error?.message ?? "Couldn't get study codes";
                alerts.error(message);
            }
        });
    });

    function showStudyLinksDisplayModal(studyCodes, batch, type, comment) {
        const typeUI = Helpers.getWorkerTypeUIName(type);
        comment = comment ? comment : "none";
        Helpers.generateModalSubtitles("#studyLinksDisplayModal", {"Batch": batch.title, "Type": typeUI, "Comment": comment});

        studyLinksToggle.renderToggle("#studyLinksDisplayStudyLinksToggle", "#studyLinksDisplayStudyLinks", "mb-1");
        $("#studyLinksDisplayStudyLinks").empty();
        studyLinksToggle.renderLinks(studyCodes, "#studyLinksDisplayStudyLinks");

        $('#studyLinksDisplayModal').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.`);
        }
    }

</script>