{% load form_helpers %}
{% load static %}

<section class="nb-drawer" tabindex="-1" id="{{ table_name }}_config">
    <div class="nb-drawer-header">
        <h1>Table Configuration</h1>
        <button type="button" class="btn-close" data-nb-dismiss="drawer" aria-label="Close"></button>
    </div>
    <div class="nb-drawer-body">
        <form class="userconfigform h-100 pb-20 px-20 vstack" data-config-root="tables.{{ table_config_form.table_name }}">
            <div class="vstack align-content-start flex-fill">
                <div class="alert alert-warning">
                    Column choices may negatively affect loading times.
                    <a href="{% static 'docs/user-guide/platform-functionality/user-interface/configurablecolumns.html' %}" class="btn btn-link btn-sm" target="_blank" rel="noopener">
                        <span class="mdi mdi-information"></span>
                    </a>
                </div>
                {% with field=table_config_form.visible_fields.0 %}
                    <span class="form-text mb-n8 mt-0">{{ field.help_text|safe }}</span>
                    {{ field }}
                {% endwith %}
            </div>
            <div class="nb-form-sticky-footer">
                <button class="btn btn-primary" type="submit">Save</button>
                <button class="btn btn-danger" type="reset">Reset</button>
            </div>
        </form>
    </div>
</section>

{% block javascript %}
    <script>
        (() => {
            document.addEventListener('DOMContentLoaded', () => {
                const FORM_SELECTOR = '#{{ table_name }}_config';

                document.addEventListener('reset', (event) => {
                    const form = event.target;
                    if (form.closest(FORM_SELECTOR)) {
                        event.preventDefault();

                        // Uncheck all checkboxes before form submission.
                        form.querySelectorAll('input[id^="id_"]').forEach((input) => {
                            input.checked = false;
                        });

                        form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true, composed: false }));
                    }
                });

                document.addEventListener('submit', async (event) => {
                    const form = event.target;
                    if (form.closest(FORM_SELECTOR)) {
                        event.preventDefault();

                        // Keep the drawer open after page reload caused by form submission.
                        window.nb.history.saveState();

                        // Derive an array from the dotted path to the config root.
                        const path = form.getAttribute('data-config-root').split('.');

                        const fields = [...form.querySelectorAll('input[id^="id_"]')];

                        // We check if everything is unchecked, since that would indicate it was a reset action.
                        const columns_order = fields.every((field) => !field.checked)
                            ? // Prefer resetting the order if all checkboxes are unchecked, if not set the full order.
                        []
                            : fields.map((field) => field.value);

                        // Merge form data from all individual checkboxes to an array of values.
                        const values = fields.reduce(
                            (values, field) => ({
                                ...values,
                                [field.getAttribute('name')]: [
                                    ...(values[field.getAttribute('name')] ?? []),
                                    /*
                                     * Place the condition with `field.checked` here rather than somewhere before,
                                     * because the property should always be present, even when no input is checked.
                                     */
                                    ...(field.checked ? [field.value] : []),
                                ],
                            }),
                            { columns_order },
                        );
                        // Construct a nested JSON object from the path.
                        const data = [...path].reverse().reduce((data, node) => ({ [node]: data }), values);

                        // Make the REST API request.
                        try {
                            const response = await fetch(`${nautobot_api_path}users/config/`, {
                                body: JSON.stringify(data),
                                headers: { 'Content-Type': 'application/json', 'X-CSRFToken': nautobot_csrf_token },
                                method: 'PATCH',
                            });

                            if (response.status >= 400) {
                                throw response;
                            }

                            // Reload the page.
                            const urlSearchParams = new URLSearchParams(window.location.search);
                            if (urlSearchParams.has('saved_view')) {
                                urlSearchParams.set('table_changes_pending', 'true');
                                const nextHref = `${window.location.origin}${window.location.pathname}?${urlSearchParams}${window.location.hash}`;
                                window.location.assign(nextHref);
                            } else {
                                window.location.reload();
                            }
                        } catch (errorOrResponse) {
                            const isResponse = errorOrResponse instanceof Response;
                            const message = isResponse ? await errorOrResponse.text() : errorOrResponse.message;
                            const cause = isResponse ? `${errorOrResponse.status} ${errorOrResponse.statusText}` : 'error';
                            // TODO(norbert-mieczkowski-codilime): replace this `alert` with proper toast when available.
                            alert(`Failed to update user config (${cause}): ${message}`);
                        }
                    }
                });
            });
        })();
    </script>
{% endblock %}