@(study: common.Study)

@* Components Table *@
<table class="table table-hover align-middle w-100" id="componentsTable">
    <thead>
    <tr>
        <th class="no-info-icon text-nowrap" data-bs-tooltip="The number in the button shows the position in this study - Use the button to drag and drop the component to a new position"><i class="bi-arrow-down-up ps-2"></i><span class="info-icon"></span></th>
        <th class="no-info-icon" data-bs-tooltip="Activate or deactivate components. Inactive components will not show up in study runs.">Active<span class="info-icon"></span></th>
        <th class="no-info-icon" data-bs-tooltip="ID of this component">ID<span class="info-icon"></span></th>
        <th class="no-info-icon" data-bs-tooltip="Title of this component">Title<span class="info-icon"></span></th>
        <th class="no-info-icon text-nowrap" data-bs-tooltip="Path to the component's HTML file. It is located within the study assets directory.">HTML file<span class="info-icon"></span></th>
        <th></th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

@* Template for button toolbar in Component's row *@
<div id="componentToolbarTemplate" class="d-none">
    <div class="float-end text-nowrap">
        <div class="btn-group no-info-icon" role="group" data-bs-tooltip="Do a single test run only of this component or run the same component multiple times in parallel">
            <a class="run-component btn btn-component" href="#" type="button">
                <i class="bi-play-circle"></i><span class="d-none d-lg-inline ps-1">Run</span>
            </a>
            <button class="btn btn-component dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" data-bs-popper-config='{"strategy":"fixed"}'>
                <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-component">
                <li class="no-info-icon" data-bs-tooltip="Run 2 components in parallel">
                    <a class="run-component-2x1 dropdown-item" href="#"><i class="bi-play-circle pe-1"></i>Run 2x1</a>
                </li>
                <li class="no-info-icon" data-bs-tooltip="Run 3 components in parallel">
                    <a class="run-component-3x1 dropdown-item" href="#"><i class="bi-play-circle pe-1"></i>Run 3x1</a>
                </li>
                <li class="no-info-icon" data-bs-tooltip="Run 4 components in parallel">
                    <a class="run-component-2x2 dropdown-item" href="#"><i class="bi-play-circle pe-1"></i>Run 2x2</a>
                </li>
                <li class="no-info-icon" data-bs-tooltip="Run 6 components in parallel">
                    <a class="run-component-3x2 dropdown-item" href="#"><i class="bi-play-circle pe-1"></i>Run 3x2</a>
                </li>
                <li class="no-info-icon" data-bs-tooltip="Run 8 components in parallel">
                    <a class="run-component-4x2 dropdown-item" href="#"><i class="bi-play-circle pe-1"></i>Run 4x2</a>
                </li>
                <li class="no-info-icon" data-bs-tooltip="Run 9 components in parallel">
                    <a class="run-component-3x3 dropdown-item" href="#"><i class="bi-play-circle pe-1"></i>Run 3x3</a>
                </li>
            </ul>
        </div>
        <button class="component-results btn btn-component" type="button" data-bs-tooltip="Show the results only of this component">
            <span class="d-none d-lg-inline">Component </span>Results<span class="badge text-component bg-white rounded-pill ms-1"></span>
        </button>
        <button class="component-properties btn btn-component" type="button" data-bs-tooltip="Change this component's properties">
            <i class="bi-gear-fill"></i><span class="d-none d-lg-inline ps-1">Properties</span>
        </button>
        <div class="btn-group" role="group">
            <button class="btn btn-component dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-popper-config='{"strategy":"fixed"}'>
                <i class="bi-three-dots-vertical d-lg-none"></i><span class="d-none d-lg-inline ps-1">More</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-component">
                <li class="no-info-icon" data-bs-tooltip="Clone this component without its results and assets">
                    <a class="dropdown-item clone-component" href="#"><i class="bi-copy pe-1"></i>Clone</a>
                </li>
                <li><hr class="dropdown-divider"></li>
                <li class="no-info-icon" data-bs-tooltip="Deletes this component without its results and assets">
                    <a class="dropdown-item remove-component" href="#"><i class="bi-x-circle-fill pe-1"></i>Delete</a>
                </li>
            </ul>
        </div>
    </div>
</div>

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

    let componentsTable;
    $(document).ready(function() {
        // Don't remove pageLength - default is only 10 and it would display only 10 components
        componentsTable = $('#componentsTable').DataTable({
            "ajax": {
                "url" : window.routes.Studies.tableDataByStudy(window.study.id),
                error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Cannot read component data.")
            },
            "pageLength": 100,
            "dom": 't',
            "scrollX": true,
            "columnDefs": [
                {
                    "searchable": false,
                    "orderable": false,
                    "targets": "_all"
                }
            ],
            "columns": [
                {
                    "data": "position",
                    "render": function (data, type, full, meta) {
                        return `<button type="button" class="btn btn-component drag-button" data-bs-tooltip="Use this button to drag and drop this component to a new position">${data}</button>`;
                    }
                },
                {
                    "className": 'component-active',
                    "data": "active",
                    "render": function (data, type, full, meta) {
                        return `
                            <label class="switch no-info-icon" data-bs-tooltip="Use this switch to de-/activate this component. Inactive components will not show up in study runs.">
                                <input type="checkbox" ${data ? "checked" : ""}>
                                <span class="slider slider-component round"></span>
                            </label>`;
                    }
                },
                {
                    "data": "id",
                },
                {
                    "className": "text-wrap",
                    "data": "title",
                    "render": function (data, type, full, meta) {
                        return `<span class="no-info-icon" data-bs-tooltip="${data}">${data}</span>`;
                    }
                },
                {
                    "className": "text-wrap text-break",
                    "data": "htmlFilePath",
                    "render": f => f ? f : '<span class="text-body text-opacity-50">not specified yet</span>'
                },
                {
                    "data": null,
                    "render": function (data, type, full, meta) {
                        const toolbar = $('#componentToolbarTemplate').clone();
                        $(toolbar).find('.component-results .badge').text(data.resultCount);
                        const tooltip = data.resultCount > 0
                                ? `This component has ${data.resultCount} component result(s) so far. Click here to go to this component's result page.`
                                : "This component has no component results yet.";
                        $(toolbar).find('.component-results').attr("data-bs-tooltip", tooltip);
                        return toolbar.html();
                    }
                }
            ],
            "language": {
                "emptyTable": "No components yet - click on 'New Component' to add a new component"
            },
            rowReorder: {
                "dataSrc": "position"
            },
            "drawCallback": function( settings ) {
                Helpers.setButtonWidthToMax("#componentsTable_wrapper button.drag-button");
                Helpers.activateTooltips('#componentsTable_wrapper');
                $("#componentsTable [class^='run-component']").each(function() {
                    // Set href for each component "Run" button
                    const componentId = getComponentId(this);
                    const run = (frames, hSplit, vSplit) => $(this).prop("href", `${window.routes.Components.runComponent(window.study.id, componentId, frames, hSplit, vSplit)}`);
                    if ($(this).hasClass("run-component")) run(1);
                    if ($(this).hasClass("run-component-2x1")) run(2, 2, 1);
                    if ($(this).hasClass("run-component-3x1")) run(3, 3, 1);
                    if ($(this).hasClass("run-component-2x2")) run(4, 2, 2);
                    if ($(this).hasClass("run-component-3x2")) run(6, 3, 2);
                    if ($(this).hasClass("run-component-4x2")) run(8, 4, 2);
                    if ($(this).hasClass("run-component-3x3")) run(9, 3, 3);
                });
            }
        });

        // Adjust the width of every component's drag button and toolbar to the widest one
        componentsTable.on('column-sizing.dt', function (e, settings) {
            // Newly created components of an empty study have a negative width (no
            // clue why) - so set the width only if I have at least 2 components
            if ($("button.component-results").length > 1) {
                Helpers.setButtonWidthToMax("button.component-results");
                Helpers.setButtonWidthToMax("button.drag-button");
            }
        });

        componentsTable.on('row-reordered', function (e, details, edit) {
            const cid = edit.triggerRow.data().id;
            const np = edit.triggerRow.data().position;
            $.ajax({
                url: window.routes.Studies.changeComponentOrder(window.study.id, cid, np),
                type: "POST",
                headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
                success: () => componentsTable.ajax.reload(),
                error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't change component order")
            });
        });
    });

    $('#componentsTable').on('click', '.clone-component', function() {
        $.ajax({
            type: 'GET',
            url: window.routes.Components.cloneComponent(window.study.id, getComponentId(this)),
            success: function(result) {
                Alerts.showList(JSON.parse(result));
                Alerts.success(`The component was cloned successfully.`);
                componentsTable.ajax.reload();
            },
            error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't clone component")
        });
    });

    $('#componentsTable').on('click', '.remove-component', function() {
        const element = this;
        const componentId = getComponentId(this);
        const componentTitle = getComponentTitle(this);
        const title = "Confirm deletion of a component";
        const htmlText = `
            <p>You are about to delete the component "<b>${componentTitle}</b>" (ID ${componentId}) <b>with all its results</b>.</p>
            <p><b class="text-danger">This cannot be undone.</b></p>`;
        const action = function() {
            $.ajax({
                url : window.routes.Components.remove(window.study.id, componentId),
                type : 'DELETE',
                headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
                beforeSend: WaitingModal.show,
                success : function(result) {
                    Alerts.showList(JSON.parse(result));
                    componentsTable.ajax.reload();
                },
                error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't delete component"),
                complete: WaitingModal.hide
            });
        };
        ConfirmationModal.show({ title: title, text: htmlText, btnText: 'Delete', safetyCheck: true, action: action });
    });

    $('#componentsTable').on('click', '.component-results', function(e) {
        const componentId = getComponentId(this);
        window.location.href = window.routes.ComponentResults.componentResults(window.study.id, componentId);
    });

    $('#componentsTable').on('click', '.component-active input', function(e) {
        e.preventDefault();
        const checkbox = this;
        const cid = getComponentId(checkbox);
        const active = $(checkbox).is(':checked');
        $.ajax({
            url : window.routes.Api.updateComponent(cid),
            type: "PATCH",
            contentType: "application/json",
            data: JSON.stringify({ "active": active }),
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            success: function() {
                $(checkbox).prop('checked', active);
            },
            error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't toggle component activation")
        });
    });

    function getComponentId(element) {
        const tr = $(element).closest('tr');
        const rowData = componentsTable.row(tr).data();
        return rowData.id;
    }

    function getComponentTitle(element) {
        const tr = $(element).closest('tr');
        const rowData = componentsTable.row(tr).data();
        return rowData.title;
    }
</script>