import type { Meta, StoryObj } from '@storybook/react';
import List, { ListItem } from '../index.js';
import { ListProps } from '../types.js';
import { withListStyles } from './ListDecorator.js';
import { SBContainer } from '@sb-utils/SBContainer.js';

const meta: Meta<ListProps> = {
  title: 'Component Library/List',
  component: List,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'The List component creates ordered (numbered) or unordered (bulleted) lists with consistent styling and spacing.',
      },
    },
  },
  decorators: [withListStyles],
};

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

export const Default: Story = {
  args: {
    listType: 'unordered',
    variant: 'primary',
    gap: '0',
    showMarker: true,
  },
  render: args => (
    <List {...args}>
      <ListItem>First item</ListItem>
      <ListItem>Second item</ListItem>
      <ListItem>Third item</ListItem>
    </List>
  ),
};

export const OrderedList: Story = {
  name: 'Ordered List',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Numbered List</h4>
        <List listType="ordered" variant="primary">
          <ListItem>First step</ListItem>
          <ListItem>Second step</ListItem>
          <ListItem>Third step</ListItem>
        </List>
      </SBContainer>
    </SBContainer>
  ),
};

export const UnorderedList: Story = {
  name: 'Unordered List',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Bulleted List</h4>
        <List listType="unordered" variant="primary">
          <ListItem>First item</ListItem>
          <ListItem>Second item</ListItem>
          <ListItem>Third item</ListItem>
        </List>
      </SBContainer>
    </SBContainer>
  ),
};

export const DynamicRendering: Story = {
  name: 'Dynamic Rendering (Real-World Pattern)',
  render: () => {
    const features = [
      { text: 'Easy drag-and-drop interface' },
      { text: 'Real-time collaboration' },
      { text: 'Advanced analytics dashboard' },
      { text: 'Custom branding options' },
      { text: '24/7 customer support' },
    ];

    const steps = [
      { text: 'Sign up for a free account' },
      { text: 'Complete your profile information' },
      { text: 'Choose your subscription plan' },
      { text: 'Start building your first project' },
    ];

    return (
      <SBContainer flex direction="column" gap="large">
        <SBContainer addBackground>
          <h4>Feature List (Mapped from Array)</h4>
          <List listType="unordered" variant="primary">
            {features.map((item, index) => (
              <ListItem key={index}>{item.text}</ListItem>
            ))}
          </List>
        </SBContainer>

        <SBContainer addBackground>
          <h4>Step-by-Step Instructions</h4>
          <List listType="ordered" variant="primary">
            {steps.map((item, index) => (
              <ListItem key={index}>{item.text}</ListItem>
            ))}
          </List>
        </SBContainer>
      </SBContainer>
    );
  },
};

export const NoMarkers: Story = {
  name: 'List without Markers',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Unordered List (No Markers)</h4>
        <List listType="unordered" variant="primary" showMarker={false}>
          <ListItem>First item without bullet</ListItem>
          <ListItem>Second item without bullet</ListItem>
          <ListItem>Third item without bullet</ListItem>
        </List>
      </SBContainer>
      <SBContainer addBackground>
        <h4>Ordered List (No Markers)</h4>
        <List listType="ordered" variant="primary" showMarker={false}>
          <ListItem>First step without number</ListItem>
          <ListItem>Second step without number</ListItem>
          <ListItem>Third step without number</ListItem>
        </List>
      </SBContainer>
    </SBContainer>
  ),
};

export const Spacing: Story = {
  name: 'List Spacing',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Default Spacing (gap 0 but inherits li styles)</h4>
        <List listType="unordered" variant="primary">
          <ListItem>Default item one</ListItem>
          <ListItem>Default item two</ListItem>
          <ListItem>Default item three</ListItem>
        </List>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Generous Spacing (1rem)</h4>
        <List listType="unordered" variant="primary" gap="1rem">
          <ListItem>Generous item one</ListItem>
          <ListItem>Generous item two</ListItem>
          <ListItem>Generous item three</ListItem>
        </List>
      </SBContainer>
    </SBContainer>
  ),
};

export const NestedLists: Story = {
  name: 'Nested Lists',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Nested Unordered Lists</h4>
        <List listType="unordered" variant="primary">
          <ListItem>Parent item one</ListItem>
          <li>
            Parent item two
            <List listType="unordered" variant="primary">
              <ListItem>Child item one</ListItem>
              <ListItem>Child item two</ListItem>
            </List>
          </li>
          <ListItem>Parent item three</ListItem>
          <li>
            Parent item four
            <List listType="unordered" variant="primary">
              <ListItem>Child item one</ListItem>
              <ListItem>Child item two</ListItem>
            </List>
          </li>
        </List>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Nested Ordered Lists</h4>
        <List listType="ordered" variant="primary">
          <ListItem>Step one</ListItem>
          <li>
            Step two
            <List listType="ordered" variant="secondary" gap="0.25rem">
              <ListItem>Sub-step A</ListItem>
              <ListItem>Sub-step B</ListItem>
            </List>
          </li>
          <ListItem>Step three</ListItem>
          <ListItem>Step four</ListItem>
          <li>
            Step five
            <List listType="ordered" variant="secondary" gap="0.25rem">
              <ListItem>Sub-step A</ListItem>
              <ListItem>Sub-step B</ListItem>
            </List>
          </li>
        </List>
      </SBContainer>
    </SBContainer>
  ),
};

export const EdgeCases: Story = {
  name: 'Edge Cases',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Long Text Content</h4>
        <List listType="unordered" variant="primary">
          <ListItem>
            This is a very long list item that demonstrates how the component
            handles overflow and wrapping of content across multiple lines when
            the text becomes too long to fit on a single line.
          </ListItem>
          <ListItem>
            Another extremely long list item with lots of text to show the
            wrapping behavior and how the component maintains proper spacing and
            alignment even when the content spans multiple lines in the list
            item element.
          </ListItem>
        </List>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Empty List (has no ListItem children)</h4>
        <List listType="unordered" variant="primary" />
      </SBContainer>

      <SBContainer addBackground>
        <h4>Single Item</h4>
        <List listType="unordered" variant="primary">
          <ListItem>Only one item</ListItem>
        </List>
      </SBContainer>
    </SBContainer>
  ),
};
