import type { Meta, StoryObj } from '@storybook/react';
import Flex from '../index.js';
import { FlexProps } from '../types.js';
import { withFlexStyles } from './FlexDecorator.js';
import { SBContainer } from '@sb-utils/SBContainer.js';
import { SBDemoBox } from '@sb-utils/SBDemoBox.js';

const meta: Meta<FlexProps> = {
  title: 'Component Library/Flex',
  component: Flex,
  parameters: {
    layout: 'centered',
    controls: { sort: 'alpha' },
    docs: {
      description: {
        component: `The Flex component is a flexible layout container that implements the CSS Flexbox API. It provides a consistent way to create flex layouts with customizable direction, alignment, spacing, and wrapping behavior.`,
      },
    },
  },
  decorators: [withFlexStyles],
};

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

export const Default: Story = {
  args: {
    direction: 'row',
    gap: '16px',
    children: (
      <>
        <SBDemoBox>Box 1</SBDemoBox>
        <SBDemoBox>Box 2</SBDemoBox>
        <SBDemoBox>Box 3</SBDemoBox>
      </>
    ),
  },
};

export const Directions: Story = {
  name: 'Flex Directions',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>Row (Default)</h4>
        <p>Items arranged horizontally from left to right</p>
        <Flex direction="row" gap="16px">
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Row Reverse</h4>
        <p>Items arranged horizontally from right to left</p>
        <Flex direction="row-reverse" gap="16px">
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Column</h4>
        <p>Items arranged vertically from top to bottom</p>
        <Flex direction="column" gap="16px">
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Column Reverse</h4>
        <p>Items arranged vertically from bottom to top</p>
        <Flex direction="column-reverse" gap="16px">
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>
    </SBContainer>
  ),
};

export const JustifyContent: Story = {
  name: 'Justify Content',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>Flex Start</h4>
        <Flex
          direction="row"
          justifyContent="flex-start"
          gap="8px"
          paddingInline="8px"
          paddingBlock="8px"
          style={{ border: '2px dashed #ccc' }}
        >
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Center</h4>
        <Flex
          direction="row"
          justifyContent="center"
          gap="8px"
          paddingInline="8px"
          paddingBlock="8px"
          style={{ border: '2px dashed #ccc' }}
        >
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Flex End</h4>
        <Flex
          direction="row"
          justifyContent="flex-end"
          gap="8px"
          paddingInline="8px"
          paddingBlock="8px"
          style={{ border: '2px dashed #ccc' }}
        >
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Space Between</h4>
        <Flex
          direction="row"
          justifyContent="space-between"
          gap="8px"
          paddingInline="8px"
          paddingBlock="8px"
          style={{ border: '2px dashed #ccc' }}
        >
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Space Around</h4>
        <Flex
          direction="row"
          justifyContent="space-around"
          gap="8px"
          paddingInline="8px"
          paddingBlock="8px"
          style={{ border: '2px dashed #ccc' }}
        >
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Space Evenly</h4>
        <Flex
          direction="row"
          justifyContent="space-evenly"
          gap="8px"
          paddingInline="8px"
          paddingBlock="8px"
          style={{ border: '2px dashed #ccc' }}
        >
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>
    </SBContainer>
  ),
};

export const AlignItems: Story = {
  name: 'Align Items',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>Stretch (Default)</h4>
        <p>Items stretch to fill the container height</p>
        <Flex
          direction="row"
          alignItems="stretch"
          gap="8px"
          paddingInline="8px"
          paddingBlock="8px"
          style={{ border: '2px dashed #ccc', height: '120px' }}
        >
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Flex Start</h4>
        <p>Items aligned to the start of the cross axis</p>
        <Flex
          direction="row"
          alignItems="flex-start"
          gap="8px"
          paddingInline="8px"
          paddingBlock="8px"
          style={{ border: '2px dashed #ccc', height: '120px' }}
        >
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox tall>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Center</h4>
        <p>Items centered along the cross axis</p>
        <Flex
          direction="row"
          alignItems="center"
          gap="8px"
          paddingInline="8px"
          paddingBlock="8px"
          style={{ border: '2px dashed #ccc', height: '120px' }}
        >
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox tall>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Flex End</h4>
        <p>Items aligned to the end of the cross axis</p>
        <Flex
          direction="row"
          alignItems="flex-end"
          gap="8px"
          paddingInline="8px"
          paddingBlock="8px"
          style={{ border: '2px dashed #ccc', height: '120px' }}
        >
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox tall>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Baseline</h4>
        <p>Items aligned to their text baseline</p>
        <Flex
          direction="row"
          alignItems="baseline"
          gap="8px"
          paddingInline="8px"
          paddingBlock="8px"
          style={{ border: '2px dashed #ccc', height: '120px' }}
        >
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox tall>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>
    </SBContainer>
  ),
};

export const Wrapping: Story = {
  name: 'Flex Wrap',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>No Wrap (Default)</h4>
        <p>Items stay on a single line, may overflow</p>
        <Flex
          direction="row"
          wrap="nowrap"
          gap="8px"
          paddingInline="8px"
          paddingBlock="8px"
          style={{
            border: '2px dashed #ccc',
            maxWidth: '300px',
          }}
        >
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
          <SBDemoBox>4</SBDemoBox>
          <SBDemoBox>5</SBDemoBox>
          <SBDemoBox>6</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Wrap</h4>
        <p>Items wrap to multiple lines as needed</p>
        <Flex
          direction="row"
          wrap="wrap"
          gap="8px"
          paddingInline="8px"
          paddingBlock="8px"
          style={{
            border: '2px dashed #ccc',
            maxWidth: '300px',
          }}
        >
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
          <SBDemoBox>4</SBDemoBox>
          <SBDemoBox>5</SBDemoBox>
          <SBDemoBox>6</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Wrap Reverse</h4>
        <p>Items wrap in reverse order</p>
        <Flex
          direction="row"
          wrap="wrap-reverse"
          gap="8px"
          paddingInline="8px"
          paddingBlock="8px"
          style={{
            border: '2px dashed #ccc',
            maxWidth: '300px',
          }}
        >
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
          <SBDemoBox>4</SBDemoBox>
          <SBDemoBox>5</SBDemoBox>
          <SBDemoBox>6</SBDemoBox>
        </Flex>
      </SBContainer>
    </SBContainer>
  ),
};

export const Gaps: Story = {
  name: 'Gap Spacing',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>No Gap</h4>
        <Flex direction="row">
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>8px Gap</h4>
        <Flex direction="row" gap="8px">
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>24px Gap</h4>
        <Flex direction="row" gap="24px">
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Separate Row and Column Gaps</h4>
        <p>16px row gap, 32px column gap</p>
        <Flex
          direction="row"
          wrap="wrap"
          gap="16px 32px"
          style={{ maxWidth: '300px' }}
        >
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
          <SBDemoBox>4</SBDemoBox>
          <SBDemoBox>5</SBDemoBox>
          <SBDemoBox>6</SBDemoBox>
        </Flex>
      </SBContainer>
    </SBContainer>
  ),
};

export const SemanticElements: Story = {
  name: 'Semantic HTML Elements',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>As Section</h4>
        <Flex as="section" direction="row" gap="16px">
          <SBDemoBox>Item 1</SBDemoBox>
          <SBDemoBox>Item 2</SBDemoBox>
          <SBDemoBox>Item 3</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>As Nav</h4>
        <Flex as="nav" direction="row" gap="16px">
          <SBDemoBox>Home</SBDemoBox>
          <SBDemoBox>About</SBDemoBox>
          <SBDemoBox>Contact</SBDemoBox>
        </Flex>
      </SBContainer>

      <SBContainer addBackground>
        <h4>As Article</h4>
        <Flex as="article" direction="column" gap="16px">
          <SBDemoBox>Header</SBDemoBox>
          <SBDemoBox>Content</SBDemoBox>
          <SBDemoBox>Footer</SBDemoBox>
        </Flex>
      </SBContainer>
    </SBContainer>
  ),
};

export const InlineFlex: Story = {
  name: 'Inline Flex',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>Regular Flex (Block Level)</h4>
        <p>Before flex container</p>
        <Flex direction="row" gap="8px">
          <SBDemoBox>1</SBDemoBox>
          <SBDemoBox>2</SBDemoBox>
          <SBDemoBox>3</SBDemoBox>
        </Flex>
        <p>After flex container</p>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Inline Flex</h4>
        <p>
          Before flex container{' '}
          <Flex inline direction="row" gap="8px">
            <SBDemoBox>1</SBDemoBox>
            <SBDemoBox>2</SBDemoBox>
            <SBDemoBox>3</SBDemoBox>
          </Flex>{' '}
          after flex container
        </p>
      </SBContainer>
    </SBContainer>
  ),
};
