import '@toolbox-web/grid';
import { createGrid } from '@toolbox-web/grid';

const grid = createGrid<Employee>({
  columns: [
    { field: 'name', header: 'Name' },
    { field: 'email', header: 'Email' },
  ],
});
grid.rows = data;
document.body.appendChild(grid);

import { createGrid, queryGrid } from '@toolbox-web/grid';

// Create a new typed grid
const grid = createGrid<Employee>({
  columns: [{ field: 'name' }],
  plugins: [new SelectionPlugin()],
});

// Query an existing grid with proper typing
const existing = queryGrid<Employee>('#my-grid');

grid.gridConfig = {
  columns: [{ field: 'name' }, { field: 'age', type: 'number' }],
  fitMode: 'stretch',
  plugins: [new SelectionPlugin({ mode: 'row' })],
  shell: { header: { title: 'My Data Grid' } },
};

grid.columns = [{ field: 'name' }, { field: 'age' }];
grid.fitMode = 'stretch';

import { DGEvents } from '@toolbox-web/grid';
grid.addEventListener(DGEvents.CELL_COMMIT, handler);

// Insert with animation (default)
grid.insertRow(3, newEmployee);

// Insert without animation
grid.insertRow(3, newEmployee, false);

// Remove with fade-out animation and await completion
await grid.removeRow(5);

// Remove without animation
const removed = await grid.removeRow(5, false);

// Flash highlight for updated row
await grid.animateRow(5, 'change');

// Animate by row ID
await grid.animateRowById('emp-123', 'change');

// Animate multiple rows
await grid.animateRows([0, 1, 2], 'change');

grid.gridConfig = {
  animation: {
    mode: 'on', // 'on' | 'off' | 'reduced-motion'
    style: 'smooth', // Animation easing (alias for `easing`)
    duration: 200, // Default duration in ms
  },
};

interface ColumnConfig {
  field: string; // Required: property key in row data
  header?: string; // Display label (defaults to field name)
  type?: 'string' | 'number' | 'date' | 'boolean' | 'select';
  width?: number | string; // Pixels, '1fr', or percentage
  sortable?: boolean; // Enable sorting (default: true)
  resizable?: boolean; // Enable resize (default: true)
  editable?: boolean; // Enable editing
  hidden?: boolean; // Initially hidden
  lockVisible?: boolean; // Prevent hiding
  format?: (value: any, row: T) => string;
}

interface GridConfig {
  columns?: ColumnConfig[];
  fitMode?: 'stretch' | 'fixed';
  plugins?: BaseGridPlugin[]; // Array of plugin class instances
  icons?: GridIcons; // Centralized icon configuration
  shell?: ShellConfig; // Optional header bar and tool panels
  getRowId?: (row: T) => string; // Custom row ID resolver
  typeDefaults?: Record<string, TypeDefault<T>>; // Type-level renderers/editors
}

grid.gridConfig = {
  columns: [...],
  getRowId: (row) => row.employeeNumber, // Use custom field as ID
};

import { DEFAULT_GRID_ICONS } from '@toolbox-web/grid';

grid.gridConfig = {
  icons: {
    expand: '▶', // Collapsed tree/group/detail icon
    collapse: '▼', // Expanded tree/group/detail icon
    sortAsc: '▲', // Sort ascending indicator
    sortDesc: '▼', // Sort descending indicator
    sortNone: '⇅', // Unsorted column indicator
    submenuArrow: '▶', // Context menu submenu arrow
    dragHandle: '⋮⋮', // Column reorder drag handle
  },
};

grid.gridConfig = {
  typeDefaults: {
    country: {
      renderer: (ctx) => {
        const span = document.createElement('span');
        span.textContent = `🌍 ${ctx.value}`;
        return span;
      },
      editor: (ctx) => {
        const select = document.createElement('select');
        ['USA', 'UK', 'Germany'].forEach((c) => {
          const opt = document.createElement('option');
          opt.value = c;
          opt.textContent = c;
          select.appendChild(opt);
        });
        select.value = ctx.value;
        select.onchange = () => ctx.commit(select.value);
        return select;
      },
    },
    currency: {
      editorParams: { min: 0, step: 0.01 },
    },
  },
  columns: [
    { field: 'country', type: 'country', editable: true }, // Uses country renderer/editor
    { field: 'salary', type: 'currency', editable: true }, // Uses currency editorParams
  ],
};

import { GroupingRowsPlugin } from '@toolbox-web/grid/plugins/grouping-rows';
import { SelectionPlugin } from '@toolbox-web/grid/plugins/selection';

grid.gridConfig = {
  plugins: [
    new GroupingRowsPlugin({
      groupOn: (row) => row.category,
      fullWidth: false,
      aggregators: { total: 'sum' },
    }),
    new SelectionPlugin({
      mode: 'row',
      multiple: true,
    }),
  ],
};

import { BaseGridPlugin } from '@toolbox-web/grid';
import styles from './my-plugin.css?inline';

interface MyPluginConfig {
  myOption?: boolean;
}

export class MyPlugin extends BaseGridPlugin<MyPluginConfig> {
  readonly name = 'myPlugin';
  override readonly styles = styles; // CSS imported via Vite

  // Default config (override in constructor)
  protected override get defaultConfig(): Partial<MyPluginConfig> {
    return { myOption: true };
  }

  // Called when plugin is attached to grid
  override attach(grid: GridElement): void {
    super.attach(grid);
    // Setup event listeners using this.disconnectSignal for auto-cleanup
  }

  // Called when plugin is detached
  override detach(): void {
    // Cleanup (listeners with disconnectSignal auto-cleanup)
  }

  // Hook: Called after grid renders
  override afterRender(): void {
    // Access DOM via this.gridElement
  }
}

import { BaseGridPlugin, type PluginManifest } from '@toolbox-web/grid';

export class MyPlugin extends BaseGridPlugin<MyConfig> {
  // Declare events this plugin emits
  static override readonly manifest: PluginManifest = {
    events: [{ type: 'my-event', description: 'Emitted when something happens' }],
  };

  override attach(grid: GridElementRef): void {
    super.attach(grid);
    // Subscribe to events from other plugins
    this.on('filter-change', (detail) => {
      console.log('Filter changed:', detail);
    });
  }

  private doSomething(): void {
    // Emit to other plugins (not DOM events)
    this.emitPluginEvent('my-event', { data: 'value' });
  }
}

import { BaseGridPlugin, type PluginManifest, type PluginQuery } from '@toolbox-web/grid';

export class MyPlugin extends BaseGridPlugin<MyConfig> {
  // Declare queries this plugin handles
  static override readonly manifest: PluginManifest = {
    queries: [{ type: 'canMoveColumn', description: 'Check if column can be moved' }],
  };

  override handleQuery(query: PluginQuery): unknown {
    if (query.type === 'canMoveColumn') {
      const column = query.context as ColumnConfig;
      if (this.isLocked(column)) return false;
      return undefined; // Let other plugins decide
    }
    return undefined;
  }
}

// Simplified API
const responses = grid.query<boolean>('canMoveColumn', column);
const canMove = !responses.includes(false);

// Or full query object
const responses = grid.queryPlugins<boolean>({
  type: PLUGIN_QUERIES.CAN_MOVE_COLUMN,
  context: column,
});

const selection = grid.getPluginByName('selection');
if (selection) {
  selection.selectAll();
}

import type { GridConfig, ColumnConfig, CellCommitDetail, BaseGridPlugin } from '@toolbox-web/grid';

import { SelectionPlugin, SelectionConfig } from '@toolbox-web/grid/plugins/selection';
import { FilteringPlugin, FilterConfig, FilterModel } from '@toolbox-web/grid/plugins/filtering';
import { TreePlugin, TreeConfig, TreeState } from '@toolbox-web/grid/plugins/tree';

import {
  SelectionPlugin,
  FilteringPlugin,
  TreePlugin,
  // ... all other plugins
} from '@toolbox-web/grid/all';