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

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

import { responsivePropEnum, USPCard } from './USPCard';

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

const exampleArgs = {
  image: generateSvgPlaceholder(640, 480),
  description:
    'Nam fermentum, arcu consectetur accumsan elementum, mauris ipsum ultricies nulla, sed varius massa mi porttitor augue. Vestibulum finibus, arcu sed luctus aliquet, quam lorem accumsan dui, eget sollicitudin felis risus id arcu.',
  title: 'Lorem ipsum dolor sit amet',
  responsive: true,
};

export default meta;
type Story = StoryObj<typeof USPCard>;

export const Default: Story = {
  args: exampleArgs,
  argTypes: {
    responsive: {
      control: { type: 'radio' },
      options: responsivePropEnum,
    },
  },
};

export const NoImage: Story = {
  args: {
    title: exampleArgs.title,
    description: exampleArgs.description,
  },
};

export const ThreeColumns: Story = {
  args: {
    title: exampleArgs.title,
    description: exampleArgs.description,
    image: exampleArgs.image,
    responsive: false,
  },
  render: props => (
    <>
      <USPCard {...props} />
      <USPCard {...props} />
      <USPCard {...props} />
    </>
  ),
  decorators: [
    Story => (
      <>
        <style>{`
          .responsive-columns {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
          }
          @media (min-width: 768px) {
            .responsive-columns {
              gap: 24px;
            }
            .responsive-columns > * {
              flex: 1;
              min-width: 0px;
              width: calc((100% - 2 * 24px) / 3);
            }
          }
        `}</style>
        <div className='responsive-columns'>
          <Story />
        </div>
      </>
    ),
  ],
};

export const OneReversed: Story = {
  args: {
    title: exampleArgs.title,
    description: exampleArgs.description,
    image: exampleArgs.image,
  },
  render: props => (
    <>
      <USPCard {...props} />
      <USPCard {...props} responsive='reversed' />
      <USPCard {...props} />
    </>
  ),
  decorators: [
    Story => (
      <div style={{ display: 'flex', flexDirection: 'column', gap: '1em' }}>
        <Story />
      </div>
    ),
  ],
};

export const WithContainedImage: Story = {
  args: { ...exampleArgs, imageFit: 'contain', image: generateSvgPlaceholder(400, 600) },
};

export const WithCoverImage: Story = {
  args: { ...exampleArgs, imageFit: 'cover', image: generateSvgPlaceholder(400, 600) },
};