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

import { generateSvgPlaceholder } from '../../utils/storybook';
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 { Preview } from './Preview';

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

export default meta;

type ButtonStory = StoryObj<typeof Preview.Image>;

export const Default: ButtonStory = {
  args: {
    src: generateSvgPlaceholder(360, 270),
    thumbnailSrc: generateSvgPlaceholder(100, 100),
    alt: 'Product image',
  },
};

type ImageStory = StoryObj<typeof Preview.Image>;

export const PreviewImageInTable: ImageStory = {
  args: {
    src: generateSvgPlaceholder(360, 270),
    thumbnailSrc: generateSvgPlaceholder(100, 100),
    alt: 'Product image',
  },
  render: args => (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHeaderCell>Header cell 2</TableHeaderCell>
          <TableHeaderCell>Header cell 3</TableHeaderCell>
          <TableHeaderCell type='preview'></TableHeaderCell>
          <TableHeaderCell>Header cell 4</TableHeaderCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        {[1, 2, 3, 4].map(item => (
          <TableRow key={item}>
            <TableCell>{`Row ${item}, cell 2`}</TableCell>
            <TableCell>{`Row ${item}, cell 3`}</TableCell>
            <TableCell type='preview'>
              <Preview.Image {...args} />
            </TableCell>
            <TableCell>{`Row ${item}, cell 4`}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  ),
};

export const LargeImage: ImageStory = {
  args: {
    src: generateSvgPlaceholder(3000, 2000),
    thumbnailSrc: generateSvgPlaceholder(100, 100),
    alt: 'Large product image',
  },
};