import "../src/preview.css";

import type { Preview } from "@storybook/react";
import {
  defaultMotionMode,
  defaultTheme,
  motionModeNames,
  setMotionMode,
  setTheme,
  themeDetails,
  themeNames
} from "@ai-ui/tokens";

const preview: Preview = {
  globalTypes: {
    theme: {
      description: "Preview theme",
      toolbar: {
        icon: "paintbrush",
        dynamicTitle: true,
        items: themeNames.map((themeName) => ({
          value: themeName,
          title: themeDetails[themeName].label
        }))
      }
    },
    motion: {
      description: "Preview motion mode",
      toolbar: {
        icon: "transfer",
        dynamicTitle: true,
        items: motionModeNames.map((modeName) => ({
          value: modeName,
          title: modeName === "system" ? "Motion / System" : "Motion / Reduced"
        }))
      }
    }
  },
  initialGlobals: {
    motion: defaultMotionMode,
    theme: defaultTheme
  },
  parameters: {
    a11y: {
      test: "error"
    },
    backgrounds: {
      default: "canvas",
      values: [
        {
          name: "canvas",
          value: "var(--color-background)"
        }
      ]
    },
    controls: {
      expanded: true
    },
    layout: "fullscreen"
  },
  decorators: [
    (Story, context) => {
      if (typeof document !== "undefined") {
        setTheme(context.globals.theme ?? defaultTheme);
        setMotionMode(context.globals.motion ?? defaultMotionMode);

        document.body.dataset.theme = context.globals.theme ?? defaultTheme;
      }

      return Story();
    }
  ]
};

export default preview;