import { b9 as l, ba as j, w, bL as O, df as P, bA as L, bB as N, e0 as R, a0 as r, U as A, V as e, bh as C, P as a, bx as F, bi as s, bj as c, e1 as I, bg as o, bl as S, bn as B, bo as k, bG as T, bz as D, cw as H } from "./684d2f28.js";
import { useContext as n } from "react";
import { navListComp as G } from "./b14e1437.js";
import { a as K } from "./ecf3338c.js";
import "react-dom";
const J = l("div")`
  height: 100%;
  border-radius: ${(t) => t.$borderRadius ? t.$borderRadius : "2px"};
  box-sizing: border-box;
  border: ${(t) => t.$borderWidth ? `${t.$borderWidth}` : "1px"} solid ${(t) => t.$borderColor};
  background-color: ${(t) => t.$bgColor};
`, q = l("div")`
  // margin: 0 -16px;
  height: 100%;
  display: flex;
  justify-content: ${(t) => t.$justify ? "space-between" : "left"};
`, Q = l.div`
  height: 30px;
  line-height: 30px;
  padding: ${(t) => t.$padding ? t.$padding : "0 16px"};
  color: ${(t) => t.$active ? t.$activeColor : t.$color};
  font-weight: ${(t) => t.$textWeight ? t.$textWeight : 500};
  font-family:${(t) => t.$fontFamily ? t.$fontFamily : "sans-serif"};
  font-style:${(t) => t.$fontStyle ? t.$fontStyle : "normal"};
  font-size:${(t) => t.$textSize ? t.$textSize : "14px"};
  text-transform:${(t) => t.$textTransform ? t.$textTransform : ""};
  text-decoration:${(t) => t.$textDecoration ? t.$textDecoration : ""};
  margin:${(t) => t.$margin ? t.$margin : "0px"};
  
  &:hover {
    color: ${(t) => t.$activeColor};
    cursor: pointer;
  }

  .anticon {
    margin-left: 5px;
  }
`, X = l.div`
  cursor: pointer;
  height: 30px;
  line-height: 0;
  margin-left: 16px;

  img {
    height: 100%;
  }
`, Y = l.div`
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: ${(t) => t.$align};
`, Z = l(D)`
  &.ant-dropdown-menu {
    min-width: 160px;
  }
`, _ = [H];
function p(t) {
  return t && (t.hasOwnProperty("accentColor") || t.hasOwnProperty("backgroundColor") || t.hasOwnProperty("borderColor") || t.hasOwnProperty("color")) ? {
    text: t.color,
    accent: t.accentColor,
    background: t.backgroundColor,
    border: t.borderColor
  } : t;
}
const tt = {
  logoUrl: j,
  logoEvent: w(O(_), [{
    name: "click"
  }]),
  horizontalAlignment: P(),
  style: L(N(R), p),
  items: w(G(), [{
    label: r("menuItem") + " 1"
  }])
}, et = new A(tt, (t) => {
  const M = t.items, $ = /* @__PURE__ */ e(C, {
    children: M.map((V, b) => {
      const {
        hidden: z,
        label: E,
        items: g,
        active: U,
        onEvent: W
      } = V.getView();
      if (z)
        return null;
      const y = g.filter((i) => !i.children.hidden.getView()), f = [], m = [];
      y.forEach((i, u) => {
        const d = u + "";
        i.children.active.getView() && m.push(d), f.push({
          key: d,
          label: i.children.label.getView()
        });
      });
      const x = /* @__PURE__ */ a(Q, {
        $active: U || m.length > 0,
        $color: t.style.text,
        $activeColor: t.style.accent,
        $fontFamily: t.style.fontFamily,
        $fontStyle: t.style.fontStyle,
        $textWeight: t.style.textWeight,
        $textSize: t.style.textSize,
        $padding: t.style.padding,
        $textTransform: t.style.textTransform,
        $textDecoration: t.style.textDecoration,
        $margin: t.style.margin,
        onClick: () => W("click"),
        children: [E, g.length > 0 && /* @__PURE__ */ e(K, {})]
      }, b);
      if (y.length > 0) {
        const i = /* @__PURE__ */ e(Z, {
          onClick: (u) => {
            var v;
            const {
              onEvent: d
            } = (v = g[Number(u.key)]) == null ? void 0 : v.getView();
            d("click");
          },
          selectedKeys: m,
          items: f
        });
        return /* @__PURE__ */ e(F, {
          dropdownRender: () => i,
          children: x
        }, b);
      }
      return x;
    })
  }), h = t.horizontalAlignment === "justify";
  return /* @__PURE__ */ e(J, {
    $borderColor: t.style.border,
    $bgColor: t.style.background,
    $borderWidth: t.style.borderWidth,
    $borderRadius: t.style.borderRadius,
    children: /* @__PURE__ */ a(q, {
      $justify: h,
      children: [t.logoUrl && /* @__PURE__ */ e(X, {
        onClick: () => t.logoEvent("click"),
        children: /* @__PURE__ */ e("img", {
          src: t.logoUrl,
          alt: "LOGO"
        })
      }), h ? $ : /* @__PURE__ */ e(Y, {
        $align: t.horizontalAlignment,
        children: $
      })]
    })
  });
}).setPropertyViewFn((t) => /* @__PURE__ */ a(C, {
  children: [/* @__PURE__ */ e(s, {
    name: c.basic,
    children: I(t.items)
  }), (n(o).editorModeStatus === "logic" || n(o).editorModeStatus === "both") && /* @__PURE__ */ e(s, {
    name: c.interaction,
    children: S(t)
  }), (n(o).editorModeStatus === "layout" || n(o).editorModeStatus === "both") && /* @__PURE__ */ a(s, {
    name: c.layout,
    children: [t.horizontalAlignment.propertyView({
      label: r("navigation.horizontalAlignment"),
      radioButton: !0
    }), S(t)]
  }), (n(o).editorModeStatus === "logic" || n(o).editorModeStatus === "both") && /* @__PURE__ */ a(s, {
    name: c.advanced,
    children: [t.logoUrl.propertyView({
      label: r("navigation.logoURL"),
      tooltip: r("navigation.logoURLDesc")
    }), t.logoUrl.getView() && t.logoEvent.propertyView({
      inline: !0
    })]
  }), (n(o).editorModeStatus === "layout" || n(o).editorModeStatus === "both") && /* @__PURE__ */ e(s, {
    name: c.style,
    children: t.style.getPropertyView()
  })]
})).build(), at = B(et, [new k("logoUrl", r("navigation.logoURLDesc")), T, new k("items", r("navigation.itemsDesc"))]);
export {
  at as NavComp
};
