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

import { Stack } from './Stack';

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

function Item({ lines, ...rest }: { lines: number }) {
  return (
    <div
      {...rest}
      style={{
        backgroundColor: 'rgba(0 0 0 / 0.05)',
        color: 'rgba(0 0 0 / 0.33)',
        padding: '1rem',
        textAlign: 'center',
      }}
    >
      {Array.from({ length: lines }).map((_, index) => (
        <div key={index}>Line {index + 1}</div>
      ))}
    </div>
  );
}

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

export const Default: Story = {
  args: {},
  render: props => (
    <Stack {...props}>
      <Item lines={5} />
      <Item lines={4} />
      <Item lines={3} />
      <Item lines={2} />
      <Item lines={1} />
    </Stack>
  ),
};

export const Vertical: Story = {
  args: {
    orientation: 'vertical',
  },
  render: props => (
    <Stack {...props}>
      <Item lines={5} />
      <Item lines={4} />
      <Item lines={3} />
      <Item lines={2} />
      <Item lines={1} />
    </Stack>
  ),
};

export const FullScreenCentered: Story = {
  args: {
    align: 'center',
    grow: true,
    justify: 'center',
    orientation: 'vertical',
  },
  render: props => (
    <Stack {...props}>
      <Item lines={5} />
      <Item lines={4} />
      <Item lines={3} />
      <Item lines={2} />
      <Item lines={1} />
    </Stack>
  ),
  decorators: [
    Story => (
      <>
        <style>{`#story--components-flex--screen-centered-inner {
          display: flex;
          flex-direction: column;
          min-height: 100vh;
        }`}</style>
        <Story />
      </>
    ),
  ],
};