import * as React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { useState } from 'react';
import { DataTable, IDataTableColumn } from './DataTable';
import { Badge } from '../Badge/Badge';
import { TextInput } from '../TextInput/TextInput';

const meta: Meta = {
  title: 'Таблицы/DataTable',
  tags: ['autodocs']
};

export default meta;

// --- Пример 1: список (только чтение, кликабельные строки, бейдж в ячейке) ---
interface IRequestRow {
  id: number;
  type: string;
  title: string;
  status: string;
}

const REQUESTS: IRequestRow[] = [
  { id: 3, type: 'Заявка на отпуск', title: 'Отпуск — Тимур Городецкий', status: 'Согласовано' },
  { id: 7, type: 'Заявка в отдел 1С', title: 'ТЕСТ СОГЛАСОВАНИЯ', status: 'На согласовании' },
  { id: 18, type: 'Рабочее место', title: 'Раб. место — Тестов Т.Т.', status: 'Выполнение' }
];

export const RequestList: StoryObj = {
  render: () => {
    const columns: IDataTableColumn<IRequestRow>[] = [
      { key: 'id', title: 'ID', width: '64px' },
      { key: 'type', title: 'Тип' },
      { key: 'title', title: 'Название' },
      {
        key: 'status',
        title: 'Статус',
        render: (r) => (
          <Badge variant={r.status === 'Согласовано' ? 'success' : r.status === 'Выполнение' ? 'primary' : 'info'}>
            {r.status}
          </Badge>
        )
      }
    ];
    return (
      <DataTable
        columns={columns}
        rows={REQUESTS}
        rowKey={(r) => r.id}
        onRowClick={(r) => window.alert(`Открыть заявку #${r.id}`)}
      />
    );
  }
};

// --- Пример 2: редактируемая табличная часть (инпуты в ячейках) ---
interface IItem {
  name: string;
  qty: string;
}

export const Editable: StoryObj = {
  render: () => {
    const [items, setItems] = useState<IItem[]>([
      { name: 'Ноутбук', qty: '2' },
      { name: 'Мышь', qty: '5' }
    ]);
    const setCell = (i: number, key: keyof IItem, value: string): void =>
      setItems(items.map((r, idx) => (idx === i ? { ...r, [key]: value } : r)));

    const columns: IDataTableColumn<IItem>[] = [
      { key: 'n', title: '№', width: '48px', render: (_r, i) => i + 1 },
      {
        key: 'name',
        title: 'Наименование',
        render: (r, i) => <TextInput value={r.name} onChange={(v) => setCell(i, 'name', v)} />
      },
      {
        key: 'qty',
        title: 'Кол-во',
        width: '120px',
        render: (r, i) => <TextInput value={r.qty} onChange={(v) => setCell(i, 'qty', v)} />
      }
    ];
    return <DataTable columns={columns} rows={items} />;
  }
};

// --- Пример 3: пустое состояние ---
export const Empty: StoryObj = {
  render: () => (
    <DataTable
      columns={[
        { key: 'id', title: 'ID' },
        { key: 'title', title: 'Название' }
      ]}
      rows={[]}
      emptyText="Заявок пока нет"
    />
  )
};