import type { Meta, StoryObj } from '@storybook/react';
import LanguageSwitcher from '../index.js';
import { LanguageSwitcherProps } from '../types.js';
import { withLanguageSwitcherStyles } from './LanguageSwitcherDecorator.js';
import { SBContainer, SBFocusWrapper } from '@sb-utils';
import { dummyTranslations } from '../_dummyData.js';

const meta: Meta<LanguageSwitcherProps> = {
  title: 'Component Library/LanguageSwitcher',
  component: LanguageSwitcher,
  parameters: {
    layout: 'fullscreen',
    docs: {
      description: {
        component: `The LanguageSwitcher component provides a button and drawer interface for selecting different language variants of a page. It displays the current page language and opens a slide-out panel with all available language options. The component uses the Drawer component internally for the language selection panel.`,
      },
      story: {
        inline: false,
        iframeHeight: 500,
      },
    },
  },
  decorators: [withLanguageSwitcherStyles],
  argTypes: {
    languageSwitcherSelectText: {
      control: 'text',
      description: 'Text displayed in the drawer header',
      table: {
        category: 'Content',
        defaultValue: { summary: 'Select a language' },
      },
    },
    color: {
      control: 'object',
      description: 'Text color for button and menu items',
      table: {
        category: 'Visual',
      },
    },
    colorHover: {
      control: 'object',
      description: 'Text color for menu items on hover',
      table: {
        category: 'Visual',
      },
    },
    menuBackgroundColor: {
      control: 'object',
      description: 'Background color for the drawer',
      table: {
        category: 'Visual',
      },
    },
    menuBackgroundColorHover: {
      control: 'object',
      description: 'Background color for menu items on hover',
      table: {
        category: 'Visual',
      },
    },
    className: {
      control: 'text',
      description: 'Additional CSS classes',
      table: {
        category: 'Basic',
      },
    },
    style: {
      control: 'object',
      description: 'Inline styles',
      table: {
        category: 'Basic',
      },
    },
  },
};

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

export const Default: Story = {
  render: () => {
    return (
      <SBContainer>
        <LanguageSwitcher
          translations={dummyTranslations}
          languageSwitcherSelectText="Select a language"
        />
      </SBContainer>
    );
  },
};

export const ColorThemes: Story = {
  name: 'Color Themes',
  render: () => {
    const purpleTextColor = {
      rgba: 'rgba(139, 0, 139, 1)',
    };

    const purpleTextColorHover = {
      rgba: 'rgba(186, 85, 211, 1)',
    };

    const purpleMenuBgColor = {
      rgba: 'rgba(243, 229, 245, 1)',
    };

    const purpleMenuBgColorHover = {
      rgba: 'rgba(225, 190, 231, 1)',
    };

    const darkTextColor = {
      rgba: 'rgba(255, 255, 255, 0.9)',
    };

    const darkTextColorHover = {
      rgba: 'rgba(100, 181, 246, 1)',
    };

    const darkMenuBgColor = {
      rgba: 'rgba(33, 33, 33, 1)',
    };

    const darkMenuBgColorHover = {
      rgba: 'rgba(66, 66, 66, 1)',
    };

    return (
      <SBContainer flex direction="column" gap="large">
        <SBContainer addBackground>
          <h4>Purple Theme</h4>
          <p>Custom color theming with purple tones.</p>
          <SBContainer>
            <LanguageSwitcher
              translations={dummyTranslations}
              languageSwitcherSelectText="Wählen Sie eine Sprache"
              color={purpleTextColor}
              colorHover={purpleTextColorHover}
              menuBackgroundColor={purpleMenuBgColor}
              menuBackgroundColorHover={purpleMenuBgColorHover}
            />
          </SBContainer>
        </SBContainer>

        <SBContainer style={{ backgroundColor: '#121212' }}>
          <SBContainer style={{ marginBottom: '16px' }}>
            <h4 style={{ color: 'white', margin: '0 0 8px 0' }}>
              Dark Mode Theme
            </h4>
            <p style={{ color: 'white', margin: 0 }}>
              Language switcher optimized for dark backgrounds with high
              contrast colors.
            </p>
          </SBContainer>
          <SBContainer>
            <LanguageSwitcher
              translations={dummyTranslations}
              languageSwitcherSelectText="Select a language"
              color={darkTextColor}
              colorHover={darkTextColorHover}
              menuBackgroundColor={darkMenuBgColor}
              menuBackgroundColorHover={darkMenuBgColorHover}
            />
          </SBContainer>
        </SBContainer>
      </SBContainer>
    );
  },
};

export const CustomText: Story = {
  name: 'Custom Header Text',
  render: () => {
    return (
      <SBContainer flex direction="column" gap="large">
        <SBContainer addBackground>
          <h4>Different Languages for Header Text</h4>
          <p>
            The languageSwitcherSelectText prop can be customized to match your
            site's language or messaging.
          </p>
        </SBContainer>

        <SBContainer flex direction="row" gap="medium">
          <SBContainer>
            <p style={{ marginBottom: '12px' }}>
              <strong>🇬🇧 English:</strong>
            </p>
            <LanguageSwitcher
              translations={dummyTranslations}
              languageSwitcherSelectText="Select a language"
            />
          </SBContainer>

          <SBContainer>
            <p style={{ marginBottom: '12px' }}>
              <strong>🇩🇪 German:</strong>
            </p>
            <LanguageSwitcher
              translations={dummyTranslations}
              languageSwitcherSelectText="Sprache wählen"
            />
          </SBContainer>

          <SBContainer>
            <p style={{ marginBottom: '12px' }}>
              <strong>🇪🇸 Spanish:</strong>
            </p>
            <LanguageSwitcher
              translations={dummyTranslations}
              languageSwitcherSelectText="Seleccionar idioma"
            />
          </SBContainer>

          <SBContainer>
            <p style={{ marginBottom: '12px' }}>
              <strong>🇫🇷 French:</strong>
            </p>
            <LanguageSwitcher
              translations={dummyTranslations}
              languageSwitcherSelectText="Choisir une langue"
            />
          </SBContainer>
        </SBContainer>
      </SBContainer>
    );
  },
};

export const InContext: Story = {
  name: 'In Page Context',
  render: () => {
    return (
      <SBContainer style={{ minHeight: '100vh' }}>
        <header
          style={{
            backgroundColor: '#0066cc',
            color: 'white',
            padding: '16px 24px',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <SBContainer>
            <h1 style={{ margin: 0, fontSize: '24px', color: 'white' }}>
              My Website
            </h1>
            <p
              style={{
                margin: '4px 0 0 0',
                fontSize: '14px',
                opacity: 0.75,
                color: 'white',
              }}
            >
              Global multilingual site
            </p>
          </SBContainer>

          <nav
            style={{
              display: 'flex',
              gap: '24px',
              alignItems: 'center',
            }}
          >
            <a href="#home" style={{ color: 'white', textDecoration: 'none' }}>
              Home
            </a>
            <a href="#about" style={{ color: 'white', textDecoration: 'none' }}>
              About
            </a>
            <a
              href="#contact"
              style={{ color: 'white', textDecoration: 'none' }}
            >
              Contact
            </a>

            <div style={{ paddingTop: '6px' }}>
              <LanguageSwitcher
                translations={dummyTranslations}
                color={{ rgba: 'rgb(55, 245, 255)' }}
                colorHover={{ rgba: 'rgb(255, 255, 255)' }}
                menuBackgroundColor={{ rgba: 'rgba(100, 181, 246, 1)' }}
                menuBackgroundColorHover={{ rgba: 'rgba(0, 160, 240, 1)' }}
              />
            </div>
          </nav>
        </header>

        <main style={{ padding: '48px 24px' }}>
          <SBContainer addBackground>
            <h2>Welcome to our multilingual website</h2>
            <p>
              This example shows how the LanguageSwitcher component can be
              integrated into a typical website header with navigation elements.
            </p>
            <p style={{ marginTop: '16px' }}>
              The language switcher is positioned in the top right corner,
              making it easily accessible to users who want to change the site
              language.
            </p>
          </SBContainer>
        </main>
      </SBContainer>
    );
  },
};

export const InteractionStates: Story = {
  name: 'Interaction States',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Hover State</h4>
        <p>Hover over the language switcher button to see the hover effect</p>
        <LanguageSwitcher
          translations={dummyTranslations}
          languageSwitcherSelectText="Select a language"
        />
      </SBContainer>

      <SBContainer addBackground>
        <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>
          <LanguageSwitcher
            translations={dummyTranslations}
            languageSwitcherSelectText="Select a language"
          />
        </SBFocusWrapper>
      </SBContainer>
    </SBContainer>
  ),
};
