/**
 * Storybook stories for `<Trans>`.
 *
 * The package does not declare a `@storybook/react` dependency (Storybook
 * lives in the testbed app, not in library packages). The story-meta
 * shapes are inlined as `interface Meta` / `interface StoryObj` so the
 * file can be consumed by any Storybook 7+/8+ config that auto-discovers
 * stories without forcing every library package to depend on the full
 * Storybook toolchain at install time.
 */

import type { TranslationRecord } from "@suaveplan/i18n";
import { createI18n, type I18nInstance } from "@suaveplan/i18n/plugin";
import type { ReactNode } from "react";
import { TranslationProvider } from "../../provider/provider.js";
import { Trans } from "./trans.js";
import type { TransProps } from "./trans.types.js";

interface Meta<T> {
    readonly component: T;
    readonly title: string;
    readonly tags?: readonly string[];
}

interface StoryObj<T> {
    readonly args?: Partial<TransProps>;
    readonly decorators?: ReadonlyArray<(Story: () => ReactNode) => ReactNode>;
    readonly render?: () => ReactNode;
    readonly name?: string;
    readonly _component?: T;
}

type LocaleKey = "en-GB" | "zh-CN" | "ar-AE" | "cy-GB" | "ru-RU";

const messages: Partial<Record<LocaleKey, TranslationRecord>> = {
    "en-GB": {
        welcome: "Hello <b>{name}</b>!",
        items: { one: "{count} item", other: "{count} items" },
    },
    "zh-CN": {
        welcome: "<b>{name}</b>，你好！",
        items: { one: "{count} 项", other: "{count} 项" },
    },
    "ar-AE": {
        welcome: "مرحبا <b>{name}</b>!",
        items: { one: "{count} عنصر", other: "{count} عناصر" },
    },
    "cy-GB": {
        welcome: "Helo <b>{name}</b>!",
        items: { one: "{count} eitem", other: "{count} eitemau" },
    },
    "ru-RU": {
        welcome: "Привет, <b>{name}</b>!",
        items: { one: "{count} элемент", other: "{count} элементов" },
    },
};

function withProviderFor(locale: LocaleKey) {
    return function Wrapper(props: { children: ReactNode }) {
        const i18n = createI18n({
            defaultLocale: locale,
            messages,
        }) as I18nInstance;
        return (
            <TranslationProvider i18n={i18n}>
                {props.children}
            </TranslationProvider>
        );
    };
}

const meta: Meta<typeof Trans> = {
    component: Trans,
    title: "react-i18n/Trans",
    tags: ["autodocs"],
};
export default meta;

type Story = StoryObj<typeof Trans>;

export const Default: Story = {
    args: {
        i18nKey: "welcome",
        values: { name: "Alice" },
        components: { b: <strong /> },
    },
    decorators: [
        (Story) => {
            const W = withProviderFor("en-GB");
            return <W>{Story()}</W>;
        },
    ],
};

export const Playground: Story = {
    args: { i18nKey: "items", count: 3 },
    decorators: [
        (Story) => {
            const W = withProviderFor("en-GB");
            return <W>{Story()}</W>;
        },
    ],
};

export const WithI18nEnglish: Story = {
    name: "WithI18n / en-GB",
    args: {
        i18nKey: "welcome",
        values: { name: "Alice" },
        components: { b: <strong /> },
    },
    decorators: [
        (Story) => {
            const W = withProviderFor("en-GB");
            return <W>{Story()}</W>;
        },
    ],
};

export const WithI18nChinese: Story = {
    name: "WithI18n / zh-CN",
    args: {
        i18nKey: "welcome",
        values: { name: "爱丽丝" },
        components: { b: <strong /> },
    },
    decorators: [
        (Story) => {
            const W = withProviderFor("zh-CN");
            return <W>{Story()}</W>;
        },
    ],
};

export const WithI18nArabic: Story = {
    name: "WithI18n / ar-AE (RTL)",
    args: {
        i18nKey: "welcome",
        values: { name: "أليس" },
        components: { b: <strong /> },
    },
    decorators: [
        (Story) => {
            const W = withProviderFor("ar-AE");
            return (
                <W>
                    <div dir="rtl">{Story()}</div>
                </W>
            );
        },
    ],
};

export const WithI18nWelsh: Story = {
    name: "WithI18n / cy-GB",
    args: {
        i18nKey: "welcome",
        values: { name: "Alys" },
        components: { b: <strong /> },
    },
    decorators: [
        (Story) => {
            const W = withProviderFor("cy-GB");
            return <W>{Story()}</W>;
        },
    ],
};

export const WithI18nRussian: Story = {
    name: "WithI18n / ru-RU",
    args: {
        i18nKey: "welcome",
        values: { name: "Алиса" },
        components: { b: <strong /> },
    },
    decorators: [
        (Story) => {
            const W = withProviderFor("ru-RU");
            return <W>{Story()}</W>;
        },
    ],
};