import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { LanguageSelector } from './LanguageSelector';
import {
  LanguageProvider,
  DEFAULT_LANGUAGES,
  type LanguageDefinition,
} from '../../../contexts/LanguageContext';

// ── Decorators ────────────────────────────────────────────────────────────────
// The global Storybook preview decorator (.storybook/preview.tsx) already wraps
// every story with <QueryClientProvider> and <XerticaProvider> (which includes
// <I18nextProvider> and <LanguageProvider> with the default 3 languages).
//
// Stories that need to demonstrate a CUSTOM set of available languages override
// the inner LanguageProvider — this is allowed because contexts are scoped by
// the nearest matching Provider in the React tree.

function withLanguages(availableLanguages: LanguageDefinition[]) {
  return (Story: React.ComponentType) => (
    <LanguageProvider availableLanguages={availableLanguages}>
      <Story />
    </LanguageProvider>
  );
}

const meta: Meta<typeof LanguageSelector> = {
  title: 'Brand/LanguageSelector',
  component: LanguageSelector,
  parameters: {
    docs: {
      description: {
        component:
          'Language picker wired to `LanguageContext` and `i18next`. ' +
          'Selecting a language persists to `localStorage`, calls `i18n.changeLanguage()` — ' +
          'all `useTranslation()` consumers re-render immediately — and invalidates the ' +
          'React Query cache so mock/API responses also refresh. ' +
          'Auto-hides when only one language is configured.',
      },
    },
  },
};

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

// ── Basic appearance variants ────────────────────────────────────────────────

export const Default: Story = {
  args: {},
};

export const WithLabel: Story = {
  args: {
    showLabel: true,
  },
};

export const NoIcon: Story = {
  name: 'No Globe Icon',
  args: {
    showIcon: false,
  },
};

export const Minimal: Story = {
  args: {
    variant: 'minimal',
    showIcon: false,
  },
};

// ── Runtime language configuration ───────────────────────────────────────────

export const ExtendedWithFrench: Story = {
  name: 'Extended (with custom language)',
  decorators: [
    withLanguages([...DEFAULT_LANGUAGES, { code: 'fr', label: 'Français', shortLabel: 'FR' }]),
  ],
  parameters: {
    docs: {
      description: {
        story:
          'Demonstrates passing extra languages via `availableLanguages` on `<LanguageProvider>` / ' +
          '`<XerticaProvider>`. The selector picks them up automatically.',
      },
    },
  },
};

export const MonolingualAutoHidden: Story = {
  name: 'Monolingual (auto-hidden)',
  decorators: [withLanguages([{ code: 'en', label: 'English' }])],
  parameters: {
    docs: {
      description: {
        story:
          'When only one language is configured, the selector renders nothing. ' +
          'Pass `showWhenMonolingual` to force it to render.',
      },
    },
  },
};

export const MonolingualForced: Story = {
  name: 'Monolingual (showWhenMonolingual=true)',
  decorators: [withLanguages([{ code: 'en', label: 'English' }])],
  args: {
    showWhenMonolingual: true,
  },
};