// Table with search, sorting and paging by DataTables (no jQuery: DataTables 3.x)

import { h } from './common.js';

/**
 * columns: [{ title, cell(row) -> Node | string, sort?(row) -> number | string, className? }]
 * A column without `sort` is not sortable. Rows keep the order they were given in until a
 * header is clicked.
 */
export function createTable({ id, columns, rows, pageLength = 50 }) {
    const head = h('tr', {}, ...columns.map((column) =>
        h('th', { scope: 'col', class: column.className || '' }, column.title)));

    // data-order: plain numbers and ISO dates, so sorting is numeric/chronological
    const body = h('tbody', {}, ...rows.map((row) =>
        h('tr', {}, ...columns.map((column) =>
            h('td', { class: column.className || '', 'data-order': column.sort ? column.sort(row) : null },
                column.cell(row))))));

    const table = h('table', { class: 'table table-sm table-hover align-middle', id }, h('thead', {}, head), body);
    const wrapper = h('div', {}, table);

    new DataTable(table, {
        pageLength,
        lengthMenu: [25, 50, 100, 200],
        order: [],  // keep the order from the server: newest first
        columnDefs: columns.flatMap((column, index) =>
            column.sort ? [] : [{ targets: index, orderable: false }]),
        language: { url: 'vendor/datatables-ru.json' },
    });

    return wrapper;
}