import type { Meta, StoryObj } from '@storybook/html';
import { DataView, type DataViewOptions, DATA_VIEW_ROW_ACTION_EVENT } from '@42/core/data-view';
import '@42/styles/data-view.css';

const PEOPLE = [
  { name: 'Charlie', age: 30 },
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 40 },
  { name: 'Dave', age: 20 },
  { name: 'Eve', age: 35 },
  { name: 'Frank', age: 28 },
];

const meta: Meta<DataViewOptions> = {
  title: 'Core/Data & Collections/DataView',
  tags: ['autodocs'],
  argTypes: {
    pageSize: { control: { type: 'number', min: 1, max: 10 } },
    defaultSort: { control: 'text' },
    defaultQuery: { control: 'text' },
  },
  args: { pageSize: 3 },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Dataview = '';
    const rows = PEOPLE.map(
      (p) =>
        `<tr data-c42-dataview-row data-search="${p.name}" data-field-name="${p.name}" data-field-age="${p.age}">
           <td data-col="name">${p.name}</td>
           <td data-col="age">${p.age}</td>
           <td><button data-c42-dataview-action="edit">Edit</button><button data-c42-dataview-action="delete">Del</button></td>
         </tr>`,
    ).join('');
    root.innerHTML = `
      <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap">
        <input data-c42-dataview-search placeholder="Search..." />
        <label><input type="checkbox" data-c42-dataview-column="name" checked /> Name</label>
        <label><input type="checkbox" data-c42-dataview-column="age" checked /> Age</label>
      </div>
      <div data-c42-dataview-loading hidden>Loading...</div>
      <table>
        <thead>
          <tr>
            <th data-col="name"><button data-c42-dataview-sort-field="name">Name</button></th>
            <th data-col="age"><button data-c42-dataview-sort-field="age">Age</button></th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody data-c42-dataview-rows>${rows}</tbody>
      </table>
      <div>
        <button data-c42-dataview-prev>Prev</button>
        <span data-c42-dataview-page></span> / <span data-c42-dataview-pages></span>
        <button data-c42-dataview-next>Next</button>
        <span data-c42-dataview-info></span>
      </div>`;
    const dv = new DataView(root, args);
    dv.on(DATA_VIEW_ROW_ACTION_EVENT, (e: Event) => {
      const { action, rowIndex } = (e as CustomEvent).detail;
      // eslint-disable-next-line no-console
      console.log(`Action "${action}" on row ${rowIndex}`);
    });
    return root;
  },
};

export default meta;

type Story = StoryObj<DataViewOptions>;

export const Default: Story = {};
export const SortedByAge: Story = { args: { defaultSort: 'age:asc' } };

/** Simulates async data loading with a 1.5s delay. */
export const AsyncLoading: Story = {
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Dataview = '';
    root.innerHTML = `
      <input data-c42-dataview-search placeholder="Search..." />
      <div data-c42-dataview-loading>Loading data...</div>
      <table>
        <thead><tr><th>Name</th><th>Age</th></tr></thead>
        <tbody data-c42-dataview-rows></tbody>
      </table>
      <div>
        <button data-c42-dataview-prev>Prev</button>
        <span data-c42-dataview-page></span> / <span data-c42-dataview-pages></span>
        <button data-c42-dataview-next>Next</button>
        <span data-c42-dataview-info></span>
      </div>`;
    const dv = new DataView(root, { ...args, loading: true });
    // Simulate async load
    setTimeout(() => {
      const tbody = root.querySelector('[data-c42-dataview-rows]')!;
      tbody.innerHTML = PEOPLE.map(
        (p) =>
          `<tr data-c42-dataview-row data-search="${p.name}" data-field-name="${p.name}" data-field-age="${p.age}">
             <td>${p.name}</td><td>${p.age}</td>
           </tr>`,
      ).join('');
      dv.setLoading(false);
    }, 1500);
    return root;
  },
};