import type { Decorator, StoryContext } from '@storybook/react-vite';
import React from 'react';
import { IntlProvider } from 'react-intl';

export const withIntlProvider: Decorator = (Story, ctx) => {
    const { locale = 'en', messages = {} } = ctx.loaded?.intl || {};

    return (
        <IntlProvider locale={locale} messages={messages}>
            <div lang={locale} key={locale}>
                <Story />
            </div>
        </IntlProvider>
    );
};

export const intlLoader = async (ctx: StoryContext) => {
    const locale = ctx.globals.locale || 'en';

    return {
        intl: {
            // Local import due to https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
            messages: (await import(`../../../../packages/i18n/locales/${locale}.json`)).default,
            locale,
        },
    };
};

export const intlGlobals = {
    locale: {
        name: 'Locale',
        defaultValue: 'en',
        toolbar: {
            icon: 'globe' as const,
            items: [
                { value: 'en', title: 'English', right: '🇺🇸' },
                { value: 'es', title: 'Spanish', right: '🇪🇸' },
                { value: 'fr', title: 'French', right: '🇫🇷' },
                { value: 'de', title: 'German', right: '🇩🇪' },
                { value: 'it', title: 'Italian', right: '🇮🇹' },
                { value: 'uk', title: 'Ukrainian', right: '🇺🇦' },
                { value: 'pl', title: 'Polish', right: '🇵🇱' },
                { value: 'pt', title: 'Portuguese', right: '🇵🇹' },
                { value: 'tr', title: 'Turkish', right: '🇹🇷' },
                { value: 'id', title: 'Indonesian', right: '🇮🇩' },
                { value: 'zh', title: 'Chinese', right: '🇨🇳' },
                { value: 'ja', title: 'Japanese', right: '🇯🇵' },
                { value: 'ko', title: 'Korean', right: '🇰🇷' },
                { value: 'ar', title: 'Arabic', right: '🇦🇪' },
                { value: 'nl', title: 'Dutch', right: '🇳🇱' },
                { value: 'ro', title: 'Romanian', right: '🇷🇴' },
                { value: 'ru', title: 'Russian', right: '🇷🇺' },
                { value: 'sv', title: 'Swedish', right: '🇸🇪' },
                { value: 'th', title: 'Thai', right: '🇹🇭' },
            ],
        },
    },
};