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

import { Table } from '../Table/Table';
import { TableBody } from '../TableBody/TableBody';
import { TableHeader } from '../TableHeader/TableHeader';
import { TableHeaderCell } from '../TableHeaderCell/TableHeaderCell';
import { TableRow } from '../TableRow/TableRow';
import type { TableCellType } from '../types';

import { TableCell } from './TableCell';

const typeOptions: Record<TableCellType, TableCellType> = {
  actions: 'actions',
  attention: 'attention',
  balance: 'balance',
  calloutActions: 'calloutActions',
  datetime: 'datetime',
  headline: 'headline',
  image: 'image',
  imageBig: 'imageBig',
  large: 'large',
  massAction: 'massAction',
  medium: 'medium',
  number: 'number',
  preview: 'preview',
  price: 'price',
  pricePrimary: 'pricePrimary',
  small: 'small',
  stickyEnd: 'stickyEnd',
  stickyStart: 'stickyStart',
  summary: 'summary',
};

function range(start: number, end: number): Array<number> {
  return Array.from({ length: end - start }, (_, i) => start + i);
}

const meta: Meta<typeof TableCell> = {
  title: 'UI kit/Table/TableCell',
  component: TableCell,
  tags: ['autodocs'],
  argTypes: {
    type: {
      control: 'select',
      options: Object.values(typeOptions).map(type => type),
    },
  },
  parameters: {
    count: 4,
  },
  decorators: [
    (Story, { args, parameters: { count } }) => {
      if (typeof count !== 'number') {
        throw new TypeError('TableCell stories require "count" parameter to be set to a number.');
      }

      args.colspan = typeof args.colspan === 'number' && args.colspan >= 1 ? args.colspan : undefined;
      args.rowspan = typeof args.rowspan === 'number' && args.rowspan >= 1 ? args.rowspan : undefined;

      return (
        <Table>
          <TableHeader>
            <TableRow>
              {range(1, count + 1).map(i => (
                <TableHeaderCell key={i} {...(i === 1 ? args : {})}>{`Header cell ${i}`}</TableHeaderCell>
              ))}
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow>
              <Story />
              {range(2, count + 1).map(
                i => (!args.colspan || args.colspan < i) && <TableCell key={i}>{`Row 1, body cell ${i}`}</TableCell>
              )}
            </TableRow>
            {typeof args.rowspan === 'number' &&
              args.rowspan > 1 &&
              range(1, args.rowspan).map(rowIndex => (
                <TableRow key={rowIndex}>
                  {range(2, count + 1).map(
                    i =>
                      (!args.colspan || args.colspan < i) && (
                        <TableCell
                          key={i}
                          {...(i === 1 ? args : {})}
                        >{`Row ${rowIndex + 1}, body cell ${i}`}</TableCell>
                      )
                  )}
                </TableRow>
              ))}
            {range(1, Math.max(0, 4 - (args.rowspan ?? 1)) + 1).map(rowIndex => (
              <TableRow key={rowIndex}>
                {range(1, count + 1).map(i => (
                  <TableCell
                    key={i}
                    {...(i === 1 ? args : {})}
                  >{`Row ${rowIndex + (args.rowspan ?? 1)}, body cell ${i}`}</TableCell>
                ))}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      );
    },
  ],
};

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

export const Default: Story = {
  args: {
    children: 'Row 1, body cell 1',
  },
};

export const StickyStart: Story = {
  args: {
    type: 'stickyStart',
    children: 'Sticky start header cell',
  },
  parameters: {
    count: 48,
  },
};