import type { Preview } from "@storybook/react-vite"
import { MINIMAL_VIEWPORTS } from "storybook/viewport"
import { Toaster } from "@hm-design/ui"
import { ensurePseudoStates } from "./pseudo-states"
import { DesignerThemePreview } from "../src/theme/designer-preview"
import "../src/index.css"
import "../src/hm-theme.css"

const preview: Preview = {
  parameters: {
    layout: "centered",
    viewport: {
      options: {
        // HM QA presets come first; keep Storybook's built-in choices available.
        hmDesktop1280: { name: "HM Desktop · 1280", styles: { width: "1280px", height: "900px" }, type: "desktop" },
        hmDesktop1024: { name: "HM Desktop Boundary · 1024", styles: { width: "1024px", height: "900px" }, type: "desktop" },
        hmMobile1023: { name: "HM Mobile Boundary · 1023", styles: { width: "1023px", height: "900px" }, type: "mobile" },
        hmMobile390: { name: "HM Mobile · 390", styles: { width: "390px", height: "844px" }, type: "mobile" },
        ...MINIMAL_VIEWPORTS,
      },
    },
    options: {
      storySort: {
        // Story names sort only where the order names them (SW Header first); other Stories keep file order.
        includeNames: true,
        order: [
          "Foundation",
          ["Color", "Typography", "Layout"],
          "Components",
          [
            "Form",
            ["Button", "Input", "Textarea", "Select", "Checkbox", "Radio Group", "Switch", "Slider", "Toggle", "Toggle Group", "Label"],
            "Navigation",
            ["Tabs", "Breadcrumb", "Pagination", "Navigation Menu", "Menubar"],
            "Overlay",
            ["Dialog", "Alert Dialog", "Sheet", "Drawer", "Dropdown Menu", "Context Menu", "Popover", "Tooltip", "Hover Card"],
            "Data & Display",
            ["Card", "Table", "Badge", "Avatar", "Progress", "Skeleton", "Separator", "Aspect Ratio", "Carousel", "Scroll Area"],
            "Disclosure",
            ["Accordion", "Collapsible", "Resizable"],
            "Search & Date",
            ["Command", "Combobox", "Calendar", "Date Picker"],
            "Feedback",
            ["Alert", "Sonner"],
          ],
          "Patterns",
          ["Data", ["Data Table", "Filter Bar"], "Layout", ["GNB", "LNB", "Dashboard Layout", "Loading Screen"]],
          "OrgChart",
          ["Overview", "Department Colors", "Full Composition", "Expanded OrgChart"],
          "Center Graphic",
          "SW",
          ["Header", ["SW Header", "*"], "Footer", ["SW Footer", "*"], "Popup", "Viewer", "Theme"],
          "*",
          // With includeNames, keeps the Loader group after the Runtime Contract Stories (its place without names).
          "Theme",
          ["*", "Runtime Contract", ["*", "Loader"]],
        ],
      },
    },
  },
  decorators: [
    (Story, context) => {
      // Lets state Stories pin hover / pressed with data-sb-hover / data-sb-active.
      ensurePseudoStates()
      // One Toaster for every Story, the same way an app mounts it once at its root.
      return (
        <DesignerThemePreview enabled={context.title === "Theme/Designer Playground"}>
          <Story />
          <Toaster />
        </DesignerThemePreview>
      )
    },
  ],
}

export default preview