import { X as i, f1 as b, cT as C, hY as r, iZ as k, jz as m, F as e, ey as I, iJ as u, i_ as L, Y as c, jA as T, iB as v, iC as P, iD as _, i$ as S, a6 as d, G as E, iK as H, iT as g, iU as U, jB as j, jC as B, j0 as D, gh as p, jD as R } from "./603b75d9.js";
import { b as F, H as V, A as $, a as z } from "./b15ebc70.js";
import M, { useState as N } from "react";
import "react-dom";
import "./d13144d5.js";
const O = i.div`
  font-weight: 500;
  font-size: 14px;
  color: ${(a) => b(a.$bgColor) ? "#ffffff" : "#000000"};
  font-style: normal;
  line-height: 24px;
  margin-right: 8px;
  margin-left: 20px;
  max-width: 264px;
  ${C};
`, G = i.a`
  display: flex;
  align-items: center;
`, W = i(D)`
  height: 28px;
  width: 28px;
`, Y = i(p)`
  min-width: 60px;
  padding: 0;
  height: 28px;
  margin-right: 4px;
`, J = i(p)`
  min-width: 60px;
  height: 28px;
`, K = i(p)`
  &&& {
    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;
    }
  }
`, X = i(R)`
  margin-right: 4px;

  g g {
    fill: #ffffff;
  }
`, Z = i(p)`
  min-width: 60px;
  height: 28px;
  margin-right: 24px;
  padding: 0;
`, q = i.div`
  display: inherit;
  @media screen and (max-width: 500px) {
    > div:nth-of-type(1),
    > button {
      display: none;
    }
  }
`;
function Q(a) {
  const {
    user: o
  } = a, t = r(k), s = r(m);
  return t ? /* @__PURE__ */ e(I.Avatar, {
    shape: "circle",
    size: 28
  }) : /* @__PURE__ */ e("div", {
    children: o.isAnonymous ? s ? null : /* @__PURE__ */ e(Y, {
      buttonType: "primary",
      onClick: () => u.push(L),
      children: c("userAuth.login")
    }) : /* @__PURE__ */ e(F, {
      user: o,
      profileSide: 28,
      fontSize: 12
    })
  });
}
const ee = () => {
  const a = T(), o = r(v), t = r(P), s = _(), h = r(m), n = r(S), [x, f] = N(!1), l = a.viewMode === "view_marketplace", w = /* @__PURE__ */ d(E, {
    children: [/* @__PURE__ */ e(G, {
      onClick: () => u.push(H),
      children: /* @__PURE__ */ e(W, {
        branding: !0
      })
    }), l && /* @__PURE__ */ e(V, {
      setEdit: () => {
      },
      isViewMarketplaceMode: l
    }), !l && /* @__PURE__ */ e(O, {
      $bgColor: (n == null ? void 0 : n.headerColor) ?? "#2c2c2c",
      children: t && t.name
    })]
  }), y = /* @__PURE__ */ d(q, {
    children: [g(o, t) && /* @__PURE__ */ e($, {
      applicationId: s,
      visible: x,
      onVisibleChange: (A) => !A && f(!1)
    }), g(o, t) && /* @__PURE__ */ e(K, {
      onClick: () => f(!0),
      children: U
    }), j(o, t) && /* @__PURE__ */ d(Z, {
      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(B(s, "edit"))
      ),
      children: [/* @__PURE__ */ e(X, {}), c("edit")]
    }), !!h && /* @__PURE__ */ e(J, {
      style: {
        marginRight: o.isAnonymous ? "" : "24px"
      },
      buttonType: "primary",
      onClick: () => {
        window.open(c("template.cloneUrl") + h);
      },
      children: c("header.clone")
    }), /* @__PURE__ */ e(Q, {
      user: o
    })]
  });
  return /* @__PURE__ */ e(z, {
    headerStart: w,
    headerEnd: y,
    style: {
      backgroundColor: n == null ? void 0 : n.headerColor
    }
  });
}, ae = M.memo(ee);
export {
  Q as HeaderProfile,
  ae as PreviewHeader
};
