import { j as e } from "../../../../../_virtual/jsx-runtime.js";
import { useAutoAnimate as L } 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@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_c02c1e17bf76c343fd22d1f22394ecf5/node_modules/react-hot-toast/dist/index.js";
import { b as f } from "../../../../sdk/dist/shared/chunk-HHO3ONTQ.js";
import "@sinclair/typebox";
import { useDraft as S, useTheme as F, useThemes as R } from "../../../../../use-page-data.js";
import { ColorFieldRow as D } from "./json-form/fields/color.js";
import { ScrollablePanelTab as b } from "./ScrollablePanelTab.js";
import { getContrastingTextColor as O, generateColorsVars as A } from "../../../../sdk/dist/shared/themes/color-system.js";
import B from "./json-form/fields/font.js";
import { tx as g, css as I } from "../../../../style-system/dist/twind.js";
import { PanelBlockTitle as n } from "./PanelBlockTitle.js";
import J from "./ThemePreview.js";
import { generateRelatedNeutral as W } from "../utils/colors.js";
import { useState as u, useEffect as E } from "react";
import { useDebugMode as H } from "../../../../../use-editor.js";
import "../../../../../node_modules/.pnpm/chroma-js@3.1.2/node_modules/chroma-js/index.js";
import U from "../../../../../node_modules/.pnpm/chroma-js@3.1.2/node_modules/chroma-js/src/chroma.js";
import { Root as q, List as G, Trigger as N } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/tabs.js";
import { Root as T, Text as k } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/callout.js";
import { Text as z } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/text.js";
import { Root as y, Trigger as v, Content as C, Item as w, Group as P, Label as $ } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/select.js";
function je() {
  const a = S();
  L(
    /* optional config */
  );
  const c = [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22], t = F(), p = H();
  return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col h-full", children: [
    /* @__PURE__ */ e.jsx(n, { children: "Theme" }),
    /* @__PURE__ */ e.jsxs(q, { defaultValue: "current", className: "flex-1 flex flex-col h-full", children: [
      /* @__PURE__ */ e.jsxs(G, { size: "1", className: "sticky top-0 z-50 bg-gray-100", children: [
        /* @__PURE__ */ e.jsx(N, { value: "current", className: "!flex-1", children: "Current Theme" }),
        /* @__PURE__ */ e.jsx(N, { value: "list", className: "!flex-1", children: "Themes library" }),
        p && /* @__PURE__ */ e.jsx(N, { value: "debug", className: "!flex-1", children: "Debug" })
      ] }),
      /* @__PURE__ */ e.jsxs(b, { tab: "current", className: "px-2 overflow-auto", children: [
        /* @__PURE__ */ e.jsx(T, { className: "-mx-2 !py-2 !px-3 !rounded-none", children: /* @__PURE__ */ e.jsx(k, { size: "1", className: g("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__ */ e.jsxs("div", { className: "flex flex-col", children: [
          /* @__PURE__ */ e.jsx(n, { className: "-mx-2 my-2", children: "Colors" }),
          /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-2 gap-x-3 text-sm flex-col gap-y-3 pb-2", children: Object.entries(a.theme.colors).filter(
            ([s]) => ["base200", "base300"].includes(s) === !1 && s.endsWith("Content") === !1
          ).map(([s, m]) => /* @__PURE__ */ e.jsx(
            D,
            {
              hideColorLabel: !0,
              labelPlacement: "right",
              name: f.properties.colors.properties[s].title,
              description: f.properties.colors.properties[s].description,
              color: m,
              labelClassName: "font-medium",
              colorType: s,
              onChange: (l) => {
                const o = { [s]: l };
                let x = t.browserColorScheme;
                if ([
                  "primary",
                  "secondary",
                  "accent",
                  "neutral",
                  "base100",
                  "base200",
                  "base300"
                ].includes(s)) {
                  const i = U(l), h = O(l);
                  if (!s.startsWith("base"))
                    o[`${s}Content`] = h, s === "primary" && (o.neutral = W(
                      // @ts-ignore oklch is a valid color format
                      i.css("oklch")
                    ));
                  else if (s === "base100") {
                    const r = i.luminance() < 0.5;
                    x = r ? "dark" : "light", o.baseContent = h;
                    const [d] = i.lch(), j = r ? i.set("lch.l", d + 10) : i.set("lch.l", d - 4), V = r ? i.set("lch.l", d + 20) : i.set("lch.l", d - 8);
                    o.base200 = j.css("oklch"), o.base300 = V.css("oklch");
                  }
                }
                a.setTheme({
                  ...t,
                  browserColorScheme: x,
                  colors: {
                    ...t.colors,
                    ...o
                  }
                });
              }
            },
            s
          )) }),
          /* @__PURE__ */ e.jsx(n, { className: "-mx-2 my-2", children: "Typography" }),
          /* @__PURE__ */ e.jsxs("div", { className: "text-sm flex flex-col gap-y-4 p-2", children: [
            Object.entries(a.theme.typography).filter((s) => s[0] === "body" || s[0] === "heading").map(([s, m]) => /* @__PURE__ */ e.jsxs("div", { children: [
              /* @__PURE__ */ e.jsx("label", { className: "font-medium", children: f.properties.typography.properties[s].title }),
              /* @__PURE__ */ e.jsx(z, { color: "gray", as: "p", size: "1", className: "mb-1.5", children: f.properties.typography.properties[s].description }),
              /* @__PURE__ */ e.jsx(
                B,
                {
                  fontType: s,
                  initialValue: m,
                  onChange: (l) => {
                    a.setTheme({
                      ...t,
                      typography: {
                        ...t.typography,
                        [s]: l
                      }
                    });
                  }
                }
              )
            ] }, s)),
            /* @__PURE__ */ e.jsxs("div", { children: [
              /* @__PURE__ */ e.jsx("label", { className: "font-medium", children: "Base Font size" }),
              /* @__PURE__ */ e.jsx(z, { color: "gray", as: "p", size: "1", className: "mb-2", children: "Can be changed for fonts that are too small or too big" }),
              /* @__PURE__ */ e.jsxs(
                y,
                {
                  defaultValue: `${a.theme.typography.base}`,
                  size: "2",
                  onValueChange: (s) => {
                    a.setTheme({
                      ...t,
                      typography: {
                        ...t.typography,
                        base: parseInt(s)
                      }
                    });
                  },
                  children: [
                    /* @__PURE__ */ e.jsx(v, { className: "!w-full", radius: "large", variant: "surface" }),
                    /* @__PURE__ */ e.jsx(C, { position: "popper", children: c.map((s) => /* @__PURE__ */ e.jsxs(w, { value: `${s}`, children: [
                      s,
                      " px"
                    ] }, `base-${s}`)) })
                  ]
                }
              )
            ] })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ e.jsxs(b, { tab: "list", className: "px-2 overflow-auto !h-[calc(100dvh-66px)]", children: [
        /* @__PURE__ */ e.jsx(T, { className: "-mx-2 !py-2 !px-3 !rounded-none", children: /* @__PURE__ */ e.jsx(k, { size: "1", className: g("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__ */ e.jsx(_, {})
      ] }),
      p && /* @__PURE__ */ e.jsx(b, { tab: "debug", className: "h-full", children: /* @__PURE__ */ e.jsx(K, {}) })
    ] })
  ] });
}
const M = [
  "modern",
  "rustic",
  "playful",
  "vibrant",
  "professional",
  "neutral",
  "pastel",
  "tech",
  "elegant",
  "classic",
  "organic",
  "luxurious",
  "warm",
  "serene",
  "bold",
  "minimalist",
  "fresh",
  "calming",
  "energetic",
  "earthy"
].toSorted();
function _() {
  const a = R(), c = S(), [t, p] = u(!1), [s, m] = u("bold"), [l, o] = u("light"), [x, i] = u([]);
  E(() => {
    (async () => {
      const j = await (await fetch(
        `/editor/themes?colorScheme=${s}&browserColorScheme=${l}`
      )).json();
      i(j), p(!0);
    })();
  }, [s, l]);
  const h = [...a, ...x];
  return t ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
    /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-center mt-2 mx-w-full", children: [
      /* @__PURE__ */ e.jsx("span", { className: "text-sm font-medium", children: "Style" }),
      /* @__PURE__ */ e.jsxs(y, { value: s, onValueChange: m, children: [
        /* @__PURE__ */ e.jsx(v, { className: "!flex-grow !capitalize", radius: "large", variant: "surface" }),
        /* @__PURE__ */ e.jsx(C, { position: "popper", children: /* @__PURE__ */ e.jsxs(P, { children: [
          /* @__PURE__ */ e.jsx($, { children: "Category" }),
          M.map((r) => /* @__PURE__ */ e.jsx(w, { value: r, className: "capitalize", children: r }, r))
        ] }) })
      ] }),
      /* @__PURE__ */ e.jsxs(
        y,
        {
          defaultValue: l,
          onValueChange: (r) => o(r),
          children: [
            /* @__PURE__ */ e.jsx(v, { className: "!flex-grow !capitalize pr-0.5", radius: "large", variant: "surface" }),
            /* @__PURE__ */ e.jsx(C, { position: "popper", children: /* @__PURE__ */ e.jsxs(P, { children: [
              /* @__PURE__ */ e.jsx($, { children: "Lightness" }),
              ["light", "dark"].map((r) => /* @__PURE__ */ e.jsx(w, { value: r, className: "capitalize", children: r }, r))
            ] }) })
          ]
        }
      )
    ] }),
    /* @__PURE__ */ e.jsx("div", { className: g("grid grid-cols-2 gap-3 pt-3 pb-2 relative pr-1.5"), children: h.map((r) => /* @__PURE__ */ e.jsx(
      J,
      {
        selected: c.previewTheme?.id === r.id,
        theme: r,
        onClick: () => c.setPreviewTheme(r)
      },
      r.id
    )) }),
    h.length === 0 && /* @__PURE__ */ e.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." })
  ] }) : /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 text-center text-gray-500 h-full flex-1 flex items-center justify-center", children: "Loading themes..." });
}
function K() {
  const a = g(
    I({
      display: "block",
      fontFamily: "monospace",
      fontSize: "0.7rem",
      lineHeight: "1.3",
      wordWrap: "break-word",
      whiteSpace: "pre-wrap"
    })
  ), { previewTheme: c, theme: t } = S();
  return /* @__PURE__ */ e.jsxs("div", { className: "overflow-y-auto scrollbar-thin grow-0 max-h-[92cqh]", children: [
    c && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
      /* @__PURE__ */ e.jsx(n, { children: "Preview theme" }),
      /* @__PURE__ */ e.jsx("div", { className: "flex-1 ", children: /* @__PURE__ */ e.jsx("pre", { className: "p-1", children: /* @__PURE__ */ e.jsx("code", { className: a, children: JSON.stringify(c, null, 2) }) }) })
    ] }),
    /* @__PURE__ */ e.jsx(n, { children: "Theme" }),
    /* @__PURE__ */ e.jsx("div", { className: "flex-1 ", children: /* @__PURE__ */ e.jsx("pre", { className: "p-1", children: /* @__PURE__ */ e.jsx("code", { className: a, children: JSON.stringify(t, null, 2) }) }) }),
    /* @__PURE__ */ e.jsx(n, { children: "Theme colors vars" }),
    /* @__PURE__ */ e.jsx("div", { className: "flex-1 ", children: /* @__PURE__ */ e.jsx("pre", { className: "p-1", children: /* @__PURE__ */ e.jsx("code", { className: a, children: JSON.stringify(A(t), null, 2) }) }) })
  ] });
}
export {
  je as default
};
//# sourceMappingURL=PanelTheme.js.map
