# preview.js

import { withSomething } from "./decorators";
export const globalTypes = {
  locale: {
    name: "Locale",
    description: "Internationalization locale",
    defaultValue: "en",
    toolbar: {
      icon: "globe",
      items: [
        { value: "en", right: "🇺🇸", title: "English" },
        { value: "fr", right: "🇫🇷", title: "Français" },
        { value: "de", right: "🇪🇸", title: "Español" },
        { value: "zh", right: "🇨🇳", title: "中文" },
        { value: "kr", right: "🇰🇷", title: "한국어" },
      ],
    },
  },
};
addDecorator(withSomething);

# decorator.js

import { addDecorator, configure } from "@storybook/react";
import { makeDecorator } from "@storybook/addons";
import { setIntlConfig, withIntl } from "storybook-addon-intl";
import { addLocaleData, IntlProvider } from "react-intl";
import enLocaleData from "react-intl/locale-data/en";
import deLocaleData from "react-intl/locale-data/de";

addLocaleData(enLocaleData);
addLocaleData(deLocaleData);

// Provide your messages
const messages = {
  en: { "button.label": "Click me!" },
  de: { "button.label": "haz click" },
  fr: { "button.label": "click frances" },
};

// Provide your formats (optional)
const formats = {
  en: {
    date: {
      "year-only": {
        year: "2-digit",
      },
    },
  },
  de: {
    date: {
      "year-only": {
        year: "numeric",
      },
    },
  },
};

const getMessages = (locale) => messages[locale];
const getFormats = (locale) => formats[locale];

// Set intl configuration

// Register decorator
// addDecorator(withIntl);
export const withSomething = (Story, params) => {
  // setIntlConfig({
  //   locales: ["en", "de"],
  //   defaultLocale: params?.globals?.locale || "de",
  //   getMessages,
  //   getFormats,
  // });
  console.log("params?.globals?.locale", params?.globals?.locale);
  console.log("withSomething", params);
  return (
    <IntlProvider
      locale={params?.globals?.locale || "de"}
      messages={getMessages(params?.globals?.locale)}
      key={params?.globals?.locale || "de"}
    >
      <Story />
    </IntlProvider>
  );
};