import React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { Table } from '../Table/Table';
import { TableBody } from '../TableBody/TableBody';
import { TableCell } from '../TableCell/TableCell';
import { TableHeader } from '../TableHeader/TableHeader';
import { TableRow } from '../TableRow/TableRow';

import { TableHeaderCell } from './TableHeaderCell';

const meta: Meta<typeof TableHeaderCell> = {
  title: 'UI kit/Table/TableHeaderCell',
  component: TableHeaderCell,
  tags: ['autodocs'],
  decorators: [
    (Story, { args }) => {
      args.colspan = typeof args.colspan === 'number' && args.colspan >= 1 ? args.colspan : undefined;

      return (
        <Table>
          <TableHeader>
            <TableRow>
              <Story />
              {(!args.colspan || args.colspan < 2) && <TableHeaderCell>Header cell 2</TableHeaderCell>}
              {(!args.colspan || args.colspan < 3) && <TableHeaderCell>Header cell 3</TableHeaderCell>}
              {(!args.colspan || args.colspan < 4) && <TableHeaderCell>Header cell 4</TableHeaderCell>}
            </TableRow>
            {typeof args.rowspan === 'number' &&
              args.rowspan > 1 &&
              Array.from({ length: args.rowspan - 1 }).map((_, index) => (
                <TableRow key={index}>
                  {(!args.colspan || args.colspan < 2) && <TableHeaderCell>Header cell 3</TableHeaderCell>}
                  {(!args.colspan || args.colspan < 3) && <TableHeaderCell>Header cell 3</TableHeaderCell>}
                  {(!args.colspan || args.colspan < 4) && <TableHeaderCell>Header cell 4</TableHeaderCell>}
                </TableRow>
              ))}
          </TableHeader>
          <TableBody>
            {[1, 2, 3, 4].map(rowIndex => (
              <TableRow key={rowIndex}>
                <TableCell>{`Row ${rowIndex}, body cell 1`}</TableCell>
                <TableCell>{`Row ${rowIndex}, body cell 2`}</TableCell>
                <TableCell>{`Row ${rowIndex}, body cell 3`}</TableCell>
                <TableCell>{`Row ${rowIndex}, body cell 4`}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      );
    },
  ],
};

export default meta;
type Story = StoryObj<typeof TableHeaderCell>;

export const Default: Story = {
  args: {
    children: 'Header cell',
  },
};