import { j as e } from "../../../../../_virtual/jsx-runtime.js";
import { tx as t, css as P } from "../../../../style-system/dist/twind.js";
import { useMemo as S, useCallback as R } from "react";
import { BsStars as q } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/bs/index.js";
import { IoIosHelpCircleOutline as F } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/io/index.js";
import { LuPlus as G, LuUndo as _, LuRedo as J } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/lu/index.js";
import { RxDesktop as K, RxMobile as Q, RxZoomOut as X, RxZoomIn as Y, RxExternalLink as ee, RxRocket as te } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/rx/index.js";
import { VscCopy as se, VscSettings as ae } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/vsc/index.js";
import "../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/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 { IoChatboxEllipsesOutline as oe } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/io5/index.js";
import { RiArrowDownSLine as I } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/ri/index.js";
import { useEditorHelpers as ne, usePreviewMode as re, useLogoLink as ie, useDebugMode as le, usePanel as ce, useModal as de, useZoom as ue, useChatVisible as pe } from "../../../../../use-editor.js";
import xe from "../../../../../creatives/upstart-dark.svg.js";
import he from "../../../../../creatives/upstart.svg.js";
import { PiPalette as me } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/pi/index.js";
import { useUserConfig as be } from "../hooks/use-user-config.js";
import { useDraft as ge, usePageVersion as je, useSitemap as fe, useSite as we, usePage as ke, useDraftUndoManager as Ne, useGenerationState as ye } from "../../../../../use-page-data.js";
import { Tooltip as i } 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/tooltip.js";
import { Root as ve, Trigger as Ce, Content as Pe } 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/hover-card.js";
import { Root as Se, Trigger as Re, Content as Ie, Label as Le, CheckboxItem as Me, Item as Oe } 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/dropdown-menu.js";
function tt() {
  const a = ne(), s = re(), x = ie();
  ge();
  const g = je(), h = fe(), u = we(), c = ke(), M = le(), { panel: m } = ce();
  de();
  const { canZoomIn: O, canZoomOut: D, zoomIn: U, zoomOut: T, zoom: V, resetZoom: z } = ue(), j = be(), Z = pe(), { undo: A, redo: B, futureStates: f, pastStates: w } = Ne(), k = S(() => f.length > 0, [f]), N = S(() => w.length > 0, [w]), E = c.label ?? "Untitled Page", $ = ye(), y = R(
    (l = !1) => {
      l ? a.onPublish({ mode: "publish-site", siteId: u.id }) : a.onPublish({
        mode: "publish-page",
        pageId: c.id,
        siteId: u.id,
        pageVersionId: g ?? "latest"
      });
    },
    [u.id, c.id, g, a.onPublish]
  ), H = R(
    (l) => {
      l.stopPropagation(), a.setPreviewMode(s === "mobile" ? "desktop" : "mobile"), a.hidePanel("library");
    },
    [s, a.setPreviewMode, a.hidePanel]
  ), n = `${t("transition-opacity duration-300 px-2 min-w-[2.5rem]")}
    hover:bg-upstart-100 dark:hover:bg-white/10
    disabled:text-gray-300
  `, p = "bg-upstart-100 dark:bg-upstart-700/80", W = t(
    `transition-opacity duration-300 !rounded-full !p-px
    bg-gradient-to-tr from-orange-400 to-yellow-300 border-l border-l-orange-300
  hover:opacity-80`
  ), v = "cursor-default !aspect-auto", o = `flex items-center justify-center my-1 py-1 gap-x-0.5 px-1.5 group relative
  focus-visible:outline-none disabled:hover:cursor-default rounded-md
  disabled:hover:bg-transparent text-sm
  `, r = "aspect-square", C = "h-4 w-4 opacity-60 -ml-0.5", d = t("h-[70%] w-px bg-black/10 mx-1");
  return /* @__PURE__ */ e.jsxs(
    "nav",
    {
      role: "navigation",
      className: t(
        `z-[9999] h-full gap-1 px-4 flex text-xl w-full items-center transition-opacity duration-300
        text-black/70 dark:text-dark-200 bg-white`,
        P({
          gridArea: "navbar"
        })
      ),
      children: [
        /* @__PURE__ */ e.jsx(
          "button",
          {
            type: "button",
            onClick: () => {
              window.location.href = x;
            },
            className: t("flex-shrink-0"),
            children: /* @__PURE__ */ e.jsxs("picture", { className: t("h-8 w-auto"), children: [
              /* @__PURE__ */ e.jsx("source", { srcSet: xe, className: t("h-8 w-auto"), media: "(prefers-color-scheme: dark)" }),
              /* @__PURE__ */ e.jsx("img", { src: he, className: t("h-8 w-auto"), alt: "Upstart" })
            ] })
          }
        ),
        /* @__PURE__ */ e.jsxs("div", { className: t("flex items-center gap-1 flex-1", $.isSetup && !M && "hidden"), children: [
          /* @__PURE__ */ e.jsx(
            L,
            {
              id: "switch-page-menu-btn",
              items: [
                { label: "New page", onClick: () => a.onShowPopup?.("add-page") },
                { label: "Duplicate page", onClick: () => a.onShowPopup?.("duplicate-page") },
                { type: "separator" },
                ...h.length > 1 ? [{ type: "label", label: "Switch to page" }] : [],
                ...h.length > 1 ? h.map((l) => ({
                  label: l.label,
                  type: "checkbox",
                  checked: c.id === l.id || c.attributes.path === l.attributes.path,
                  onClick: () => {
                    const b = new URL(window.location.href);
                    b.searchParams.set("p", l.id), b.searchParams.set("r", `${Date.now()}`), window.location.href = b.href;
                  }
                })) : []
              ],
              children: /* @__PURE__ */ e.jsxs(
                "button",
                {
                  type: "button",
                  className: t(o, n, v, "!px-1.5 ml-4 cursor-pointer !py-2"),
                  children: [
                    /* @__PURE__ */ e.jsx(se, { className: t("h-5 w-auto") }),
                    /* @__PURE__ */ e.jsxs("div", { className: t("flex flex-col gap-1 ml-1.5 mr-2 justify-start items-start"), children: [
                      /* @__PURE__ */ e.jsx("span", { className: t("text-xs inline-block font-thiner"), children: "Page" }),
                      /* @__PURE__ */ e.jsx("span", { className: t("text-sm inline-block -mt-[7px] font-medium max-w-[10dvw] truncate"), children: E })
                    ] }),
                    /* @__PURE__ */ e.jsx(I, { className: t(C) })
                  ]
                }
              )
            }
          ),
          /* @__PURE__ */ e.jsx("div", { className: t("max-lg:hidden flex-1") }),
          /* @__PURE__ */ e.jsx(i, { content: "Toggle chat", side: "bottom", align: "center", children: /* @__PURE__ */ e.jsx(
            "button",
            {
              onClick: () => a.toggleChat(),
              type: "button",
              className: t(o, r, n, Z && p),
              children: /* @__PURE__ */ e.jsx(oe, { className: t("h-5 w-auto") })
            }
          ) }),
          /* @__PURE__ */ e.jsx(
            i,
            {
              content: s === "desktop" ? "Add bricks" : "Switch to desktop view to add bricks",
              side: "bottom",
              align: "center",
              children: /* @__PURE__ */ e.jsx(
                "button",
                {
                  onClick: () => a.togglePanel("library"),
                  type: "button",
                  disabled: s === "mobile",
                  className: t(
                    o,
                    r,
                    n,
                    m === "library" && s === "desktop" && p
                  ),
                  children: /* @__PURE__ */ e.jsx(G, { className: t("h-5 w-auto") })
                }
              )
            }
          ),
          /* @__PURE__ */ e.jsx("div", { className: d }),
          /* @__PURE__ */ e.jsx(i, { content: "Color theme & fonts", side: "bottom", align: "center", children: /* @__PURE__ */ e.jsx(
            "button",
            {
              onClick: () => a.togglePanel("theme"),
              type: "button",
              className: t(o, r, n, m === "theme" && p),
              children: /* @__PURE__ */ e.jsx(me, { className: t("h-5 w-auto") })
            }
          ) }),
          /* @__PURE__ */ e.jsx(i, { content: "Page / Site settings", side: "bottom", align: "center", children: /* @__PURE__ */ e.jsx(
            "button",
            {
              onClick: () => a.togglePanel("settings"),
              type: "button",
              className: t(o, r, n, m === "settings" && p),
              children: /* @__PURE__ */ e.jsx(ae, { className: t("h-5 w-auto") })
            }
          ) }),
          /* @__PURE__ */ e.jsx("div", { className: d }),
          /* @__PURE__ */ e.jsx(i, { content: "Undo", side: "bottom", align: "center", "aria-disabled": !N, children: /* @__PURE__ */ e.jsx(
            "button",
            {
              disabled: !N,
              onClick: () => A(),
              type: "button",
              className: t(o, n, r, "ml-auto"),
              children: /* @__PURE__ */ e.jsx(_, { className: t("h-5 w-auto") })
            }
          ) }),
          /* @__PURE__ */ e.jsx(i, { content: "Redo", side: "bottom", align: "center", "aria-disabled": !k, children: /* @__PURE__ */ e.jsx(
            "button",
            {
              disabled: !k,
              onClick: () => B(),
              type: "button",
              className: t(o, r, n),
              children: /* @__PURE__ */ e.jsx(J, { className: t("h-5 w-auto") })
            }
          ) }),
          /* @__PURE__ */ e.jsx("div", { className: d }),
          /* @__PURE__ */ e.jsx(
            i,
            {
              content: `Switch to ${s === "desktop" ? "mobile" : "desktop"} view`,
              side: "bottom",
              align: "center",
              children: /* @__PURE__ */ e.jsxs("button", { type: "button", className: t(o, r, n), onClick: H, children: [
                s === "desktop" && /* @__PURE__ */ e.jsx(K, { className: t("h-5 w-auto") }),
                s === "mobile" && /* @__PURE__ */ e.jsx(Q, { className: t("h-5 w-auto") })
              ] })
            }
          ),
          /* @__PURE__ */ e.jsx(
            "button",
            {
              onClick: T,
              disabled: !D,
              type: "button",
              className: t(o, r, n),
              children: /* @__PURE__ */ e.jsx(X, { className: t("h-5 w-auto") })
            }
          ),
          /* @__PURE__ */ e.jsx(
            "button",
            {
              onClick: U,
              disabled: !O,
              type: "button",
              className: t(o, r, n),
              children: /* @__PURE__ */ e.jsx(Y, { className: t("h-5 w-auto") })
            }
          ),
          /* @__PURE__ */ e.jsx(i, { content: "Click to reset zoom", side: "bottom", align: "center", children: /* @__PURE__ */ e.jsxs(
            "button",
            {
              type: "button",
              onClick: z,
              className: t(
                "text-gray-500 dark:text-dark-200 text-[.85rem] text-right cursor-pointer hover:text-upstart-800 min-w-[40px]"
              ),
              children: [
                (V * 100).toFixed(0),
                "%"
              ]
            }
          ) }),
          /* @__PURE__ */ e.jsx("div", { className: d }),
          /* @__PURE__ */ e.jsx(i, { content: "Open preview", side: "bottom", align: "center", children: /* @__PURE__ */ e.jsx(
            "button",
            {
              type: "button",
              className: t(o, r, n),
              onClick: () => {
                window.open(`/sites/${u.id}/pages/${c.id}/preview`, "upstart_preview");
              },
              children: /* @__PURE__ */ e.jsx(ee, { className: "h-5 w-auto" })
            }
          ) }),
          /* @__PURE__ */ e.jsx("div", { className: d }),
          /* @__PURE__ */ e.jsxs("div", { className: t("flex flex-col gap-1.5 leading-none text-sm items-start px-1.5"), children: [
            /* @__PURE__ */ e.jsxs(
              "span",
              {
                className: t(
                  "inline-flex items-center gap-1 text-nowrap",
                  j.credits === 0 && "text-red-800 font-semibold"
                ),
                children: [
                  /* @__PURE__ */ e.jsx(q, { className: t("opacity-60 w-4 h-4") }),
                  " ",
                  j.credits.toLocaleString(),
                  " credits"
                ]
              }
            ),
            /* @__PURE__ */ e.jsxs("div", { className: t("inline-flex gap-1 items-center"), children: [
              /* @__PURE__ */ e.jsxs(ve, { children: [
                /* @__PURE__ */ e.jsx(Ce, { children: /* @__PURE__ */ e.jsx(
                  "button",
                  {
                    type: "button",
                    className: t(
                      "hover:underline cursor-help tracking-tight underline-offset-2 text-[88%] text-upstart-700 hover:text-upstart-700 text-nowrap"
                    ),
                    children: "What's this?"
                  }
                ) }),
                /* @__PURE__ */ e.jsx(Pe, { maxWidth: "380px", children: /* @__PURE__ */ e.jsxs("div", { className: "text-sm flex flex-col gap-2 justify-start items-start", children: [
                  /* @__PURE__ */ e.jsx("p", { children: "Credits are spent when you generate content with AI." }),
                  /* @__PURE__ */ e.jsxs("ul", { className: "list-disc list-inside", children: [
                    /* @__PURE__ */ e.jsx("li", { className: "pl-1", children: "On the free plan, usage is limited by day & month" }),
                    /* @__PURE__ */ e.jsx("li", { className: "pl-1", children: "On paid plans, usage is only limited by month" })
                  ] }),
                  /* @__PURE__ */ e.jsxs("p", { children: [
                    "If you ever run out of credits, you can either",
                    " ",
                    /* @__PURE__ */ e.jsx(
                      "button",
                      {
                        type: "button",
                        className: t("text-upstart-700 cursor-pointer font-medium hover:underline"),
                        onClick: () => {
                          alert("TODO upgrade");
                        },
                        children: "upgrade your plan"
                      }
                    ),
                    " ",
                    "or",
                    " ",
                    /* @__PURE__ */ e.jsx(
                      "button",
                      {
                        type: "button",
                        className: t(
                          "text-nowrap text-upstart-700 cursor-pointer font-medium hover:underline"
                        ),
                        onClick: () => {
                          a.onShowPopup?.("purchase-credits");
                        },
                        children: "buy more"
                      }
                    ),
                    " ",
                    "credits ."
                  ] })
                ] }) })
              ] }),
              /* @__PURE__ */ e.jsx("span", { children: "•" }),
              /* @__PURE__ */ e.jsx(
                "button",
                {
                  type: "button",
                  className: t(
                    "text-nowrap hover:underline tracking-tight underline-offset-2 text-[88%] text-upstart-700 hover:text-orange-800"
                  ),
                  onClick: () => {
                    a.onShowPopup?.("purchase-credits");
                  },
                  children: "Buy more"
                }
              )
            ] })
          ] }),
          /* @__PURE__ */ e.jsx("div", { className: d }),
          /* @__PURE__ */ e.jsx("button", { type: "button", className: t(o, n, r), children: /* @__PURE__ */ e.jsx(F, { className: "h-5 w-auto" }) }),
          /* @__PURE__ */ e.jsx("div", { className: t("flex-1", "border-x border-l-upstart-400 border-r-upstart-700") }),
          /* @__PURE__ */ e.jsx(
            L,
            {
              id: "publish-menu-btn",
              items: [
                { label: "Publish this page", onClick: () => y() },
                { label: "Publish all pages", onClick: () => y(!0) },
                { type: "separator" },
                { label: "Schedule publication", onClick: () => a.onShowPopup?.("schedule-publish") }
              ],
              children: /* @__PURE__ */ e.jsx("button", { type: "button", className: t(o, W, v), children: /* @__PURE__ */ e.jsxs(
                "div",
                {
                  style: {
                    textShadow: "1px 1px 0px rgba(255, 255, 255, 0.3)"
                  },
                  className: t(
                    "font-semibold inline-flex gap-1.5 bg-orange-100 py-2 px-3 rounded-full text-nowrap items-center cursor-pointer",
                    P({ fontSize: ".94rem" })
                  ),
                  children: [
                    /* @__PURE__ */ e.jsx(te, { className: t("h-4 w-auto stroke-orange-600") }),
                    "Publish",
                    /* @__PURE__ */ e.jsx(I, { className: t(C, "!text-orange-700") })
                  ]
                }
              ) })
            }
          )
        ] })
      ]
    }
  );
}
function L(a) {
  return /* @__PURE__ */ e.jsxs(Se, { children: [
    /* @__PURE__ */ e.jsx(Re, { className: "focus:outline-none", id: a.id, children: a.children }),
    /* @__PURE__ */ e.jsx(Ie, { side: "bottom", children: a.items.map(
      (s, x) => s.type === "separator" ? /* @__PURE__ */ e.jsx("div", { className: "my-1.5 h-px bg-black/10" }, x) : s.type === "label" ? /* @__PURE__ */ e.jsx(Le, { children: s.label }, s.label) : s.type === "checkbox" ? /* @__PURE__ */ e.jsx(Me, { checked: s.checked, onClick: s.onClick, children: /* @__PURE__ */ e.jsxs(
        "div",
        {
          className: `group flex justify-start items-center text-nowrap rounded-[inherit]
                py-1.5 w-fulldark:text-white/90 text-left data-[focus]:bg-upstart-600 data-[focus]:text-white `,
          children: [
            /* @__PURE__ */ e.jsx("span", { className: "pr-3", children: s.label }),
            s.shortcut && /* @__PURE__ */ e.jsx(
              "kbd",
              {
                className: `ml-auto font-sans text-right text-[smaller] text-black/50 dark:text-dark-300
                    group-hover:text-white/90
                      group-data-[focus]:text-white/70 group-data-[active]:text-white/70`,
                children: s.shortcut
              }
            )
          ]
        }
      ) }, s.label) : /* @__PURE__ */ e.jsx(Oe, { onClick: s.onClick, children: /* @__PURE__ */ e.jsxs(
        "div",
        {
          className: `group flex justify-start items-center text-nowrap rounded-[inherit]
                py-1.5 w-fulldark:text-white/90 text-left data-[focus]:bg-upstart-600 data-[focus]:text-white `,
          children: [
            /* @__PURE__ */ e.jsx("span", { className: "pr-3", children: s.label }),
            s.shortcut && /* @__PURE__ */ e.jsx(
              "kbd",
              {
                className: `ml-auto font-sans text-right text-[smaller] text-black/50 dark:text-dark-300
                    group-hover:text-white/90
                      group-data-[focus]:text-white/70 group-data-[active]:text-white/70`,
                children: s.shortcut
              }
            )
          ]
        }
      ) }, s.label)
    ) })
  ] });
}
export {
  tt as default
};
//# sourceMappingURL=NavBar.js.map
