DataGrid

'use client'

import { Box, Heading, Text, VStack } from '@chakra-ui/react'
import { Form } from '@letar/forms'
import { useState } from 'react'
import { DemoPageLayout, SubmittedDataPreview } from '../_components'

/** Генерация тестовых данных */
function generateEmployees(count: number) {
  const departments = ['Разработка', 'Дизайн', 'Маркетинг', 'Продажи', 'HR']
  return Array.from({ length: count }, (_, i) => ({
    name: `Сотрудник ${i + 1}`,
    email: `employee${i + 1}@company.com`,
    department: departments[i % departments.length],
    salary: 50000 + Math.floor(Math.random() * 100000),
  }))
}

export default function DataGridDemoPage() {
  const [submittedData, setSubmittedData] = useState<Record<string, unknown> | null>(null)

  return (
    <DemoPageLayout
      title="Form.Field.DataGrid"
      description="Редактируемая таблица данных на TanStack Table: сортировка, фильтры, пагинация, inline editing"
    >
      <VStack gap={8} align="stretch">
        <Box>
          <Heading size="md" mb={3}>
            100 сотрудников
          </Heading>
          <Text fontSize="sm" color="fg.muted" mb={4}>
            Клик по ячейке → редактирование. Заголовок → сортировка. Фильтры сверху. Пагинация по 10 записей.
          </Text>
          <Form
            debug
            initialValue={{ employees: generateEmployees(100) }}
            onSubmit={(data) => setSubmittedData(data as Record<string, unknown>)}
          >
            <Form.Field.DataGrid
              name="employees"
              label="Сотрудники"
              columns={[
                { name: 'name', label: 'Имя', editable: true, filter: 'text' },
                { name: 'email', label: 'Email', editable: true, filter: 'text' },
                { name: 'department', label: 'Отдел', editable: true, filter: 'text' },
                { name: 'salary', label: 'Зарплата', editable: true, align: 'right' },
              ]}
              pageSize={10}
              rowSelection
              helperText="Клик по ячейке для редактирования, Enter для сохранения"
            />
            <Form.Button.Submit>Сохранить все изменения</Form.Button.Submit>
          </Form>
        </Box>

        <SubmittedDataPreview data={submittedData} />
      </VStack>
    </DemoPageLayout>
  )
}

'use client'

import { FieldDataGrid } from '@letar/forms-shadcn'

import { DemoForm, DemoPageLayout } from '../_components'

export default function DataGridDemoPage() {
  return (
    <DemoPageLayout
      title="FieldDataGrid (beta)"
      description={'Большая таблица на @tanstack/react-table — изолированная песочница со своим array-полем employees. '
        + 'Сортировка (клик по заголовку), текстовый фильтр по имени, инлайн-редактирование (клик по ячейке), '
        + 'выбор строк + bulk-удаление, CSV-экспорт.'}
    >
      <DemoForm<{ employees: { name: string; department: string; salary: number }[] }>
        defaultValues={{
          employees: [
            { name: 'Иван Петров', department: 'Разработка', salary: 150000 },
            { name: 'Мария Сидорова', department: 'Дизайн', salary: 120000 },
            { name: 'Пётр Иванов', department: 'Продажи', salary: 90000 },
          ],
        }}
        onSubmit={(value) => {
          // eslint-disable-next-line no-console
          console.log('data-grid submit', value)
        }}
      >
        <FieldDataGrid
          name="employees"
          label="Сотрудники"
          rowSelection
          columns={[
            { name: 'name', label: 'Имя', filter: true },
            { name: 'department', label: 'Отдел', filter: true },
            { name: 'salary', label: 'Зарплата', align: 'right' },
          ]}
        />
      </DemoForm>
    </DemoPageLayout>
  )
}