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

import { generateSvgPlaceholder } from '../../utils/storybook';
import { Button } from '../Button/Button';
import { CTABanner } from '../CTABanner/CTABanner';
import { H2 } from '../Typography/H2/H2';
import { Paragraph } from '../Typography/Paragraph/Paragraph';
import { USPCard } from '../USPCard/USPCard';

import { Grid } from './Grid';

const meta: Meta<typeof Grid> = {
  title: 'UI kit/Layout/Grid',
  component: Grid,
  tags: ['autodocs'],
  argTypes: {
    maxWidth: {
      control: { type: 'radio' },
      options: [false, 'large', 'medium', 'fit'],
    },
    columns: {
      control: { type: 'radio' },
      options: [1, 2, 3, 4],
    },
    gap: {
      control: { type: 'radio' },
      options: [true, false, 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
    },
    padding: {
      control: { type: 'radio' },
      options: [true, 'vertical', 'horizontal', false],
    },
  },
};

function Item({ children, ...rest }: { children: React.ReactNode }) {
  return (
    <div
      {...rest}
      style={{
        backgroundColor: 'rgba(0 0 0 / 0.05)',
        color: 'rgba(0 0 0 / 0.33)',
        padding: '1rem',
        textAlign: 'center',
      }}
    >
      Example item {children}
    </div>
  );
}

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

export const Default: Story = {
  args: {
    columns: 3,
    gap: true,
    maxWidth: false,
  },
  render: props => (
    <Grid {...props}>
      <Item>1</Item>
      <Item>2</Item>
      <Item>3</Item>
      <Item>4</Item>
      <Item>5</Item>
      <Item>6</Item>
      <Item>7</Item>
      <Item>8</Item>
      <Item>9</Item>
      <Item>10</Item>
      <Item>11</Item>
      <Item>12</Item>
    </Grid>
  ),
};

export const LandingPage: Story = {
  render: () => (
    <Grid gap='4xl' responsive={false} maxWidth='large'>
      <CTABanner
        action='Click here'
        title='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        description='Proin ultrices quam eget ante fermentum, a aliquam massa vulputate. Suspendisse lacinia sapien leo, ac porttitor quam ornare eu.'
      />

      <Grid maxWidth='large' columns={3} padding='vertical'>
        <Grid gap='md'>
          <H2 divider={false}>Column 1</H2>
          <Paragraph>
            Cras efficitur lectus vitae ante placerat, eget mattis ipsum auctor. Maecenas ac turpis non risus luctus
            convallis.
          </Paragraph>
        </Grid>
        <Grid gap='md'>
          <H2 divider={false}>Column 2</H2>
          <Paragraph>
            Cras efficitur lectus vitae ante placerat, eget mattis ipsum auctor. Maecenas ac turpis non risus luctus
            convallis.
          </Paragraph>
        </Grid>
        <Grid gap='md'>
          <H2 divider={false}>Column 3</H2>
          <Paragraph>
            Cras efficitur lectus vitae ante placerat, eget mattis ipsum auctor. Maecenas ac turpis non risus luctus
            convallis.
          </Paragraph>
        </Grid>
        <Grid gap='md'>
          <H2 divider={false}>Column 4</H2>
          <Paragraph>
            Cras efficitur lectus vitae ante placerat, eget mattis ipsum auctor. Maecenas ac turpis non risus luctus
            convallis.
          </Paragraph>
        </Grid>
        <Grid gap='md'>
          <H2 divider={false}>Column 5</H2>
          <Paragraph>
            Cras efficitur lectus vitae ante placerat, eget mattis ipsum auctor. Maecenas ac turpis non risus luctus
            convallis.
          </Paragraph>
        </Grid>
        <Grid gap='md'>
          <H2 divider={false}>Column 6</H2>
          <Paragraph>
            Cras efficitur lectus vitae ante placerat, eget mattis ipsum auctor. Maecenas ac turpis non risus luctus
            convallis.
          </Paragraph>
        </Grid>
      </Grid>

      <Grid gap={false} responsive={false}>
        <Grid padding='vertical' gap='md' maxWidth='medium' responsive={false}>
          <H2 appearance='h1' align='center'>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </H2>
          <Paragraph>
            Proin ultrices quam eget ante fermentum, a aliquam massa vulputate. Suspendisse lacinia sapien leo, ac
            porttitor quam ornare eu. Aliquam fermentum, tortor ac sagittis maximus, quam ante interdum erat, eu
            lobortis libero ante quis sapien. Nullam mauris risus, porta a mauris at, dapibus rutrum diam. Cras
            efficitur lectus vitae ante placerat, eget mattis ipsum auctor. Maecenas ac turpis non risus luctus
            convallis.
          </Paragraph>
        </Grid>

        <Grid padding='vertical' maxWidth='medium'>
          <img src={generateSvgPlaceholder(1200, 900)} alt='Placeholder' />
        </Grid>

        <Grid columns={2} maxWidth='fit' responsive={true} padding='vertical'>
          <Button size='md' variant='secondary'>
            Secondary CTA Button
          </Button>
          <Button size='md' variant='primary'>
            Primary Action
          </Button>
        </Grid>
      </Grid>

      <Grid gap='4xl' responsive={false} maxWidth='medium' padding='vertical'>
        <USPCard
          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'
        />
        <USPCard
          responsive='reversed'
          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'
        />
        <USPCard
          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'
        />
      </Grid>
    </Grid>
  ),
};