@* Study import confirmation Modal *@
<div class="modal fade" id="confirmStudyImportModal" 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">Study exists already</h5>
                <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="confirmStudyImportDescription"></div>
                <button class="btn btn-outline-secondary dropdown-toggle collapsed" id="confirmStudyImportDetailsButton" type="button" data-bs-toggle="collapse" data-bs-target="#confirmStudyImportDetails">Details</button>
                <div class="pt-3 collapse" id="confirmStudyImportDetails" >
                    <div class="form-check">
                        <label class="form-check-label" for="confirmStudyImportProperties">Overwrite study</label>
                        <input type="checkbox" class="form-check-input" id="confirmStudyImportProperties">
                        <div class="form-text">Components included in the imported study will be added or updated. Components not included in the imported study will be inactivated but not deleted.</div>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label" for="confirmStudyImportDir">Overwrite study assets directory</label>
                        <input type="checkbox" class="form-check-input" id="confirmStudyImportDir">
                        <div class="form-text">This directory contains the study's files like HTML, CSS, and JavaScript files and images.</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-study" id="confirmStudyImportConfirmed">Overwrite</button>
            </div>
        </div>
    </div>
</div>

<script @{helper.CSPNonce.attr} type="module">
    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 ConfirmationModal from "@routes.Assets.versioned("lib/jatos-gui/javascripts/confirmationModal.js")";
    import * as InfoCard from "@routes.Assets.versioned("lib/jatos-gui/javascripts/infoCard.js")";

    const alerts = new Alerts.Named("study-import");

    $('#importStudy').click(function() {
        $('#importStudyBrowser').trigger("click");
    });

    $('#importStudyBrowser').on('change', function() {
        const data = new FormData();
        const files = $('#importStudyBrowser').prop('files');
        $.each(files , function(index, value){
            data.append('study', value);
        });
        $.ajax({
            url: window.routes.ImportExport.importStudy,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            beforeSend: WaitingModal.show,
            success: function(response) {
                importStudyConfirm(response);
            },
            error : function(err) {
                const errMsg = err.responseText ? err.responseText : "Something went wrong during study import";
                alerts.error(errMsg);
            },
            complete: function() {
                WaitingModal.hide();
                $("#importStudyBrowser")[0].value = '';
            }
        });
    });

    function importStudyConfirm(response) {
        if (response.studyExists && response.uploadedDirExists && response.uploadedDirName == response.currentDirName) {
            // 1) study exists  -  udir exists - udir == cdir : ask confirmation to overwrite study and/or dir
            askConfirmationForStudyExists(response.uploadedStudyTitle, response.uuid, response.uploadedDirName);
        } else if (response.studyExists && response.uploadedDirExists && response.uploadedDirName != response.currentDirName) {
            // 2) study exists  -  udir exists - udir != cdir : ask confirmation to overwrite study and/or (dir && rename to cdir)
            askConfirmationForStudyExistsAndRenameDir(response.uploadedStudyTitle, response.uuid, response.uploadedDirName, response.currentDirName);
        } else if (response.studyExists && !response.uploadedDirExists) {
            // 3) study exists  - !udir exists : can only happen if someone deleted/renamed the study's folder - ask confirmation to overwrite study
            askConfirmationForStudyExistsDirNotExists(response.uploadedStudyTitle, response.uuid, response.uploadedDirName, response.currentDirName)
        } else if (!response.studyExists && response.uploadedDirExists) {
            // 4) !study exists -  udir exists : ask to rename dir (generate new dir name)
            askConfirmationForStudyNotExistsDirExists(response.uploadedStudyTitle, response.uuid, response.uploadedDirName, response.newDirName);
        } else if (!response.studyExists && !response.uploadedDirExists) {
            // 5) !study exists - !udir exists : write both
            askConfirmationForStudyNotExistsDirNotExists(response.uploadedStudyTitle, response.uuid, response.uploadedDirName);
        }
    }

    function askConfirmationForStudyExists(uploadedStudyTitle, uuid, uploadedDirName) {
        const infoCard = getStudyInfoCard(uploadedStudyTitle, uuid, uploadedDirName);
        const description = `
            <p>You are about to import the study:</p>
            ${infoCard}
            <p>But a study with this UUID and this study assets directory already exists in this JATOS.</p>
            <p>What do you want to do?</p>`;
        $('#confirmStudyImportDescription').html(description);
        $('#confirmStudyImportDetailsButton').addClass('collapsed');
        $('#confirmStudyImportDetails').removeClass('show');
        $('#confirmStudyImportProperties').prop('checked', true);
        $('#confirmStudyImportDir').prop('checked', true);
        $('#confirmStudyImportModalConfirmed').attr("disabled", false);
        $('#confirmStudyImportModal').modal('show');

        $('#confirmStudyImportConfirmed').one('click.confirm', function() {
            $('#confirmStudyImportModal').modal('hide');
            const propertiesConfirm = $('#confirmStudyImportProperties').is(':checked');
            const dirConfirm = $('#confirmStudyImportDir').is(':checked');
            // Keep the current study assets dir name if the properties aren't overwritten
            postStudyImportConfirm({
                "keepProperties": !propertiesConfirm,
                "keepAssets": !dirConfirm,
                "keepCurrentAssetsName": !propertiesConfirm
            });
        });
    }

    function askConfirmationForStudyExistsAndRenameDir(uploadedStudyTitle, uuid, uploadedDirName, currentDirName) {
        const infoCard = getStudyInfoCard(uploadedStudyTitle, uuid, uploadedDirName);
        const description = `
            <p>You are about to import the study:</p>
            ${infoCard}
            <p>
                But it seems a study with this UUID already exists in this JATOS.
            </p>
            <p>
                Additionally the assets directory of the imported study is named "${uploadedDirName}"
                - but the directory name of the currently installed one is "${currentDirName}". Usually, in this case,
                the directory is renamed to the imported version, but unfortunately this one already
                exists and belongs to another study.
            </p>
            <p>If you agree, the <b>current directory name will be kept</b>. What do you want to do?</p>`;
        $('#confirmStudyImportDescription').html(description);
        $('#confirmStudyImportDetailsButton').addClass('collapsed');
        $('#confirmStudyImportDetails').removeClass('show');
        $('#confirmStudyImportProperties').prop('checked', true);
        $('#confirmStudyImportDir').prop('checked', true);
        $('#confirmStudyImportModalConfirmed').attr("disabled", false);
        $('#confirmStudyImportModal').modal('show');

        $('#confirmStudyImportConfirmed').one('click.confirm', function() {
            $('#confirmStudyImportModal').modal('hide');
            const propertiesConfirm = $('#confirmStudyImportProperties').is(':checked');
            const dirConfirm = $('#confirmStudyImportDir').is(':checked');
            postStudyImportConfirm({
                "keepProperties": !propertiesConfirm,
                "keepAssets": !dirConfirm,
                "keepCurrentAssetsName": dirConfirm
            });
        });
    }

    function askConfirmationForStudyExistsDirNotExists(uploadedStudyTitle, uuid, uploadedDirName, currentDirName) {
        const title = 'Study import';
        const infoCard = getStudyInfoCard(uploadedStudyTitle, uuid, uploadedDirName);
        const htmlText = `
            <p>You are about to import the study:</p>
            ${infoCard}
            <p>A study with this UUID already exists in this JATOS.</p>
            <p>
                But currently the study doesn't seem to have a study assets directory associated with it. The directory's
                name was "${currentDirName}" but it doesn't exist on the disk any more. Maybe someone changed its name or deleted it?
            </p>
            <p>If you continue the uploaded study assets directory will be used instead of the non-existing current one.</p>
            <p>Do you want to proceed?</p>`;
        const action = () => postStudyImportConfirm({ keepProperties: false, keepAssets : false, renameAssets: true });
        ConfirmationModal.show({ title: title, text: htmlText, btnClass: "btn-study", btnText: 'Import', action: action });
    }

    function askConfirmationForStudyNotExistsDirExists(uploadedStudyTitle, uuid, uploadedDirName, newDirName) {
        const title = 'Study import';
        const infoCard = getStudyInfoCard(uploadedStudyTitle, uuid, uploadedDirName);
        const htmlText = `
            <p>You are about to import the study:</p>
            ${infoCard}
            <p>
                Unfortunately, a study assets directory with this name already exists in this JATOS. If you proceed,
                the study assets directory of your uploaded study will be renamed to "${newDirName}".
            </p>
            <p>Do you want to proceed?</p>`;
        const action = () => postStudyImportConfirm({ keepProperties: false, keepAssets : false, renameAssets: true });
        ConfirmationModal.show({ title: title, text: htmlText, btnClass: "btn-study", btnText: 'Import', action: action });
    }

    function askConfirmationForStudyNotExistsDirNotExists(uploadedStudyTitle, uuid, uploadedDirName) {
        const title = "Study import";
        const infoCard = getStudyInfoCard(uploadedStudyTitle, uuid, uploadedDirName);
        const htmlText = `
            <p>You are about to import the study:</p>
            ${infoCard}
            <p>Do you want to proceed?</p>`;
        const action = () => postStudyImportConfirm({ keepProperties: false, keepAssets : false, renameAssets: false });
        ConfirmationModal.show({ title: title, text: htmlText, btnClass: "btn-study", btnText: "Import", action: action });
    }

    function getStudyInfoCard(title, uuid, dirName) {
        return InfoCard.render([
            {"name": "Study title", "value": title},
            {"name": "Study UUID", "value": uuid, "tooltip": "Universally unique identifier - used to keep track of studies between different JATOS instances"},
            {"name": "Study assets", "value": dirName, "tooltip": "Name of the directory that is linked to this study. In there all your study's assets, e.g. HTML, JavaScript, CSS, and images, will be saved."}
        ]);
    }

    function postStudyImportConfirm({keepProperties, keepAssets, keepCurrentAssetsName, renameAssets}) {
        $.ajax({
            type: 'POST',
            url: window.routes.ImportExport.importStudyConfirmed,
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            contentType: "application/json; charset=utf-8",
            dataType: 'text',
            data: JSON.stringify({
                    "keepProperties": keepProperties,
                    "keepAssets": keepAssets,
                    "keepCurrentAssetsName": keepCurrentAssetsName,
                    "renameAssets": renameAssets}),
            success: function(studyId) {
                window.location.href = window.routes.Studies.study(studyId);
            },
            error: (err) => err.responseText ? alerts.error(err.responseText) : alerts.error("Something went wrong during study import")
        });
    }

    // If no checkbox is checked deactivate confirm button
    $('#confirmStudyImportModal').on('click', 'input[type=checkbox]', function() {
        if (!$('#confirmStudyImportProperties').is(':checked') && !$('#confirmStudyImportDir').is(':checked')) {
            $('#confirmStudyImportConfirmed').attr("disabled", true);
        } else {
            $('#confirmStudyImportConfirmed').attr("disabled", false);
        }
    });

    $("#confirmStudyImportModal").on('hide.bs.modal', alerts.hideAll);

</script>