import { b9 as e, f4 as A, cI as k, i9 as r, ia as I, ib as m, V as i, eA as C, ic as u, id as L, a0 as c, ie as P, ig as v, ih as T, ii as S, h$ as E, ij as U, P as d, bh as _, ik as H, il as B, im as g, io as D, ip as R, iq as V, ir as $, is as j, it as F, gj as l, iu as M } from "./684d2f28.js";
import { useState as z } from "react";
import "react-dom";
const N = e.div`
  font-weight: 500;
  font-size: 14px;
  color: ${(s) => A(s.$bgColor) ? "#ffffff" : "#000000"};
  font-style: normal;
  line-height: 24px;
  margin-right: 8px;
  margin-left: 20px;
  max-width: 264px;
  ${k};
`, O = e.a`
  display: flex;
  align-items: center;
`, W = e(F)`
  height: 28px;
  width: 28px;
`, q = e(l)`
  min-width: 60px;
  padding: 0;
  height: 28px;
  margin-right: 4px;
`, G = e(l)`
  min-width: 60px;
  height: 28px;
`, J = e(l)`
  &&& {
    color: #ffffff;
    background: #8b8fa34c;
    border: none;
    height: 28px;
    margin-right: 8px;
    min-width: 60px;
    padding: 0;
    cursor: pointer;
  
    &:hover {
      background: #666666;
      color: #ffffff;
      border: none;
    }
  
    &:focus {
      background: #666666;
      color: #ffffff;
      border: none;
    }
  }
`, K = e(M)`
  margin-right: 4px;

  g g {
    fill: #ffffff;
  }
`, Q = e(l)`
  min-width: 60px;
  height: 28px;
  margin-right: 24px;
  padding: 0;
`, X = e.div`
  display: inherit;
  @media screen and (max-width: 500px) {
    > div:nth-of-type(1),
    > button {
      display: none;
    }
  }
`;
function Y(s) {
  const {
    user: n
  } = s, t = r(I), a = r(m);
  return t ? /* @__PURE__ */ i(C.Avatar, {
    shape: "circle",
    size: 28
  }) : /* @__PURE__ */ i("div", {
    children: n.isAnonymous ? a ? null : /* @__PURE__ */ i(q, {
      buttonType: "primary",
      onClick: () => u.push(L),
      children: c("userAuth.login")
    }) : /* @__PURE__ */ i(P, {
      user: n,
      profileSide: 28,
      fontSize: 12
    })
  });
}
const ni = () => {
  const s = v(), n = r(T), t = r(S), a = E(), h = r(m), o = r(U), [x, f] = z(!1), p = s.viewMode === "view_marketplace", w = /* @__PURE__ */ d(_, {
    children: [/* @__PURE__ */ i(O, {
      onClick: () => u.push(H),
      children: /* @__PURE__ */ i(W, {
        branding: !0
      })
    }), p && /* @__PURE__ */ i(B, {
      setEdit: () => {
      },
      isViewMarketplaceMode: p
    }), !p && /* @__PURE__ */ i(N, {
      $bgColor: (o == null ? void 0 : o.headerColor) ?? "#2c2c2c",
      children: t && t.name
    })]
  }), b = /* @__PURE__ */ d(X, {
    children: [g(n, t) && /* @__PURE__ */ i(D, {
      applicationId: a,
      visible: x,
      onVisibleChange: (y) => !y && f(!1)
    }), g(n, t) && /* @__PURE__ */ i(J, {
      onClick: () => f(!0),
      children: R
    }), V(n, t) && /* @__PURE__ */ d(Q, {
      buttonType: "primary",
      onClick: () => (
        // redirection to app by JS will cause the problem that queries don't execute on initialization
        // so just open a new window.
        window.open($(a, "edit"))
      ),
      children: [/* @__PURE__ */ i(K, {}), c("edit")]
    }), !!h && /* @__PURE__ */ i(G, {
      style: {
        marginRight: n.isAnonymous ? "" : "24px"
      },
      buttonType: "primary",
      onClick: () => {
        window.open(c("template.cloneUrl") + h);
      },
      children: c("header.clone")
    }), /* @__PURE__ */ i(Y, {
      user: n
    })]
  });
  return /* @__PURE__ */ i(j, {
    headerStart: w,
    headerEnd: b,
    style: {
      backgroundColor: o == null ? void 0 : o.headerColor
    }
  });
};
export {
  Y as HeaderProfile,
  ni as PreviewHeader
};
