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

import type { Preview } from "@storybook/react";
import {
  defaultSkin,
  setSkin,
  skinDetails,
  skinNames
} from "@ai-ui/ui";
import {
  defaultMotionAccessibility,
  defaultMotionPack,
  defaultTheme,
  motionAccessibilityDetails,
  motionAccessibilityNames,
  motionPackDetails,
  motionPackNames,
  setMotionAccessibility,
  setMotionPack,
  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
        }))
      }
    },
    motionPack: {
      description: "Preview motion pack",
      toolbar: {
        icon: "transfer",
        dynamicTitle: true,
        items: motionPackNames.map((packName) => ({
          value: packName,
          title: motionPackDetails[packName].label
        }))
      }
    },
    motionAccessibility: {
      description: "Preview motion accessibility override",
      toolbar: {
        icon: "accessibility",
        dynamicTitle: true,
        items: motionAccessibilityNames.map((modeName) => ({
          value: modeName,
          title: motionAccessibilityDetails[modeName].label
        }))
      }
    },
    skin: {
      description: "Preview component skin",
      toolbar: {
        icon: "mirror",
        dynamicTitle: true,
        items: skinNames.map((skinName) => ({
          value: skinName,
          title: skinDetails[skinName].label
        }))
      }
    }
  },
  initialGlobals: {
    motionAccessibility: defaultMotionAccessibility,
    motionPack: defaultMotionPack,
    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);
        setMotionPack(context.globals.motionPack ?? defaultMotionPack);
        setMotionAccessibility(
          context.globals.motionAccessibility ?? defaultMotionAccessibility
        );
        setSkin(context.globals.skin ?? defaultSkin);

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

      return Story();
    }
  ]
};

export default preview;