import type { Meta, StoryObj } from '@storybook/html';
import { SortableTable, type SortableTableOptions } from '@42/core/sortable-table';
import '@42/styles/sortable-table.css';
import '@42/styles/dnd.css';

const snippet = `import { SortableTable } from '@42/core/sortable-table';
import '@42/styles/sortable-table.css';
import '@42/styles/dnd.css'; // shared drag-and-drop feedback

const table = new SortableTable(document.querySelector('[data-c42-sortable-table]')!, {
  reorderRows: true,
  reorderColumns: true,
  resizeColumns: true,
});

table.on('sortabletable:reorder', (e) => console.log(e.detail.axis, e.detail.order));`;

const PEOPLE = [
  ['r1', 'Ada Lovelace', 'Engineering', '36'],
  ['r2', 'Linus Torvalds', 'Kernel', '54'],
  ['r3', 'Grace Hopper', 'Compilers', '85'],
];

const meta: Meta<SortableTableOptions> = {
  title: 'Core/Data & Collections/SortableTable',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: snippet, language: 'ts' },
    },
  },
  argTypes: {
    reorderRows: { control: 'boolean' },
    reorderColumns: { control: 'boolean' },
    resizeColumns: { control: 'boolean' },
  },
  args: {
    reorderRows: true,
    reorderColumns: true,
    resizeColumns: true,
  },
  render: (args) => {
    const cols = [
      ['name', 'Name'],
      ['role', 'Role'],
      ['age', 'Age'],
    ];
    const root = document.createElement('table');
    root.dataset.c42SortableTable = '';
    root.innerHTML = `
      <thead>
        <tr>
          ${cols
            .map(
              ([value, label]) => `
            <th data-c42-sortable-col data-value="${value}">
              <button data-c42-sortable-col-handle aria-label="Reorder ${label}"></button>
              ${label}
              <span data-c42-sortable-resize aria-label="Resize ${label}"></span>
            </th>`,
            )
            .join('')}
        </tr>
      </thead>
      <tbody>
        ${PEOPLE.map(
          ([id, name, role, age]) => `
          <tr data-c42-sortable-row data-value="${id}">
            <td><button data-c42-sortable-row-handle aria-label="Reorder ${name}"></button>${name}</td>
            <td>${role}</td>
            <td>${age}</td>
          </tr>`,
        ).join('')}
      </tbody>`;
    new SortableTable(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<SortableTableOptions>;

export const Default: Story = {};

export const RowsOnly: Story = {
  args: { reorderColumns: false, resizeColumns: false },
};