{#
/**
 * Copyright (C) 2020 Xibo Signage Ltd
 *
 * Xibo - Digital Signage - http://www.xibo.org.uk
 *
 * This file is part of Xibo.
 *
 * Xibo is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.
 *
 * Xibo is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
 */
#}

<script type="text/javascript">
    function reloadLayoutDesignerData() {
        // Reload layout designer data and show the target action tab
        if(lD != undefined) {
            lD.reloadData(lD.layout);
            lD.propertiesPanel.openTabOnRender = 'a[href="#actionTab"]';

            if(lD.selectedObject.type == 'layout') {
                lD.selectObject();
            } else {
                lD.selectObject($('#' + lD.selectedObject.id), true);
            }
        }
    }

    function actionFormOpen(dialog) {
        onTargetChange(dialog);

        $(dialog).find("#target").on('change', function () {
            onTargetChange(dialog);
        });

        onActionTypeChange(dialog);

        $(dialog).find("#actionType").on('change', function () {
            onActionTypeChange(dialog);
        });

        onTriggerChange(dialog);
        $(dialog).find("#triggerType").on('change', function() {
            onTriggerChange(dialog);
        })

        onTargetWidgetChange(dialog);
        $(dialog).find("#widgetId, #actionType, #target").on('change', function() {
            onTargetWidgetChange(dialog);
        })

        // On modal close, reload layout designer data
        $(dialog).on('hidden.bs.modal', reloadLayoutDesignerData);
    }

    function actionFormDeleteOpen(dialog) {
        // On confirm deletion, reload layout designer data
        $(dialog).find('.save-button').on('click', reloadLayoutDesignerData);
    }

    function onTargetChange(dialog) {
        var target = $(dialog).find("#target").val();
        var targetId = $(dialog).find(".targetid-control");

        if (target === 'region') {
            targetId.removeClass("d-none");
            targetId.find('select').removeAttr('disabled');
            targetId.find('input[type="hidden"').remove();
            
        } else {
            $('#targetId').val('');
            targetId.addClass("d-none");
        }
    }

    function onActionTypeChange(dialog) {
        var actionType = $(dialog).find('#actionType').val();

        var navLayout = $(dialog).find(".nav-control-layout");
        var navWidget = $(dialog).find(".nav-control-widget");
        var target = $(dialog).find(".target-control");

        if (actionType === 'navLayout') {
            // nav Layout, hide Widget and Target dropdowns and clear corresponding values
            navLayout.removeClass("d-none");
            navWidget.addClass("d-none");
            $("#target").val("screen").change();
            target.addClass("d-none");
            $('#widgetId').val('');
            $('#targetId').val('');
        } else if (actionType === 'navWidget') {
            // nav Widget, hide LayoutCode and clear its value
            navLayout.addClass("d-none");
            navWidget.removeClass("d-none");
            target.removeClass("d-none");
            $('#layoutCode').val('');
        } else {
            // not in nav Action Type, clear values, hide
            navLayout.addClass("d-none");
            navWidget.addClass("d-none");
            target.removeClass("d-none");
            $('#widgetId').val('');
            $('#layoutCode').val('');
        }
    }

    function onTriggerChange(dialog) {
        var triggerType = $(dialog).find("#triggerType").val();
        var triggerCode = $(dialog).find(".trigger-code-control");

        if (triggerType === 'webhook') {
            triggerCode.removeClass('d-none');
        } else {
            triggerCode.addClass('d-none');
            $('#triggerCode').val('');
        }
    }

    function onTargetWidgetChange(dialog) {
        var actionType = $(dialog).find('#actionType').val();
        var target = $(dialog).find("#target").val();
        var widgetId = $(dialog).find("#widgetId").val();
        var $targetId = $(dialog).find('#targetId');
        var $targetIdContainer = $(dialog).find('#targetId');

        // Remove warning card
        $(dialog).find('.nav-control-widget .card.text-danger').remove();
        
        if (actionType === 'navWidget' && target == 'region' && widgetId != undefined) {
            // Set target value to empty
            $targetId.val('');

            // Disable target region ( since we are setting it programmatically )
            $targetId.attr('disabled', 'disabled');
            
            // Remove previous temporary element if exists
            $targetIdContainer.find('input[type="hidden"').remove();

            if(widgetId == '') {
                return true;
            }

            // Get layout designer element
            var widget = lD.getElementByTypeAndId('widget', 'widget_' + lD.layout.drawer.regionId + '_' + widgetId, 'drawer');
            var widgetTargetRegion = widget.targetRegionId;

            if(widgetTargetRegion == undefined) {
                // Show warning to select a target region in the drawer
                $(dialog).find('.nav-control-widget').append($('<div class="card bg-light p-2 text-danger offset-sm-2 col-sm-10 text-center form-error">{{ "Select a target region for this widget in the layout designer drawer!"|trans }}</div>'));
            } else {
                if($targetId.find('option[value="' + widgetTargetRegion + '"]').length > 0) {
                    // Change the target value to the target region for the selected widget
                    $targetId.val(widgetTargetRegion);
                } else {
                    console.error('{{ "Something went wrong: target region is not available in the current layout"|trans }}');
                }
            }

            // Create a temporary input to submit the disabled select value
            $targetIdContainer.append('<input type="hidden" name="' + $targetId.attr('name')  + '" value="' + $targetId.val() + '" />');
        } else {
            // Call onTargetChange again to check if we need to reshow the region target
            onTargetChange(dialog);
        }
    }

    function showActionsGrid(source, sourceId) {
        // create the table only when we are on Action tab
        $('.nav-tabs a').on('shown.bs.tab', function(event) {
            if ($(event.target).hasClass('action-tab')) {
                // Expose the button
                $('.action-button-add').removeClass("d-none");

                // initialize the table only if it's not already initialized
                if (!$.fn.DataTable.isDataTable('#actions')) {
                    // Configure the DataTable
                    var table = $("#actions").DataTable({
                        "language": dataTablesLanguage,
                        serverSide: true,
                        stateSave: true,
                        stateDuration: 0,
                        "filter": false,
                        searchDelay: 3000,
                        "order": [[0, "asc"]],
                        ajax: {
                            url: "{{ url_for("action.search") }}",
                            "data": function (d) {
                                $.extend(d, {
                                    "source": source,
                                    "sourceId": sourceId
                                });
                            }
                        },
                        "columns": [
                            {"data": "actionId", "visible": false},
                            {"data": "ownerId", "visible": false},
                            {
                                "data": "triggerType",
                                "render": function(data, type, row, meta) {
                                    if (type === "display") {
                                        if (data === "touch") {
                                            return "{{ "Touch/Click"|trans }}";
                                        } else if (data === "webhook") {
                                            return "{{ "Web hook"|trans }}"
                                        } else {
                                            return data;
                                        }
                                    } else {
                                        return data;
                                    }
                                }
                            },
                            {"data": "triggerCode", "visible": false},
                            {
                                "data": "actionType",
                                "render": function(data, type, row, meta) {
                                    if (type === "display") {
                                        if (data === "next") {
                                            return "{{ "Next"|trans }}";
                                        } else if (data === "previous") {
                                            return "{{ "Previous"|trans }}"
                                        } else if (data === "navLayout") {
                                            return "{{ "Navigate to Layout"|trans }}"
                                        } else if (data === "navWidget") {
                                            return "{{ "Navigate to Widget"|trans }}"
                                        } else {
                                            return data;
                                        }
                                    } else {
                                        return data;
                                    }
                                }
                            },
                            {
                                "data": "target",
                                "render": function(data, type, row, meta) {
                                    if (type === "display") {
                                        if (data === "region") {
                                            return "{{ "Region"|trans }}";
                                        } else if (data === "screen") {
                                            return "{{ "Screen"|trans }}"
                                        } else {
                                            return data;
                                        }
                                    } else {
                                        return data;
                                    }
                                }
                            },
                            {
                                "data": "targetId",
                                "render": function(data, type, row, meta) {
                                    if (type === "display" && data !== null && data !== "") {
                                        return "<span title=\"" + data + "\">" + row.regionName + "</span>";
                                    } else {
                                        return data;
                                    }
                                },
                                "visible": false
                            },
                            {
                                "data": "widgetId",
                                "render": function(data, type, row, meta) {
                                    if (type === "display" && data !== null && data !== "") {
                                        return "<span title=\"" + data + "\">" + row.widgetName + "</span>";
                                    } else {
                                        return data;
                                    }
                                },
                                "visible": false
                            },
                            {"data": "layoutCode"},
                            {
                                "orderable": false,
                                "data": dataTableButtonsColumn
                            }
                        ]
                    });
                    table.on('draw', dataTableDraw);
                    table.on('processing.dt', dataTableProcessing);
                    dataTableAddButtons(table, $('#actions_wrapper').find('.col-md-6').eq(1), false);
                }
            } else {
                // Hide the button
                $('.action-button-add').addClass("d-none");
            }
        });
    }


</script>