import { DBGrid } from './DBGrid';
import { I18nProvider } from '../../../providers/I18nProvider';
import { Button } from '../../Atoms/Button/Button';
import { useTranslation } from 'react-i18next';

const SampleColumnsWithTranslation = () => {
  const { t } = useTranslation();
  return [
    { 
      field: 'id', 
      headerName: t('table.id'), 
      width: 90,
      translationKey: 'table.id',
    },
    { 
      field: 'name', 
      headerName: t('table.name'), 
      width: 200,
      translationKey: 'table.name',
    },
    { 
      field: 'email', 
      headerName: t('table.email'), 
      width: 250,
      translationKey: 'table.email',
    },
    { 
      field: 'role', 
      headerName: t('table.role'), 
      width: 150,
      translationKey: 'table.role',
    },
    {
      field: 'actions',
      headerName: t('table.actions'),
      width: 200,
      translationKey: 'table.actions',
      renderCell: (params) => (
        <div className="flex space-x-2">
          <Button size="small" variant="outline">{t('table.edit')}</Button>
          <Button size="small" variant="danger">{t('table.delete')}</Button>
        </div>
      ),
    },
  ];
};

const GridWithColumns = ({ rows, loading, emptyMessage }) => {
  const columns = SampleColumnsWithTranslation();
  return (
    <DBGrid
      columns={columns}
      rows={rows}
      loading={loading}
      emptyMessage={emptyMessage}
    />
  );
};

const sampleRows = [
  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
  { id: 4, name: 'Alice Williams', email: 'alice@example.com', role: 'Admin' },
  { id: 5, name: 'Charlie Brown', email: 'charlie@example.com', role: 'User' },
];

export default {
  title: 'DataDisplay/DBGrid',
  component: DBGrid,
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <I18nProvider>
        <Story />
      </I18nProvider>
    ),
  ],
};

export const Default = {
  render: () => (
    <GridWithColumns rows={sampleRows} />
  ),
};

export const Empty = {
  render: () => (
    <GridWithColumns rows={[]} />
  ),
};

export const Loading = {
  render: () => (
    <GridWithColumns rows={[]} loading={true} />
  ),
};

export const WithCustomEmptyMessage = {
  render: () => (
    <GridWithColumns 
      rows={[]} 
      emptyMessage="No se encontraron registros" 
    />
  ),
};

export const WithPagination = {
  render: () => {
    const columns = SampleColumnsWithTranslation();
    const manyRows = Array.from({ length: 50 }, (_, i) => ({
      id: i + 1,
      name: `Usuario ${i + 1}`,
      email: `usuario${i + 1}@example.com`,
      role: i % 2 === 0 ? 'Admin' : 'User',
    }));
    return (
      <DBGrid
        columns={columns}
        rows={manyRows}
        pageSize={10}
        pageSizeOptions={[5, 10, 25, 50]}
      />
    );
  },
};
