import type { Meta, StoryObj } from '@storybook/react';
import Divider from '../index.js';
import { DividerProps } from '../types.js';
import { withDividerStyles } from './DividerDecorator.js';
import { SBContainer } from '@sb-utils/SBContainer.js';
import { SBCard } from '@sb-utils/SBCard.js';
import type { CSSVariables } from '../../utils/types.js';

const meta: Meta<DividerProps> = {
  title: 'Component Library/Divider',
  component: Divider,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: `The Divider component provides a visual separator between content sections. It supports both horizontal and vertical orientations with customizable styling options including line type, thickness, length, alignment, color, and spacing.`,
      },
    },
  },
  decorators: [withDividerStyles],
};

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

export const Default: Story = {
  args: {
    orientation: 'horizontal',
    borderStyle: 'solid',
    length: 100,
    thickness: 1,
    spacing: '16px',
  },
  render: args => (
    <SBContainer
      flex
      direction={args.orientation === 'vertical' ? 'row' : 'column'}
      alignItems="center"
      height={args.orientation === 'vertical' ? '100px' : 'auto'}
      width="100%"
    >
      <p style={{ margin: 0 }}>
        {args.orientation === 'vertical' ? 'Left content' : 'Content above'}
      </p>
      <Divider {...args} />
      <p style={{ margin: 0 }}>
        {args.orientation === 'vertical' ? 'Right content' : 'Content below'}
      </p>
    </SBContainer>
  ),
};

export const Colors: Story = {
  name: 'Colors',
  render: () => {
    const blueColor: CSSVariables = {
      '--hscl-divider-borderColor': '#3b82f6',
    };
    const greenColor: CSSVariables = {
      '--hscl-divider-borderColor': '#10b981',
    };
    const redColor: CSSVariables = {
      '--hscl-divider-borderColor': '#ef4444',
    };
    const transparentColor: CSSVariables = {
      '--hscl-divider-borderColor': 'rgba(0, 0, 0, 0.2)',
    };

    return (
      <SBContainer flex direction="column" gap="large" minWidth="400px">
        <SBContainer addBackground>
          <h4>Default (currentColor)</h4>
          <p>Inherits text color from parent</p>
          <Divider thickness={2} />
        </SBContainer>

        <SBContainer addBackground>
          <h4>Custom Color (Blue)</h4>
          <p>Use CSS variables to customize color</p>
          <Divider thickness={2} style={blueColor} />
        </SBContainer>

        <SBContainer addBackground>
          <h4>Custom Color (Green)</h4>
          <p>Any valid CSS color value works</p>
          <Divider thickness={2} style={greenColor} />
        </SBContainer>

        <SBContainer addBackground>
          <h4>Custom Color (Red)</h4>
          <p>Great for error states or warnings</p>
          <Divider thickness={2} style={redColor} />
        </SBContainer>

        <SBContainer addBackground>
          <h4>Semi-transparent</h4>
          <p>Use rgba for transparency effects</p>
          <Divider thickness={2} style={transparentColor} />
        </SBContainer>
      </SBContainer>
    );
  },
};

export const BorderStyles: Story = {
  name: 'Border Styles',
  render: () => (
    <SBContainer flex direction="column" gap="large" minWidth="400px">
      <SBContainer addBackground>
        <h4>Solid</h4>
        <p>Default style for most use cases</p>
        <Divider borderStyle="solid" thickness={1} />
      </SBContainer>

      <SBContainer addBackground>
        <h4>Dashed</h4>
        <p>Creates a dashed line pattern</p>
        <Divider borderStyle="dashed" thickness={2} />
      </SBContainer>

      <SBContainer addBackground>
        <h4>Dotted</h4>
        <p>Creates a dotted line pattern</p>
        <Divider borderStyle="dotted" thickness={2} />
      </SBContainer>

      <SBContainer addBackground>
        <h4>Double</h4>
        <p>Creates a double line (requires thickness of at least 3px)</p>
        <Divider borderStyle="double" thickness={4} />
      </SBContainer>
    </SBContainer>
  ),
};

export const Thickness: Story = {
  name: 'Thickness Variations',
  render: () => (
    <SBContainer flex direction="column" gap="large" minWidth="400px">
      <SBContainer addBackground>
        <h4>1px (Default)</h4>
        <Divider thickness={1} />
      </SBContainer>

      <SBContainer addBackground>
        <h4>2px</h4>
        <Divider thickness={2} />
      </SBContainer>

      <SBContainer addBackground>
        <h4>4px</h4>
        <Divider thickness={4} />
      </SBContainer>

      <SBContainer addBackground>
        <h4>8px</h4>
        <Divider thickness={8} />
      </SBContainer>
    </SBContainer>
  ),
};

export const Length: Story = {
  name: 'Length Variations',
  render: () => (
    <SBContainer flex direction="column" gap="large" minWidth="400px">
      <SBContainer addBackground>
        <h4>100% (Full Width)</h4>
        <Divider length={100} thickness={1} />
      </SBContainer>

      <SBContainer addBackground>
        <h4>75%</h4>
        <Divider length={75} thickness={1} />
      </SBContainer>

      <SBContainer addBackground>
        <h4>50%</h4>
        <Divider length={50} thickness={1} />
      </SBContainer>

      <SBContainer addBackground>
        <h4>25%</h4>
        <Divider length={25} thickness={1} />
      </SBContainer>
    </SBContainer>
  ),
};

export const Alignment: Story = {
  name: 'Alignment Options',
  render: () => (
    <SBContainer flex direction="column" gap="large" minWidth="400px">
      <SBContainer addBackground flex>
        <h4>Stretch (Default)</h4>
        <p>Divider stretches to fill available space</p>
        <Divider length={100} thickness={1} />
      </SBContainer>

      <SBContainer addBackground flex>
        <h4>Left</h4>
        <p>Divider aligns to the left</p>
        <Divider
          length={50}
          thickness={1}
          alignment={{ horizontal_align: 'LEFT' }}
        />
      </SBContainer>

      <SBContainer addBackground flex>
        <h4>Center</h4>
        <p>Divider aligns to the center</p>
        <Divider
          length={50}
          thickness={1}
          alignment={{ horizontal_align: 'CENTER' }}
        />
      </SBContainer>

      <SBContainer addBackground flex>
        <h4>Right</h4>
        <p>Divider aligns to the right</p>
        <Divider
          length={50}
          thickness={1}
          alignment={{ horizontal_align: 'RIGHT' }}
        />
      </SBContainer>
    </SBContainer>
  ),
};

export const Spacing: Story = {
  name: 'Spacing Variations',
  render: () => (
    <SBContainer flex direction="column" gap="large" minWidth="400px">
      <SBContainer addBackground>
        <h4>8px Spacing</h4>
        <p>Tight spacing for compact layouts</p>
        <Divider spacing="8px" thickness={1} />
        <p>Content after divider</p>
      </SBContainer>

      <SBContainer addBackground>
        <h4>16px Spacing (Default)</h4>
        <p>Standard spacing for most use cases</p>
        <Divider spacing="16px" thickness={1} />
        <p>Content after divider</p>
      </SBContainer>

      <SBContainer addBackground>
        <h4>32px Spacing</h4>
        <p>Generous spacing for section breaks</p>
        <Divider spacing="32px" thickness={1} />
        <p>Content after divider</p>
      </SBContainer>

      <SBContainer addBackground>
        <h4>48px Spacing</h4>
        <p>Large spacing for major section divisions</p>
        <Divider spacing="48px" thickness={1} />
        <p>Content after divider</p>
      </SBContainer>
    </SBContainer>
  ),
};

export const Vertical: Story = {
  name: 'Vertical Orientation',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Vertical Divider</h4>
        <p>Used to separate inline or side-by-side content</p>
        <SBContainer flex direction="row" alignItems="center" height="80px">
          <span>Left Content</span>
          <Divider orientation="vertical" thickness={1} spacing="16px" />
          <span>Right Content</span>
        </SBContainer>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Vertical with Different Lengths</h4>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            height: '100px',
            gap: '24px',
          }}
        >
          <div
            style={{ display: 'flex', alignItems: 'center', height: '100%' }}
          >
            <span>100%</span>
            <Divider
              orientation="vertical"
              thickness={1}
              length={100}
              spacing="8px"
            />
          </div>
          <div
            style={{ display: 'flex', alignItems: 'center', height: '100%' }}
          >
            <span>75%</span>
            <Divider
              orientation="vertical"
              thickness={1}
              length={75}
              spacing="8px"
            />
          </div>
          <div
            style={{ display: 'flex', alignItems: 'center', height: '100%' }}
          >
            <span>50%</span>
            <Divider
              orientation="vertical"
              thickness={1}
              length={50}
              spacing="8px"
            />
          </div>
        </div>
      </SBContainer>
    </SBContainer>
  ),
};

export const VerticalAlignment: Story = {
  name: 'Vertical Alignment Options',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Top</h4>
        <p>Divider aligns to the top</p>
        <div
          style={{
            display: 'flex',
            flexDirection: 'row',
            height: '100px',
          }}
        >
          <span>Left</span>
          <Divider
            orientation="vertical"
            length={50}
            thickness={1}
            alignment={{ vertical_align: 'TOP' }}
            spacing="16px"
          />
          <span>Right</span>
        </div>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Middle</h4>
        <p>Divider aligns to the middle</p>
        <div
          style={{
            display: 'flex',
            flexDirection: 'row',
            height: '100px',
          }}
        >
          <span>Left</span>
          <Divider
            orientation="vertical"
            length={50}
            thickness={1}
            alignment={{ vertical_align: 'MIDDLE' }}
            spacing="16px"
          />
          <span>Right</span>
        </div>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Bottom</h4>
        <p>Divider aligns to the bottom</p>
        <div
          style={{
            display: 'flex',
            flexDirection: 'row',
            height: '100px',
          }}
        >
          <span>Left</span>
          <Divider
            orientation="vertical"
            length={50}
            thickness={1}
            alignment={{ vertical_align: 'BOTTOM' }}
            spacing="16px"
          />
          <span>Right</span>
        </div>
      </SBContainer>
    </SBContainer>
  ),
};

export const VerticalBorderStyles: Story = {
  name: 'Vertical Border Styles',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Vertical Border Style Variations</h4>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            height: '80px',
            gap: '16px',
          }}
        >
          <span>Solid</span>
          <Divider
            orientation="vertical"
            borderStyle="solid"
            thickness={1}
            spacing="8px"
          />
          <span>Dashed</span>
          <Divider
            orientation="vertical"
            borderStyle="dashed"
            thickness={2}
            spacing="8px"
          />
          <span>Dotted</span>
          <Divider
            orientation="vertical"
            borderStyle="dotted"
            thickness={2}
            spacing="8px"
          />
          <span>Double</span>
          <Divider
            orientation="vertical"
            borderStyle="double"
            thickness={4}
            spacing="8px"
          />
          <span>End</span>
        </div>
      </SBContainer>
    </SBContainer>
  ),
};

export const InContext: Story = {
  name: 'In Context',
  render: () => (
    <SBContainer flex direction="column" gap="medium" maxWidth="600px">
      <SBContainer addBackground>
        <h4>Article Section Divider</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <Divider thickness={1} spacing="24px" />
        <p>
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.
        </p>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Card Footer Divider</h4>
        <SBCard title="Card Title" width="400px">
          <p style={{ margin: '0 0 16px 0' }}>
            Card content goes here with some descriptive text.
          </p>
          <Divider thickness={1} spacing="12px" />
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              marginTop: '12px',
            }}
          >
            <span>Footer left</span>
            <span>Footer right</span>
          </div>
        </SBCard>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Navigation Divider</h4>
        <SBContainer
          flex
          direction="row"
          alignItems="center"
          gap="small"
          height="40px"
        >
          <a href="#" style={{ textDecoration: 'none', color: '#0066cc' }}>
            Home
          </a>
          <Divider orientation="vertical" thickness={1} spacing="0px" />
          <a href="#" style={{ textDecoration: 'none', color: '#0066cc' }}>
            Products
          </a>
          <Divider orientation="vertical" thickness={1} spacing="0px" />
          <a href="#" style={{ textDecoration: 'none', color: '#0066cc' }}>
            About
          </a>
          <Divider orientation="vertical" thickness={1} spacing="0px" />
          <a href="#" style={{ textDecoration: 'none', color: '#0066cc' }}>
            Contact
          </a>
        </SBContainer>
      </SBContainer>
    </SBContainer>
  ),
};
