import { a3 as i, fp as A, dp as k, hj as r, ir as C, j3 as g, H as e, cX as I, i7 as u, is as L, a4 as p, j4 as v, h$ as P, i0 as T, i1 as H, it as S, ad as d, I as _, i8 as j, ij as m, ik as E, j5 as U, j6 as R, iu as B, ii as c, j7 as D } from "./56c67d3b.js";
import { b as V, H as $, A as F, a as M } from "./3326e676.js";
import z, { useState as N } from "react";
import "react-dom";
import "./0d7df38d.js";
import "./0a391aff.js";
const O = i.div`
  font-weight: 500;
  font-size: 14px;
  color: ${(a) => A(a.$bgColor) ? "#ffffff" : "#000000"};
  font-style: normal;
  line-height: 24px;
  margin-right: 8px;
  margin-left: 20px;
  max-width: 264px;
  ${k};
`, W = i.a`
  display: flex;
  align-items: center;
`, G = i(B)`
  height: 28px;
  width: 28px;
`, X = i(c)`
  min-width: 60px;
  padding: 0;
  height: 28px;
  margin-right: 4px;
`, q = i(c)`
  min-width: 60px;
  height: 28px;
`, J = i(c)`
  &&& {
    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 = i(D)`
  margin-right: 4px;

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