{% extends 'django_spire/infinite_scroll/base.html' %}

{% block scroll_wrapper_class %}d-flex flex-column h-100{% endblock %}

{% block scroll_xdata %}
    responsive_mode: '{{ responsive_mode|default:"collapse" }}',
    table_id: $id('table'),

    any_row_has_children: false,
    header_locked: false,
    average_row_height: 0,
    column_breakpoints: [],
    column_count: 0,
    is_row_open: {},
    select_all: false,
    selected_rows: new Set(),
    table_visible: false,

    {% block table_xdata %}{% endblock %}

    apply_column_breakpoints(row_element) {
        if (this.responsive_mode !== 'collapse') {
            return;
        }

        let cells = Array.from(row_element.children);

        cells.forEach((cell, index) => {
            let breakpoint = this.column_breakpoints[index];

            if (breakpoint && cell.tagName === 'TD') {
                cell.classList.add('d-none', `d-${breakpoint}-table-cell`);
            }
        });
    },

    handle_header_mounted(event) {
        this.column_count = event.detail.count;
    },

    handle_header_registered(event) {
        this.column_breakpoints[event.detail.index] = event.detail.breakpoint;
    },

    handle_row_deselected(event) {
        if (event.detail.table_id === this.table_id) {
            this.selected_rows.delete(event.detail.row_id);
        }
    },

    handle_row_mounted(event) {
        if (event.detail.table_id !== this.table_id) {
            return;
        }

        this.loaded_count++;

        if (event.detail.row_element) {
            this.apply_column_breakpoints(event.detail.row_element);

            if (this.average_row_height === 0) {
                this.average_row_height = event.detail.row_element.offsetHeight;
            }
        }
    },

    handle_row_selected(event) {
        if (event.detail.table_id === this.table_id) {
            this.selected_rows.add(event.detail.row_id);
        }
    },

    handle_row_cleared() {
        this.loaded_count = 0;
        this.selected_rows.clear();
        this.select_all = false;
    },

    handle_table_total_count_updated(event) {
        if (event.detail.table_id !== this.table_id) {
            return;
        }

        this.total_count = event.detail.total_count;

        if (event.detail.batch_size) {
            this.batch_size = event.detail.batch_size;
        }
    },

    handle_toggle_all() {
        this.select_all = !this.select_all;

        if (this.select_all) {
            this.$dispatch('select-all-rows', { table_id: this.table_id });
        } else {
            this.selected_rows.clear();
            this.$dispatch('deselect-all-rows', { table_id: this.table_id });
        }
    },

    handle_toggle_row(event) {
        if (event.detail.table_id !== this.table_id) {
            return;
        }

        let row_id = event.detail.row_id;
        this.is_row_open[row_id] = !this.is_row_open[row_id];

        this.$dispatch('toggle-row-state', {
            is_open: this.is_row_open[row_id],
            row_id: row_id,
            table_id: this.table_id
        });
    },

    handle_window_resize() {
        if (this.header_locked) {
            this.relock_header_width();
        }
    },

    load_header_width() {
        let header_row = this.$refs.header_row;
        let table = header_row ? header_row.closest('table') : null;

        if (!header_row || !table) {
            return;
        }

        let old_colgroup = table.querySelector('colgroup[data-locked]');

        let colgroup = document.createElement('colgroup');
        colgroup.setAttribute('data-locked', 'true');

        Array.from(header_row.children).forEach(cell => {
            let col = document.createElement('col');
            col.style.width = cell.getBoundingClientRect().width + 'px';
            colgroup.appendChild(col);
        });

        if (old_colgroup) {
            table.replaceChild(colgroup, old_colgroup);
        } else {
            table.insertBefore(colgroup, table.firstChild);
        }

        this.header_locked = true;
    },

    relock_header_width() {
        let header_row = this.$refs.header_row;
        let table = header_row ? header_row.closest('table') : null;

        if (!header_row || !table) {
            return;
        }

        let old_colgroup = table.querySelector('colgroup[data-locked]');

        let new_colgroup = document.createElement('colgroup');
        new_colgroup.setAttribute('data-locked', 'true');

        Array.from(header_row.children).forEach(cell => {
            let col = document.createElement('col');
            col.style.width = cell.getBoundingClientRect().width + 'px';
            new_colgroup.appendChild(col);
        });

        if (old_colgroup) {
            table.replaceChild(new_colgroup, old_colgroup);
        } else {
            table.insertBefore(new_colgroup, table.firstChild);
        }

        this.header_locked = true;
    },

    unlock_header_width() {
        let header_row = this.$refs.header_row;
        let table = header_row ? header_row.closest('table') : null;

        if (!header_row || !table) {
            return;
        }

        let colgroup = table.querySelector('colgroup[data-locked]');

        if (colgroup) {
            colgroup.remove();
        }

        this.header_locked = false;
    },

    async refresh_table() {
        await this.refresh();
    },
{% endblock %}

{% block scroll_pre_load %}
    this.skeleton_count = this.batch_size;
    this.show_loading = true;
    this.load_header_width();
    this.table_visible = true;
{% endblock %}

{% block scroll_init %}
    let _refresh = this.refresh.bind(this);

    this.refresh = async () => {
        let container = this.$refs.scroll_container;
        let locked_height = container ? container.offsetHeight + 'px' : null;

        if (locked_height) {
            container.style.minHeight = locked_height;
        }

        this.load_header_width();
        await _refresh();
        this.relock_header_width();

        if (container) {
            container.style.minHeight = '';
        }
    };
{% endblock %}

{% block handle_item_mounted %}{% endblock %}
{% block handle_item_cleared %}{% endblock %}
{% block handle_total_count_updated %}{% endblock %}

{% block scroll_reset_state %}
    this.selected_rows.clear();
    this.select_all = false;
    this.is_row_open = {};
{% endblock %}

{% block scroll_event %}
    @header-mounted="handle_header_mounted($event)"
    @header-registered="handle_header_registered($event)"
    @resize.window.debounce.250ms="handle_window_resize()"
    @row-deselected.window="handle_row_deselected($event)"
    @row-mounted.window="handle_row_mounted($event)"
    @row-selected.window="handle_row_selected($event)"
    @row-cleared.window="if ($event.detail.table_id === table_id) handle_row_cleared()"
    @table-total-count-updated.window="handle_table_total_count_updated($event)"
    @toggle-row.window="handle_toggle_row($event)"
{% endblock %}

{% block scroll_container %}
    <div
        class="position-relative table-container flex-grow-1"
        style="min-height: {{ table_height|default:'200px;' }} overflow-x: auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch;"
        x-ref="scroll_container"
        @scroll="handle_overscroll()"
        :data-table-id="table_id"
    >
        <table
            class="table table-hover table-striped fs-7 w-100 {% block table_class %}{% endblock %}"
            :style="'min-width: ' + (responsive_mode === 'scroll' ? '100%' : '800px') + '; ' + (header_locked || any_row_has_children ? 'table-layout: fixed;' : 'table-layout: auto;') + '; opacity: ' + (table_visible ? '1' : '0') + '; transition: opacity 150ms ease-in;'"
        >
            <thead class="{% block table_head_class %}bg-app-layer-two sticky-top{% endblock %}">
                <tr
                    x-init="column_count = $el.children.length; $dispatch('header-mounted', { count: column_count })"
                    x-ref="header_row"
                >
                    {% block table_header_container %}
                        {% block table_header_start %}
                            <th style="min-width: 30px; width: 30px;">
                                <input
                                    :checked="select_all"
                                    :disabled="is_loading || is_refreshing"
                                    @change="handle_toggle_all()"
                                    type="checkbox"
                                >
                            </th>

                            <th style="min-width: 30px; width: 30px;"></th>
                        {% endblock %}

                        {% block table_header %}{% endblock %}

                        {% block table_header_end %}
                            <th style="min-width: 70px; width: 70px;">Actions</th>
                        {% endblock %}
                    {% endblock %}
                </tr>
            </thead>

            <tbody
                x-ref="content_container"
                x-show="!is_refreshing"
                :data-table-id="table_id"
            >
                {% block table_body %}{% endblock %}
            </tbody>

            {% block refreshing_skeleton %}
                {% include 'django_spire/table/element/refreshing_skeleton.html' %}
            {% endblock %}

            {% block loading_skeleton %}
                {% include 'django_spire/table/element/loading_skeleton.html' %}
            {% endblock %}

            {% block no_data %}
                {% include 'django_spire/table/item/no_data_item.html' %}
            {% endblock %}
        </table>

        {% block trigger %}
            {% include 'django_spire/table/element/trigger.html' %}
        {% endblock %}
    </div>
{% endblock %}

{% block scroll_footer %}
    <div class="row mt-3 flex-shrink-0">
        <div class="col text-start">
            <span class="fs-7 text-app-secondary">
                Showing <span x-text="loaded_count"></span> of <span x-text="total_count"></span> rows
            </span>
        </div>

        <div class="col-auto text-end">
            <span class="fs-7 text-app-secondary" x-cloak x-show="selected_rows.size > 0">
                <span x-text="selected_rows.size"></span> selected
            </span>

            {% block footer_table_action %}{% endblock %}
        </div>
    </div>
{% endblock %}