import { composeDataTable } from './data-table.js';

/**
 * Shifts list page.
 *
 * A thin wrapper over the `dataTable` mixin whose only extra job is to keep
 * the summary cards (Total shifts · Open · With variance) in sync with the
 * client-side search. The mixin calls `_dtOnRender(matched)` at the end of
 * every render with the filtered, pre-pagination rows; we recount the
 * statuses from `data-dt-status` and write the totals into the
 * `[data-card-value]` spans the `<x-admin.summary-cards>` component emits.
 */
export function shiftsIndexPage() {
    return composeDataTable(
        {
            rowsSelector: 'tbody > tr[data-dt-row]',
        },
        {
            init() { this.initDataTable(); },

            _dtOnRender(matched) {
                const root = this._dtRoot ?? this.$root;
                if (!root) return;

                let open = 0;
                let variance = 0;
                matched.forEach((row) => {
                    const status = row.dataset.dtStatus;
                    if (status === 'open') open++;
                    else if (status === 'closed_with_variance') variance++;
                });

                const set = (key, val) => {
                    root.querySelectorAll(`[data-card-value="${key}"]`)
                        .forEach((el) => { el.textContent = String(val); });
                };
                set('total',    matched.length);
                set('open',     open);
                set('variance', variance);
            },
        },
    );
}
