{% load i18n %}
{% with ctx=mass_action_context %}
{% if object_list %}
    {% block mass_action_bar %}
    <div class="row justify-content-between mass-action-bar">
        {% if not selection_dropdown_disabled %}
            <div class="col-md d-flex flex-row px-2">
                {% block mass_action_selection %}
                    {% include 'massactions/mass_action_selection_dropdown.html' %}
                {% endblock %}
            </div>
        {% endif %}
        <div class="col-md my-auto px-2 {% if not selection_dropdown_disabled %}text-center{% endif %}">
            <span class="selected-items {% block mass_action_selected_class %}text-muted{% endblock %}"></span>
        </div>
        <div class="col-md px-2 text-end text-right">
            <div class="mass-actions-dropdown btn-group" role="group">
                <button type="button" class="mass-actions-btn btn {% block mass_action_button_class %}btn-outline-secondary{% endblock %} dropdown-toggle px-2 py-1"
                        data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="id_mass_actions_btn">
                    {% trans 'Actions' %}
                </button>
                {% block mass_action_menu %}
                <div class="dropdown-menu">
                    {% block mass_action_menu_items %}
                    {% block mass_action_menu_start %}{% endblock %}
                    {% if 'update' in ctx.actions %}
                        {% block mass_action_menu_update %}
                            {% for field in ctx.update_fields %}
                                {% if not field.choices %}
                                    <a href="#" class="dropdown-item mass-action-{{ ctx.key|slugify }}"
                                       data-form-url="{% url 'massactions:mass_update' %}?key={{ ctx.key|urlencode }}&field_name={{ field.field_name|urlencode }}&back_url={{ request.get_full_path|urlencode }}">
                                        <i class="fa fas fa-pen fa-fw me-2 mr-2"></i>{{ field.localized_action }}
                                    </a>
                                {% elif field.choices|length == 1 %}
                                    <a href="#" class="dropdown-item mass-action-{{ ctx.key|slugify }}"
                                       data-form-url="{% url 'massactions:mass_update' %}?key={{ ctx.key|urlencode }}&field_name={{ field.field_name|urlencode }}&field_name_value={{ field.choices.0.0|urlencode }}&back_url={{ request.get_full_path|urlencode }}">
                                        <i class="fa fas fa-pen fa-fw me-2 mr-2"></i>{{ field.localized_action }}
                                    </a>
                                {% else %}
                                    <div class="dropdown-submenu">
                                        <a class="dropdown-item dropdown-toggle mass-action-submenu-toggle" href="#"
                                           data-target="#{{ field.field_name|slugify }}_submenu" aria-expanded="false">
                                            <i class="fa fas fa-pen fa-fw me-2 mr-2"></i>{{ field.localized_action }}
                                        </a>
                                        <div class="collapse" id="{{ field.field_name|slugify }}_submenu">
                                            {% for choice in field.choices %}
                                                <a href="#" class="dropdown-item mass-action-{{ ctx.key|slugify }}"
                                                   data-form-url="{% url 'massactions:mass_update' %}?key={{ ctx.key|urlencode }}&field_name={{ field.field_name|urlencode }}&field_name_value={{ choice.0|urlencode }}&back_url={{ request.get_full_path|urlencode }}">
                                                    {{ choice.1 }}
                                                </a>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% endblock %}
                    {% endif %}
                    {% block mass_action_menu_extra %}{% endblock %}
                    {% if 'delete' in ctx.actions %}
                        {% block mass_action_menu_delete %}
                            <a href="#" class="dropdown-item mass-action-{{ ctx.key|slugify }}" id="id_mass_action_delete"
                               data-form-url="{% url 'massactions:mass_delete' %}?key={{ ctx.key|urlencode }}&back_url={{ request.get_full_path|urlencode }}">
                                <i class="fa fas fa-trash fa-fw me-2 mr-2 text-danger"></i>{% trans 'Delete' %}
                            </a>
                        {% endblock %}
                    {% endif %}
                    {% block mass_action_menu_end %}{% endblock %}
                    {% endblock %}
                </div>
                {% endblock %}
            </div>
        </div>
    </div>
    {% endblock %}
    {% include 'massactions/helpers/crispy_modal_form_helper_mass_action.html' %}
{% endif %}

{% trans 'Number of selected items' as selected_items_label %}
<script>
(function ($) {
    const massActionKey = '{{ ctx.key|escapejs }}';
    const userId = '{{ request.user.id }}';
    const cookieName = userId + '_' + massActionKey;
    const itemsCount = {{ ctx.items_count|default:0 }};
    const encryptUrl = '{% url "massactions:encrypt" %}';
    const backUrl = '{{ request.get_full_path|urlencode }}';
    const csrfToken = '{{ csrf_token }}';
    const selectedItemsLabel = '{{ selected_items_label|escapejs }}';

    $(document).ready(function () {
        clearCookie();
        initSelection();
        addCheckboxEventListener();
        addSelectAllVisibleListener();
        addSelectAllListener();
        addClearAllListener();
        addSubmenuToggleListener();
        addMassActionRedirectListener();
        addMassExportButtonListener();
    });

    function getSelection() {
        return JSON.parse(sessionStorage.getItem(massActionKey));
    }

    function storeSelection(selection) {
        sessionStorage.setItem(massActionKey, JSON.stringify(selection));
    }

    function initSelection() {
        let cachedSelection = sessionStorage.getItem(massActionKey);
        if (cachedSelection === null) {
            resetSelection();
        } else {
            let selection = JSON.parse(cachedSelection);
            if (wasCurrentFilterChanged(selection) || wasUserChanged(selection)) {
                resetSelection();
            } else if (selection.selectAll) {
                $('.mass-action-checkbox').prop("checked", true);
                selectOrUnselectCheckboxes(selection, false);
                updateSelectedItemsLabel(itemsCount - selection.ids.length, itemsCount);
                storeSelection(selection);
            } else {
                selectOrUnselectCheckboxes(selection, true);
                updateSelectedItemsLabel(selection.ids.length, itemsCount);
                storeSelection(selection);
            }
        }
    }

    // clear cookie and remove selection after successful action
    function clearCookie() {
        let cookie = Cookies.get(cookieName);
        if (cookie && cookie === "True") {
            resetSelection();
        }
        Cookies.remove(cookieName);
    }

    function selectOrUnselectCheckboxes(selection, checked) {
        selection.ids.forEach((id) => {
            let checkbox = $(".mass-action-checkbox[value='" + id + "']");
            if (checkbox.length > 0) {
                checkbox.prop("checked", checked);
            }
        });
    }

    function addCheckboxEventListener() {
        $('.mass-action-checkbox').on('change', function () {
            let id = $(this).val();
            let selection = getSelection();
            if ($(this).is(':checked')) {
                if (selection.selectAll) {
                    selection.ids = jQuery.grep(selection.ids, function (value) {
                        return value !== id;
                    });
                } else if (jQuery.inArray(id, selection.ids) < 0) {
                    selection.ids.push(id);
                }
            } else {
                if (!selection.selectAll) {
                    selection.ids = jQuery.grep(selection.ids, function (value) {
                        return value !== id;
                    });
                } else if (jQuery.inArray(id, selection.ids) < 0) {
                    selection.ids.push(id);
                    // selectAll and the user unchecked the last item: turn selectAll off and clear
                    if (selection.ids.length === itemsCount) {
                        selection.selectAll = false;
                        selection.ids = [];
                    }
                }
            }
            storeSelection(selection);

            if (selection.selectAll) {
                updateSelectedItemsLabel(itemsCount - selection.ids.length, itemsCount);
            } else {
                updateSelectedItemsLabel(selection.ids.length, itemsCount);
            }
        });
    }

    function addSelectAllVisibleListener() {
        $('.select-visible').on('click', function () {
            let selection = getSelection();
            if (selection.selectAll) {
                resetSelection();
            }
            $('.mass-action-checkbox').prop("checked", true).trigger('change');
        });
    }

    function addSelectAllListener() {
        $('.select-all').on('click', function () {
            $('.mass-action-checkbox').prop("checked", true);
            let selection = getSelection();
            selection.selectAll = true;
            selection.ids = [];
            updateSelectedItemsLabel(itemsCount, itemsCount);
            storeSelection(selection);
        });
    }

    function addClearAllListener() {
        $('.clear-all').on('click', function () {
            $('.mass-action-checkbox').prop("checked", false);
            resetSelection();
        });
    }

    // a click inside the menu closes the dropdown (Bootstrap 4 always, Bootstrap 5 by default): toggle the submenu by hand
    function addSubmenuToggleListener() {
        $('.mass-action-submenu-toggle').on('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            $($(this).data('target')).collapse('toggle');
        });
    }

    // export links: <a class="mass-action-export" data-export-url="...">; the selection is appended as query string
    function addMassExportButtonListener() {
        $(".mass-action-export").on('click', function () {
            let url = $(this).data('export-url');
            if (!url) {
                return;
            }
            const selection = getSelection();
            if (selection.currentFilter) {
                url += selection.currentFilter + "&back_url=" + backUrl;
            } else {
                url += "?back_url=" + backUrl;
            }
            let ids = '';
            if (selection.ids.length > 0) {
                ids = selection.selectAll ? '&exclude_ids=' : '&ids=';
                ids += selection.ids.join(',');
            }
            window.open(url + ids, "_self");
        });
    }

    // non-modal actions: <a class="mass-action" data-form-url="...">; stores the cookie and redirects
    function addMassActionRedirectListener() {
        $(".mass-action").on('click', function () {
            const formUrl = $(this).data('form-url');
            $.ajax({
                type: 'POST',
                headers: {'X-CSRFToken': csrfToken},
                url: encryptUrl,
                dataType: "json",
                data: {
                    string: sessionStorage.getItem(massActionKey)
                },
                success: function (data) {
                    Cookies.set(cookieName, data.encrypted_string, {expires: new Date(new Date().getTime() + (1000 * 60 * 60))});
                    window.open(formUrl, "_self");
                },
                error: function (data) {
                    console.log('Encryption failed.', data);
                },
            });
        });
    }

    function resetSelection() {
        let selectionCache = {
            ids: [],
            selectAll: false,
            user: userId,
            currentFilter: window.location.search
        }
        updateSelectedItemsLabel(0, itemsCount);
        storeSelection(selectionCache);
    }

    function wasUserChanged(selection) {
        return selection.user !== userId;
    }

    function wasCurrentFilterChanged(selection) {
        const currentParams = new URLSearchParams(window.location.search);
        removeIrrelevantParams(currentParams);
        const cachedParams = new URLSearchParams(selection.currentFilter);
        removeIrrelevantParams(cachedParams);
        return currentParams.toString() !== cachedParams.toString();
    }

    function removeIrrelevantParams(urlSearchParams) {
        ['page', 'paginate_by', 'sorting', 'display'].forEach(function (name) {
            urlSearchParams.delete(name);
        });
    }

    function updateSelectedItemsLabel(selectionCount, listCount) {
        if (selectionCount > 0) {
            $('.selected-items').text(selectedItemsLabel + ": " + selectionCount + " / " + listCount);
            $('.mass-actions-btn').attr("disabled", false);
        } else {
            $('.selected-items').text("");
            $('.mass-actions-btn').attr("disabled", true);
        }
    }

    // small public API for project scripts (e.g. reset after a download action)
    window.massActions = window.massActions || {};
    window.massActions[massActionKey] = {
        getSelection: getSelection,
        resetSelection: resetSelection
    };

    {% block mass_action_js_extra %}{% endblock %}
})(jQuery);
</script>
{% endwith %}