import type { Meta, StoryObj } from '@storybook/react';
import VerticalMenu from '../index.js';
import { VerticalMenuProps } from '../types.js';
import { withVerticalMenuStyles } from './VerticalMenuDecorator.js';
import { SBContainer, SBFocusWrapper } from '@sb-utils';
import { dummyMenuData } from '../../_dummyMenuData.js';

const meta: Meta<VerticalMenuProps> = {
  title: 'Component Library/Menu/Vertical Menu',
  component: VerticalMenu,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'The VerticalMenu component creates a vertical navigation menu with collapsible nested submenus. It supports depth control and custom indentation, making it ideal for sidebars and secondary navigation.',
      },
    },
  },
  decorators: [withVerticalMenuStyles],
};

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

export const Default: Story = {
  render: () => (
    <SBContainer addBackground width="300px">
      <VerticalMenu menuData={dummyMenuData} />
    </SBContainer>
  ),
};

export const MaxDepthControl: Story = {
  name: 'Max Depth Control',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge">
      <SBContainer addBackground width="300px">
        <h4>No Depth Limit (Default)</h4>
        <p>Shows all nested menu levels</p>
        <VerticalMenu menuData={dummyMenuData} />
      </SBContainer>

      <SBContainer addBackground width="300px">
        <h4>Max Depth: 1</h4>
        <p>Only shows top-level items</p>
        <VerticalMenu maxDepth={1} menuData={dummyMenuData} />
      </SBContainer>

      <SBContainer addBackground width="300px">
        <h4>Max Depth: 2</h4>
        <p>Shows up to 2 levels deep</p>
        <VerticalMenu maxDepth={2} menuData={dummyMenuData} />
      </SBContainer>

      <SBContainer addBackground width="300px">
        <h4>Max Depth: 3</h4>
        <p>Shows up to 3 levels deep</p>
        <VerticalMenu maxDepth={3} menuData={dummyMenuData} />
      </SBContainer>
    </SBContainer>
  ),
};

export const IndentationOptions: Story = {
  name: 'Indentation Options',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge">
      <SBContainer addBackground width="300px">
        <h4>Default Indentation (20px)</h4>
        <VerticalMenu menuData={dummyMenuData} />
      </SBContainer>

      <SBContainer addBackground width="300px">
        <h4>No Indentation</h4>
        <VerticalMenu indentation="0px" menuData={dummyMenuData} />
      </SBContainer>

      <SBContainer addBackground width="300px">
        <h4>Small Indentation (10px)</h4>
        <VerticalMenu indentation="10px" menuData={dummyMenuData} />
      </SBContainer>

      <SBContainer addBackground width="300px">
        <h4>Large Indentation (40px)</h4>
        <VerticalMenu indentation="40px" menuData={dummyMenuData} />
      </SBContainer>
    </SBContainer>
  ),
};

export const ColorCustomization: Story = {
  name: 'Color Customization',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge">
      <SBContainer addBackground width="300px">
        <h4>Default Colors</h4>
        <VerticalMenu menuData={dummyMenuData} />
      </SBContainer>

      <SBContainer addBackground width="300px">
        <h4>Bold Link Colors</h4>
        <VerticalMenu
          linkColor="#1a1a1a"
          linkColorHover="#ff5722"
          backgroundColor="#fff3e0"
          backgroundColorHover="#ffe0b2"
          menuData={dummyMenuData}
        />
      </SBContainer>

      <SBContainer addBackground width="300px">
        <h4>Vibrant Theme</h4>
        <VerticalMenu
          linkColor="#ffffff"
          linkColorHover="#ffeb3b"
          backgroundColor="#1976d2"
          backgroundColorHover="#1565c0"
          submenuLinkColor="#e3f2fd"
          submenuLinkColorHover="#ffeb3b"
          submenuBackgroundColor="#0d47a1"
          submenuBackgroundColorHover="#01579b"
          indentation="30px"
          menuData={dummyMenuData}
        />
      </SBContainer>

      <SBContainer addBackground width="300px">
        <h4>High Contrast</h4>
        <VerticalMenu
          linkColor="#000000"
          linkColorHover="#d32f2f"
          backgroundColor="#ffeb3b"
          backgroundColorHover="#fdd835"
          submenuLinkColor="#1a1a1a"
          submenuLinkColorHover="#c62828"
          submenuBackgroundColor="#fff59d"
          submenuBackgroundColorHover="#fff176"
          indentation="30px"
          menuData={dummyMenuData}
        />
      </SBContainer>

      <SBContainer
        flex
        justifyContent="center"
        style={{
          backgroundColor: '#0a0a0a',
          padding: '20px',
          minHeight: '400px',
        }}
      >
        <SBContainer width="300px">
          <h4 style={{ color: '#ffffff', marginTop: 0 }}>Dark Theme</h4>
          <VerticalMenu
            linkColor="#e0e0e0"
            linkColorHover="#00e676"
            backgroundColor="#212121"
            backgroundColorHover="#424242"
            submenuLinkColor="#9e9e9e"
            submenuLinkColorHover="#69f0ae"
            submenuBackgroundColor="#1a1a1a"
            submenuBackgroundColorHover="#2c2c2c"
            indentation="30px"
            menuData={dummyMenuData}
          />
        </SBContainer>
      </SBContainer>
    </SBContainer>
  ),
};

export const FocusState: Story = {
  name: 'Focus State',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground width="300px">
        <h4>Focus State</h4>
        <p>
          In production, this focus outline appears when navigating with the
          keyboard (Tab key). This Storybook demo auto-applies the focus state
          to show how it looks.
        </p>
        <SBFocusWrapper>
          <VerticalMenu menuData={dummyMenuData} />
        </SBFocusWrapper>
      </SBContainer>
    </SBContainer>
  ),
};

export const SidebarExample: Story = {
  name: 'In Context',
  render: () => (
    <SBContainer
      flex
      direction="row"
      style={{
        minHeight: '600px',
        border: '1px solid #cbd6e2',
      }}
    >
      <SBContainer
        width="280px"
        style={{
          backgroundColor: '#f5f8fa',
          borderRight: '1px solid #cbd6e2',
          padding: '20px 0',
        }}
      >
        <VerticalMenu
          linkColor="#33475b"
          linkColorHover="#0066cc"
          backgroundColor="transparent"
          backgroundColorHover="#ffffff"
          submenuLinkColor="#516f90"
          submenuLinkColorHover="#0066cc"
          submenuBackgroundColor="transparent"
          submenuBackgroundColorHover="#eaf0f6"
          indentation="24px"
          menuData={dummyMenuData}
        />
      </SBContainer>
      <SBContainer
        style={{
          flex: 1,
          padding: '40px',
          backgroundColor: '#ffffff',
        }}
      >
        <h2>Main Content Area</h2>
        <p>
          This demonstrates how the vertical menu works in a sidebar layout.
        </p>
        <p>
          The sidebar navigation provides easy access to different sections
          while the main content area remains spacious.
        </p>
      </SBContainer>
    </SBContainer>
  ),
};
