import { j as e } from "../../../../../_virtual/jsx-runtime.js";
import { tx as t, css as C } from "../../../../style-system/dist/twind.js";
import { useMemo as P, useCallback as S } from "react";
import { BsStars as H } from "../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/bs/index.js";
import { IoIosHelpCircleOutline as W } from "../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/io/index.js";
import { LuPlus as q, LuUndo as _, LuRedo as F } from "../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/lu/index.js";
import { RxDesktop as G, RxMobile as J, RxZoomOut as K, RxZoomIn as Q, RxExternalLink as X, RxRocket as Y } from "../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/rx/index.js";
import { VscCopy as ee, VscSettings as te } from "../../../../../node_modules/.pnpm/react-icons@5.3.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 se } from "../../../../../node_modules/.pnpm/react-icons@5.3.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.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/ri/index.js";
import { useEditorHelpers as ae, usePreviewMode as oe, useLogoLink as ne, usePanel as re, useModal as le, useZoom as ie, useChatVisible as ce } from "../../../../../use-editor.js";
import de from "../../../../../creatives/upstart-dark.svg.js";
import ue from "../../../../../creatives/upstart.svg.js";
import { PiPalette as pe } from "../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/pi/index.js";
import { useUserConfig as xe } from "../hooks/use-user-config.js";
import { useDraft as he, usePageVersion as me, useSitemap as be, useDraftUndoManager as ge, useGenerationState as je } from "../../../../../use-page-data.js";
import { Tooltip as c } 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 fe, Trigger as we, Content as ke } 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 Ne, Trigger as ye, Content as ve, Label as Ce, CheckboxItem as Pe, Item as Se } 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 Ke() {
  const a = ae(), s = oe(), x = ne(), r = he(), b = me(), u = be(), { panel: h } = re();
  le();
  const { canZoomIn: L, canZoomOut: M, zoomIn: O, zoomOut: U, zoom: D, resetZoom: T } = ie(), g = xe(), V = ce(), { undo: z, redo: B, futureStates: j, pastStates: f } = ge(), w = P(() => j.length > 0, [j]), k = P(() => f.length > 0, [f]), Z = u.find((i) => i.id === r.id)?.label ?? r.label ?? "Untitled Page", A = je(), N = S(
    (i = !1) => {
      i ? a.onPublish({ mode: "publish-site", siteId: r.siteId }) : a.onPublish({
        mode: "publish-page",
        pageId: r.id,
        siteId: r.siteId,
        pageVersionId: b ?? "latest"
      });
    },
    [r.siteId, r.id, b, a.onPublish]
  ), $ = S(
    (i) => {
      i.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", E = 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`
  ), y = "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
  `, l = "aspect-square", v = "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`,
        C({
          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: de, className: t("h-8 w-auto"), media: "(prefers-color-scheme: dark)" }),
              /* @__PURE__ */ e.jsx("img", { src: ue, className: t("h-8 w-auto"), alt: "Upstart" })
            ] })
          }
        ),
        /* @__PURE__ */ e.jsxs("div", { className: t("flex items-center gap-1 flex-1", !A.isReady && "hidden"), children: [
          /* @__PURE__ */ e.jsx(
            R,
            {
              id: "switch-page-menu-btn",
              items: [
                { label: "New page", onClick: () => a.onShowPopup?.("add-page") },
                { label: "Duplicate page", onClick: () => a.onShowPopup?.("duplicate-page") },
                { type: "separator" },
                ...u.length > 1 ? [{ type: "label", label: "Switch to page" }] : [],
                ...u.length > 1 ? u.map((i) => ({
                  label: i.label,
                  type: "checkbox",
                  checked: r.id === i.id || r.path === i.path,
                  onClick: () => {
                    const m = new URL(window.location.href);
                    m.searchParams.set("p", i.id), m.searchParams.set("r", `${Date.now()}`), window.location.href = m.href;
                  }
                })) : []
              ],
              children: /* @__PURE__ */ e.jsxs(
                "button",
                {
                  type: "button",
                  className: t(o, n, y, "!px-1.5 ml-4 cursor-pointer !py-2"),
                  children: [
                    /* @__PURE__ */ e.jsx(ee, { 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: Z })
                    ] }),
                    /* @__PURE__ */ e.jsx(I, { className: t(v) })
                  ]
                }
              )
            }
          ),
          /* @__PURE__ */ e.jsx("div", { className: t("max-lg:hidden flex-1") }),
          /* @__PURE__ */ e.jsx(c, { content: "Toggle chat", side: "bottom", align: "center", children: /* @__PURE__ */ e.jsx(
            "button",
            {
              onClick: () => a.toggleChat(),
              type: "button",
              className: t(o, l, n, V && p),
              children: /* @__PURE__ */ e.jsx(se, { className: t("h-5 w-auto") })
            }
          ) }),
          /* @__PURE__ */ e.jsx(
            c,
            {
              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,
                    l,
                    n,
                    h === "library" && s === "desktop" && p
                  ),
                  children: /* @__PURE__ */ e.jsx(q, { className: t("h-5 w-auto") })
                }
              )
            }
          ),
          /* @__PURE__ */ e.jsx("div", { className: d }),
          /* @__PURE__ */ e.jsx(c, { content: "Color theme & fonts", side: "bottom", align: "center", children: /* @__PURE__ */ e.jsx(
            "button",
            {
              onClick: () => a.togglePanel("theme"),
              type: "button",
              className: t(o, l, n, h === "theme" && p),
              children: /* @__PURE__ */ e.jsx(pe, { className: t("h-5 w-auto") })
            }
          ) }),
          /* @__PURE__ */ e.jsx(c, { content: "Page / Site settings", side: "bottom", align: "center", children: /* @__PURE__ */ e.jsx(
            "button",
            {
              onClick: () => a.togglePanel("settings"),
              type: "button",
              className: t(o, l, n, h === "settings" && p),
              children: /* @__PURE__ */ e.jsx(te, { className: t("h-5 w-auto") })
            }
          ) }),
          /* @__PURE__ */ e.jsx("div", { className: d }),
          /* @__PURE__ */ e.jsx(c, { content: "Undo", side: "bottom", align: "center", "aria-disabled": !k, children: /* @__PURE__ */ e.jsx(
            "button",
            {
              disabled: !k,
              onClick: () => z(),
              type: "button",
              className: t(o, n, l, "ml-auto"),
              children: /* @__PURE__ */ e.jsx(_, { className: t("h-5 w-auto") })
            }
          ) }),
          /* @__PURE__ */ e.jsx(c, { content: "Redo", side: "bottom", align: "center", "aria-disabled": !w, children: /* @__PURE__ */ e.jsx(
            "button",
            {
              disabled: !w,
              onClick: () => B(),
              type: "button",
              className: t(o, l, n),
              children: /* @__PURE__ */ e.jsx(F, { className: t("h-5 w-auto") })
            }
          ) }),
          /* @__PURE__ */ e.jsx("div", { className: d }),
          /* @__PURE__ */ e.jsx(
            c,
            {
              content: `Switch to ${s === "desktop" ? "mobile" : "desktop"} view`,
              side: "bottom",
              align: "center",
              children: /* @__PURE__ */ e.jsxs("button", { type: "button", className: t(o, l, n), onClick: $, children: [
                s === "desktop" && /* @__PURE__ */ e.jsx(G, { className: t("h-5 w-auto") }),
                s === "mobile" && /* @__PURE__ */ e.jsx(J, { className: t("h-5 w-auto") })
              ] })
            }
          ),
          /* @__PURE__ */ e.jsx(
            "button",
            {
              onClick: U,
              disabled: !M,
              type: "button",
              className: t(o, l, n),
              children: /* @__PURE__ */ e.jsx(K, { className: t("h-5 w-auto") })
            }
          ),
          /* @__PURE__ */ e.jsx(
            "button",
            {
              onClick: O,
              disabled: !L,
              type: "button",
              className: t(o, l, n),
              children: /* @__PURE__ */ e.jsx(Q, { className: t("h-5 w-auto") })
            }
          ),
          /* @__PURE__ */ e.jsx(c, { content: "Click to reset zoom", side: "bottom", align: "center", children: /* @__PURE__ */ e.jsxs(
            "button",
            {
              type: "button",
              onClick: T,
              className: t(
                "text-gray-500 dark:text-dark-200 text-[.85rem] text-right cursor-pointer hover:text-upstart-800 min-w-[40px]"
              ),
              children: [
                (D * 100).toFixed(0),
                "%"
              ]
            }
          ) }),
          /* @__PURE__ */ e.jsx("div", { className: d }),
          /* @__PURE__ */ e.jsx(c, { content: "Open preview", side: "bottom", align: "center", children: /* @__PURE__ */ e.jsx(
            "button",
            {
              type: "button",
              className: t(o, l, n),
              onClick: () => {
                window.open(`/sites/${r.siteId}/pages/${r.id}/preview`, "upstart_preview");
              },
              children: /* @__PURE__ */ e.jsx(X, { 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",
                  g.credits === 0 && "text-red-800 font-semibold"
                ),
                children: [
                  /* @__PURE__ */ e.jsx(H, { className: t("opacity-60 w-4 h-4") }),
                  " ",
                  g.credits.toLocaleString(),
                  " credits"
                ]
              }
            ),
            /* @__PURE__ */ e.jsxs("div", { className: t("inline-flex gap-1 items-center"), children: [
              /* @__PURE__ */ e.jsxs(fe, { children: [
                /* @__PURE__ */ e.jsx(we, { 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(ke, { 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, l), children: /* @__PURE__ */ e.jsx(W, { 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(
            R,
            {
              id: "publish-menu-btn",
              items: [
                { label: "Publish this page", onClick: () => N() },
                { label: "Publish all pages", onClick: () => N(!0) },
                { type: "separator" },
                { label: "Schedule publication", onClick: () => a.onShowPopup?.("schedule-publish") }
              ],
              children: /* @__PURE__ */ e.jsx("button", { type: "button", className: t(o, E, y), 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",
                    C({ fontSize: ".94rem" })
                  ),
                  children: [
                    /* @__PURE__ */ e.jsx(Y, { className: t("h-4 w-auto stroke-orange-600") }),
                    "Publish",
                    /* @__PURE__ */ e.jsx(I, { className: t(v, "!text-orange-700") })
                  ]
                }
              ) })
            }
          )
        ] })
      ]
    }
  );
}
function R(a) {
  return /* @__PURE__ */ e.jsxs(Ne, { children: [
    /* @__PURE__ */ e.jsx(ye, { className: "focus:outline-none", id: a.id, children: a.children }),
    /* @__PURE__ */ e.jsx(ve, { 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(Ce, { children: s.label }, s.label) : s.type === "checkbox" ? /* @__PURE__ */ e.jsx(Pe, { 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(Se, { 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 {
  Ke as default
};
//# sourceMappingURL=NavBar.js.map
