import { useState } from 'react';

import Button from '@design-system/Buttons/Button';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import ImagePreviewDialog from '.';

const meta: Meta<typeof ImagePreviewDialog> = {
  component: ImagePreviewDialog,
  title: 'Composed Components/Files/ImagePreviewDialog',
  tags: ['autodocs'],
  argTypes: {
    open: { control: false },
    onClose: { control: false },
    onDownload: { control: false },
    src: { control: 'text' },
    name: { control: 'text' },
    alt: { control: 'text' },
    showDownload: { control: 'boolean' },
  },
  args: {
    name: 'preview.jpg',
    src: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=80&w=2074&auto=format&fit=crop',
    showDownload: true,
  },
};

export default meta;

type Story = StoryObj<typeof ImagePreviewDialog>;

export const Default: Story = {
  render: args => {
    const [open, setOpen] = useState(false);
    return (
      <>
        <Button
          variant="primary"
          onClick={() => setOpen(true)}
        >
          Open preview
        </Button>
        <ImagePreviewDialog
          {...args}
          open={open}
          onClose={() => setOpen(false)}
        />
      </>
    );
  },
};
