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

import { LazyIllustration } from './LazyIllustration'

/**
 * The LazyIllustration component dynamically imports illustrations based on their name.
 * It uses the lazyIllustrationsMap from the generated illustrationAssets file to load
 * the corresponding illustration and pass it to the Illustration component.
 */
const meta = {
  title: 'Components/LazyIllustration',
  component: LazyIllustration,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    name: {
      control: 'select',
      options: [
        'FAQ',
        'Binoculars',
        'WriteBook',
        'VisuallyImpaired',
        'Library',
        'AccountingAnimation',
        'BinocularsAnimation',
        'CardAnimation',
      ],
      description:
        'The name of the illustration to load dynamically. This must be one of the valid illustration names from the Unity illustration library',
      table: {
        type: { summary: 'UnityIllustrationName' },
        category: 'Required',
      },
    },
    variant: {
      control: 'select',
      options: ['picture', 'icon'],
      description:
        'The illustration variant. It can be a regular picture or an illustrated icon',
      table: {
        type: { summary: "'picture' | 'icon'" },
        category: 'Required',
      },
    },
    alt: {
      control: 'text',
      description:
        'Accessible name for the illustration. Required when isDecorative is `true`',
      table: {
        type: { summary: 'string' },
        category: 'Accessibility',
      },
    },
    // @ts-expect-error - Typescript can't handle the union type properly, but the prop exist
    description: {
      control: 'text',
      description:
        'Optional description for complex illustrations. Active only when isDecorative is `true`',
      table: {
        type: { summary: 'string' },
        category: 'Accessibility',
      },
    },
    isDecorative: {
      control: 'boolean',
      description:
        'Whether the illustration is decorative (hidden from screen readers). When `true`, `alt` becomes optional',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
        category: 'Accessibility',
      },
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
      description: 'The size of the illustration. Only applies to icon variant',
      if: { arg: 'variant', eq: 'icon' },
      table: {
        type: { summary: "'sm' | 'md' | 'lg'" },
        category: 'Icon Variant',
      },
    },
    className: {
      control: 'text',
      description: 'Additional CSS classes for styling',
      table: {
        type: { summary: 'string' },
        category: 'Styling',
      },
    },
  },
} satisfies Meta<typeof LazyIllustration>

export default meta

type Story = StoryObj<typeof LazyIllustration>

/**
 * Basic usage of the LazyIllustration component with a picture variant.
 * Simply provide the name of the illustration you want to load.
 */
export const Primary: Story = {
  args: {
    variant: 'picture',
    name: 'Binoculars',
    className: 'uy:size-[150px]',
    alt: 'Binoculars Illustration',
  },
}

/**
 * You can create responsive illustrations that adapt to different screen sizes by using responsive
 * Tailwind classes in the `className` prop. Set the `alt` prop to provide accessible descriptions
 * for screen readers when using the picture variant.
 */
export const IllustratedPicture: Story = {
  args: {
    variant: 'picture',
    name: 'VisuallyImpaired',
    className: 'uy:size-[50vmin]',
    alt: 'Visually impaired person illustration',
  },
}

/**
 * You can use the LazyIllustration component with the icon variant as well.
 * Specify the size prop to control the dimensions of the icon.
 */
export const IconVariant: Story = {
  args: {
    variant: 'icon',
    name: 'Binoculars',
    size: 'md',
    alt: 'Binoculars Illustration',
  },
}

/**
 * You can create responsive illustrations that adapt to different screen sizes
 * by using responsive Tailwind classes in the className prop.
 */
export const Responsive: Story = {
  args: {
    variant: 'picture',
    name: 'WriteBook',
    className: 'uy:size-[50vmin]',
    alt: 'Write Book Illustration',
  },
}

/**
 * You can use animated illustrations with the LazyIllustration component. Animated illustrations
 * have the `Animation` suffix and are automatically loaded with their fluid sizing behavior.
 * The component detects animated assets and applies maximum dimension constraints to prevent oversizing.
 */
export const AnimatedIllustrations: Story = {
  parameters: {
    chromatic: { disableSnapshot: true },
  },
  args: {
    variant: 'picture',
    name: 'AccountingAnimation',
    alt: 'Accounting animation showing financial calculations',
  },
}