import type { Preview } from "@storybook/vue3-vite"
import { setup } from "@storybook/vue3-vite"
import { withThemeByClassName } from "@storybook/addon-themes"
import { createPinia } from "pinia"

import "../src/styles/tailwind.css"
import "../src/styles/themes/default.css"
import "../src/styles/themes/dark.css"
import "../src/styles/themes/kiosk.css"

/**
 * Install Pinia on Storybook's Vue app instance. This is required so
 * stories that mount stateful compositions (FormBuilder, the dispatch
 * wrappers, anything that calls a Pinia store) can resolve a store
 * instance.
 *
 * Without this, useFormDataStore() / useFormBuilderStore() throw with
 *   "can't access property '_s', r is undefined"
 * — the `_s` is Pinia's internal store registry, accessed before the
 * plugin has been installed on the app.
 */
setup((app) => {
  app.use(createPinia())
})

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
      expanded: true,
      sort: "requiredFirst",
    },
    docs: {
      source: {
        type: "dynamic",
      },
    },
    backgrounds: {
      options: {
        default: { name: "default", value: "hsl(0 0% 100%)" },
        dark: { name: "dark", value: "hsl(240 10% 4%)" },
        kiosk: { name: "kiosk", value: "#000466" }
      }
    },
    layout: "padded",
  },

  decorators: [
    withThemeByClassName({
      themes: {
        default: "",
        dark: "dark",
        kiosk: "kiosk",
      },
      defaultTheme: "default",
    }),
    (story) => ({
      components: { story },
      template:
        '<div class="gxp-storybook-wrapper bg-background text-foreground p-6 min-h-screen"><story /></div>',
    }),
  ],

  initialGlobals: {
    backgrounds: {
      value: "default"
    }
  }
}

export default preview
