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

import { Button } from '../Button/Button';
import { Stack } from '../Stack/Stack';
import { Table } from '../Table/Table/Table';
import { TableBody } from '../Table/TableBody/TableBody';
import { TableCell } from '../Table/TableCell/TableCell';
import { TableHeader } from '../Table/TableHeader/TableHeader';
import { TableHeaderCell } from '../Table/TableHeaderCell/TableHeaderCell';
import { TableRow } from '../Table/TableRow/TableRow';
import { H1 } from '../Typography/H1/H1';

import { Preview } from './Preview';

const meta: Meta<typeof Preview> = {
  title: 'UI kit/Preview',
  component: Preview,
  tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<typeof Preview<HTMLButtonElement>>;

export const Default: Story = {
  args: {
    content: () => 'This is a preview',
    children: triggerProps => <Button {...triggerProps}>Hover me</Button>,
  },
};

type TableStory = StoryObj<typeof Preview<HTMLAnchorElement>>;

export const TablePreview: TableStory = {
  args: {
    content: () => (
      <>
        <Stack padding>
          <H1>This is a detail preview</H1>
          <Stack orientation='horizontal' justify='end' gap='sm'>
            <Button variant='action'>Button 1</Button>
            <Button>Button 2</Button>
            <Button>Button 3</Button>
          </Stack>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHeaderCell>Header cell 1</TableHeaderCell>
                <TableHeaderCell>Header cell 2</TableHeaderCell>
                <TableHeaderCell>Header cell 3</TableHeaderCell>
                <TableHeaderCell>Header cell 4</TableHeaderCell>
              </TableRow>
            </TableHeader>
            <TableBody>
              {[1, 2, 3, 4].map(item => (
                <TableRow key={item}>
                  <TableCell>{`Row ${item}, cell 1`}</TableCell>
                  <TableCell>{`Row ${item}, cell 2`}</TableCell>
                  <TableCell>{`Row ${item}, cell 3`}</TableCell>
                  <TableCell>{`Row ${item}, cell 4`}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </Stack>
      </>
    ),
    children: triggerProps => (
      <a {...triggerProps} href='#'>
        This is a product name
      </a>
    ),
  },
  render: args => (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHeaderCell>Header cell 2</TableHeaderCell>
          <TableHeaderCell>Header cell 2</TableHeaderCell>
          <TableHeaderCell>Header cell 3</TableHeaderCell>
          <TableHeaderCell>Header cell 4</TableHeaderCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        {[1, 2, 3, 4].map(item => (
          <TableRow key={item}>
            <TableCell>
              <Preview {...args} />
            </TableCell>
            <TableCell>{`Row ${item}, cell 2`}</TableCell>
            <TableCell>{`Row ${item}, cell 3`}</TableCell>
            <TableCell>{`Row ${item}, cell 4`}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  ),
};