import { a3 as d, X as O, w, ed as P, c3 as N, a5 as C, ee as I, aG as L, a4 as s, U as R, H as e, I as $, ad as a, ao as A, ae as r, af as l, ef as F, am as n, ag as k, ah as T, aj as M, ai as H, a9 as B, as as D, ar as G } from "./56c67d3b.js";
import { useContext as o } from "react";
import { navListComp as K } from "./642e506a.js";
import { a as J } from "./b2ce40f6.js";
import "react-dom";
const X = d("div")`
${(t) => t.$animationStyle}
  height: 100%;
  border-radius: ${(t) => t.$borderRadius ? t.$borderRadius : "2px"};
  box-sizing: border-box;
  border: ${(t) => t.$borderWidth ? `${t.$borderWidth}` : "1px"} ${(t) => t.$borderStyle} ${(t) => t.$borderColor};
  background: ${(t) => t.$bgColor};
`, q = d("div")`
  // margin: 0 -16px;
  height: 100%;
  display: flex;
  justify-content: ${(t) => t.$justify ? "space-between" : "left"};
`, Q = d.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;
  }
`, Y = d.div`
  cursor: pointer;
  height: 30px;
  line-height: 0;
  margin-left: 16px;

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