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

import type { Preview } from "@storybook/react";
import {
  defaultSkin,
  setSkin,
  skinDetails,
  skinNames
} from "@ai-ui/ui";
import {
  defaultMotionMode,
  defaultTheme,
  motionModeDetails,
  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
        }))
      }
    },
    motionMode: {
      description: "Preview motion mode",
      toolbar: {
        icon: "contrast",
        dynamicTitle: true,
        items: motionModeNames.map((modeName) => ({
          value: modeName,
          title: motionModeDetails[modeName].label
        }))
      }
    },
    skin: {
      description: "Preview component skin",
      toolbar: {
        icon: "mirror",
        dynamicTitle: true,
        items: skinNames.map((skinName) => ({
          value: skinName,
          title: skinDetails[skinName].label
        }))
      }
    }
  },
  initialGlobals: {
    motionMode: defaultMotionMode,
    skin: defaultSkin,
    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.motionMode ?? defaultMotionMode);
        setSkin(context.globals.skin ?? defaultSkin);

        document.body.dataset.theme = context.globals.theme ?? defaultTheme;
        document.body.dataset.motion = context.globals.motionMode ?? defaultMotionMode;
        document.body.dataset.skin = context.globals.skin ?? defaultSkin;
      }

      return Story();
    }
  ]
};

export default preview;