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

import { generateSvgPlaceholder } from '../../utils/storybook';

import { Image } from './Image';

const checkerboardCss = `
.imageStoryCheckerboard .v2image {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
}
`;

const meta: Meta<typeof Image> = {
  title: 'UI kit/Image',
  component: Image,
  tags: ['autodocs'],
  decorators: [
    Story => (
      <div className='imageStoryCheckerboard'>
        <style>{checkerboardCss}</style>
        <Story />
      </div>
    ),
  ],
};

export default meta;

type Story = StoryObj<typeof Image>;

export const Default: Story = {
  args: {
    src: generateSvgPlaceholder(100, 100),
    alt: 'Product image',
  },
};

export const Responsive: Story = {
  args: {
    src: generateSvgPlaceholder(100, 100),
    alt: 'Responsive product image',
    responsive: true,
  },
};

export const CoverWithCustomRatio: Story = {
  args: {
    src: generateSvgPlaceholder(100, 100),
    alt: 'Cover product image',
    fit: 'cover',
    aspectRatio: '4 / 3',
  },
};

export const Example800x600: Story = {
  args: {
    src: generateSvgPlaceholder(800, 600),
    alt: 'Example 800x600',
  },
};

export const Portrait600x900: Story = {
  args: {
    src: generateSvgPlaceholder(600, 900),
    alt: 'Portrait 600x900',
  },
};

export const Small200x200: Story = {
  args: {
    src: generateSvgPlaceholder(200, 200),
    alt: 'Small example 200x200',
  },
};

export const Square600x600: Story = {
  args: {
    src: generateSvgPlaceholder(600, 600),
    alt: 'Square example600x600',
  },
};

export const Large2000x1200: Story = {
  args: {
    src: generateSvgPlaceholder(2000, 1200),
    alt: 'Large example 2000x1200',
  },
};

export const Widescreen1600x900: Story = {
  args: {
    src: generateSvgPlaceholder(1600, 900),
    alt: 'Widescreen 1600x900',
  },
};

export const SizeSmall: Story = {
  args: {
    src: generateSvgPlaceholder(100, 100),
    alt: 'Small size image',
    size: 'sm',
  },
};

export const SizeLarge: Story = {
  args: {
    src: generateSvgPlaceholder(100, 100),
    alt: 'Large size image',
    size: 'lg',
  },
};

export const LoadingError: Story = {
  args: {
    src: 'invalid-image-url',
    alt: 'This is an example image',
  },
};