import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { useAutoAnimate } from "../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/react/index.js";
import "../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-hot-toast/dist/index.js";
import { b as p } from "../../../../sdk/dist/shared/chunk-A3K4NUVP.js";
import "../../../../sdk/dist/shared/chunk-AFVJZPLS.js";
import "@sinclair/typebox";
import "../../../../sdk/dist/shared/chunk-A3GF4PYW.js";
import "../../../../sdk/dist/shared/chunk-W33JMRRN.js";
import { useDraft, useTheme, useThemes, usePreviewTheme } from "../../../../../use-page-data.js";
import { ColorFieldRow } from "./json-form/fields/color.js";
import { ScrollablePanelTab } from "./ScrollablePanelTab.js";
import i from "chroma-js";
import { getContrastingTextColor as g, generateColorsVars as w } from "../../../../sdk/dist/shared/themes/color-system.js";
import FontPicker from "./json-form/fields/font.js";
import { tx as D, css as E } from "../../../../style-system/dist/twind.js";
import { PanelBlockTitle } from "./PanelBlockTitle.js";
import ThemePreview from "./ThemePreview.js";
import { generateRelatedNeutral } from "../utils/colors.js";
import { useState, useEffect } from "react";
import { useDebugMode } from "../../../../../use-editor.js";
import { Root as m, List as b, Trigger as P } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/tabs.js";
import { Root as n, Text as u } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/callout.js";
import { Text as p$1 } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/text.js";
import { Root as C, Trigger as u$1, Content as g$1, Item as v, Group as y, Label as h } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/select.js";
function ThemePanel() {
  const draft = useDraft();
  useAutoAnimate(
    /* optional config */
  );
  const baseSizes = [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22];
  const theme = useTheme();
  const debug = useDebugMode();
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(PanelBlockTitle, { children: "Theme" }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs(m, { defaultValue: "current", className: "flex-1 flex flex-col h-full", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs(b, { size: "1", className: "sticky top-0 z-50 bg-gray-100", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(P, { value: "current", className: "!flex-1", children: "Current Theme" }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(P, { value: "list", className: "!flex-1", children: "Themes library" }),
        debug && /* @__PURE__ */ jsxRuntimeExports.jsx(P, { value: "debug", className: "!flex-1", children: "Debug" })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs(ScrollablePanelTab, { tab: "current", className: "px-2 overflow-auto", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(n, { className: "-mx-2 !py-2 !px-3 !rounded-none", children: /* @__PURE__ */ jsxRuntimeExports.jsx(u, { size: "1", className: D("text-pretty"), children: "Customize your theme colors and typography to match your brand. Theme is applied to your entire site, not just the current page." }) }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(PanelBlockTitle, { className: "-mx-2 my-2", children: "Colors" }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-x-3 text-sm flex-col gap-y-3 pb-2", children: Object.entries(theme.colors).filter(
            ([colorType]) => ["base200", "base300"].includes(colorType) === false && colorType.endsWith("Content") === false
          ).map(([colorType, color]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
            ColorFieldRow,
            {
              hideColorLabel: true,
              labelPlacement: "right",
              name: p.properties.colors.properties[colorType].title,
              description: p.properties.colors.properties[colorType].description,
              color,
              labelClassName: "font-medium",
              colorType,
              onChange: (newColor) => {
                const colors = { [colorType]: newColor };
                let browserColorScheme = theme.browserColorScheme;
                if ([
                  "primary",
                  "secondary",
                  "accent",
                  "neutral",
                  "base100",
                  "base200",
                  "base300"
                ].includes(colorType)) {
                  const color2 = i(newColor);
                  const textColor = g(newColor);
                  if (!colorType.startsWith("base")) {
                    colors[`${colorType}Content`] = textColor;
                    if (colorType === "primary") {
                      colors.neutral = generateRelatedNeutral(
                        // @ts-ignore oklch is a valid color format
                        color2.css("oklch")
                      );
                    }
                  } else if (colorType === "base100") {
                    const isDark = color2.luminance() < 0.5;
                    browserColorScheme = isDark ? "dark" : "light";
                    colors.baseContent = textColor;
                    const [l] = color2.lch();
                    const base200 = isDark ? color2.set("lch.l", l + 10) : color2.set("lch.l", l - 4);
                    const base300 = isDark ? color2.set("lch.l", l + 20) : color2.set("lch.l", l - 8);
                    colors.base200 = base200.css("oklch");
                    colors.base300 = base300.css("oklch");
                  }
                }
                draft.setTheme({
                  ...theme,
                  browserColorScheme,
                  colors: {
                    ...theme.colors,
                    ...colors
                  }
                });
              }
            },
            colorType
          )) }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(PanelBlockTitle, { className: "-mx-2 my-2", children: "Typography" }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm flex flex-col gap-y-4 p-2", children: [
            Object.entries(theme.typography).filter((obj) => obj[0] === "body" || obj[0] === "heading").map(([fontType, font]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "font-medium", children: p.properties.typography.properties[fontType].title }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(p$1, { color: "gray", as: "p", size: "1", className: "mb-1.5", children: p.properties.typography.properties[fontType].description }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(
                FontPicker,
                {
                  fontType,
                  initialValue: font,
                  onChange: (chosen) => {
                    draft.setTheme({
                      ...theme,
                      typography: {
                        ...theme.typography,
                        [fontType]: chosen
                      }
                    });
                  }
                }
              )
            ] }, fontType)),
            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "font-medium", children: "Base Font size" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(p$1, { color: "gray", as: "p", size: "1", className: "mb-2", children: "Can be changed for fonts that are too small or too big" }),
              /* @__PURE__ */ jsxRuntimeExports.jsxs(
                C,
                {
                  defaultValue: `${theme.typography.base}`,
                  size: "2",
                  onValueChange: (chosen) => {
                    draft.setTheme({
                      ...theme,
                      typography: {
                        ...theme.typography,
                        base: parseInt(chosen)
                      }
                    });
                  },
                  children: [
                    /* @__PURE__ */ jsxRuntimeExports.jsx(u$1, { className: "!w-full", radius: "large", variant: "surface" }),
                    /* @__PURE__ */ jsxRuntimeExports.jsx(g$1, { position: "popper", children: baseSizes.map((size) => /* @__PURE__ */ jsxRuntimeExports.jsxs(v, { value: `${size}`, children: [
                      size,
                      " px"
                    ] }, `base-${size}`)) })
                  ]
                }
              )
            ] })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs(ScrollablePanelTab, { tab: "list", className: "px-2 overflow-auto !h-[calc(100dvh-66px)]", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(n, { className: "-mx-2 !py-2 !px-3 !rounded-none", children: /* @__PURE__ */ jsxRuntimeExports.jsx(u, { size: "1", className: D("text-pretty"), children: "Here are some pre-made color themes. Click on a theme to preview it. Also feel free to use the Upstart AI chat to ask for a specific theme!" }) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeList, {})
      ] }),
      debug && /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollablePanelTab, { tab: "debug", className: "h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DebugTab, {}) })
    ] })
  ] });
}
const colorSchemes = [
  "modern",
  "rustic",
  "playful",
  "vibrant",
  "professional",
  "neutral",
  "pastel",
  "tech",
  "elegant",
  "classic",
  "organic",
  "luxurious",
  "warm",
  "serene",
  "bold",
  "minimalist",
  "fresh",
  "calming",
  "energetic",
  "earthy"
].toSorted();
function ThemeList() {
  const siteThemes = useThemes();
  const draft = useDraft();
  const [loaded, setLoaded] = useState(false);
  const [colorScheme, setColorScheme] = useState("bold");
  const [browserColorScheme, setBrowserColorScheme] = useState("light");
  const [upstartThemes, setUpstartThemes] = useState([]);
  useEffect(() => {
    const fetchThemes = async () => {
      const response = await fetch(
        `/editor/themes?colorScheme=${colorScheme}&browserColorScheme=${browserColorScheme}`
      );
      const data = await response.json();
      setUpstartThemes(data);
      setLoaded(true);
    };
    fetchThemes();
  }, [colorScheme, browserColorScheme]);
  const allThemes = [...siteThemes, ...upstartThemes];
  if (!loaded) {
    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 text-center text-gray-500 h-full flex-1 flex items-center justify-center", children: "Loading themes..." });
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 items-center mt-3 mx-w-full", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: "Style" }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs(C, { value: colorScheme, onValueChange: setColorScheme, children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(u$1, { className: "!flex-grow !capitalize", radius: "large", variant: "surface" }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(g$1, { position: "popper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(y, { children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(h, { children: "Category" }),
          colorSchemes.map((scheme) => /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: scheme, className: "capitalize", children: scheme }, scheme))
        ] }) })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs(
        C,
        {
          defaultValue: browserColorScheme,
          onValueChange: (value) => setBrowserColorScheme(value),
          children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx(u$1, { className: "!flex-grow !capitalize pr-0.5", radius: "large", variant: "surface" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(g$1, { position: "popper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(y, { children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx(h, { children: "Lightness" }),
              ["light", "dark"].map((scheme) => /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: scheme, className: "capitalize", children: scheme }, scheme))
            ] }) })
          ]
        }
      )
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: D("grid grid-cols-2 gap-3 pt-3 pb-2 relative pr-1.5"), children: allThemes.map((theme) => /* @__PURE__ */ jsxRuntimeExports.jsx(
      ThemePreview,
      {
        selected: draft.previewTheme?.id === theme.id,
        theme,
        onClick: () => draft.setPreviewTheme(theme)
      },
      theme.id
    )) }),
    allThemes.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 text-center text-gray-500 h-full flex-1 flex items-center justify-center pointer-events-none", children: "No themes found for specified filters." })
  ] });
}
function DebugTab() {
  const codeClassName = D(
    E({
      display: "block",
      fontFamily: "monospace",
      fontSize: "0.7rem",
      lineHeight: "1.3",
      wordWrap: "break-word",
      whiteSpace: "pre-wrap"
    })
  );
  const previewTheme = usePreviewTheme();
  const theme = useTheme();
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-y-auto scrollbar-thin grow-0 max-h-[92cqh]", children: [
    previewTheme && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(PanelBlockTitle, { children: "Preview theme" }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 ", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: codeClassName, children: JSON.stringify(previewTheme, null, 2) }) }) })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(PanelBlockTitle, { children: "Theme" }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 ", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: codeClassName, children: JSON.stringify(theme, null, 2) }) }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(PanelBlockTitle, { children: "Theme colors vars" }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 ", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: codeClassName, children: JSON.stringify(w(theme), null, 2) }) }) })
  ] });
}
export {
  ThemePanel as default
};
//# sourceMappingURL=PanelTheme.js.map
