import { a0 as d, cY as z, bP as j, w as l, s as A, cv as G, bv as y, cZ as R, bL as L, bd as W, bB as k, c_ as _, c$ as U, d0 as F, cn as J, b9 as Y, U as Z, V as s, d1 as q, P as g, bh as $, bi as b, bj as m, bg as T, bk as Q, bl as X, bn as ee, bo as te, bG as ae, d2 as ne, co as oe, d3 as re, d4 as ie, d5 as x, d6 as I, d7 as se, d8 as w, d9 as de, da as ce, L as H, c1 as f, cr as le, x as be, db as ge, dc as ue, dd as B } from "./684d2f28.js";
import { useContext as V, useCallback as he } from "react";
import "react-dom";
const pe = [{
  label: d("tabbedContainer.switchTab"),
  value: "change",
  description: d("tabbedContainer.switchTabDesc")
}], me = {
  tabs: z,
  selectedTabKey: j("key", "Tab1"),
  containers: l(A(ne), {
    0: {
      layout: {},
      items: {}
    },
    1: {
      layout: {},
      items: {}
    }
  }),
  autoHeight: G,
  scrollbars: l(y, !1),
  placement: l(R, "top"),
  onEvent: L(pe),
  disabled: W,
  showHeader: l(y, !0),
  style: k(_),
  headerStyle: k(U),
  bodyStyle: k(F),
  tabsGutter: l(J, 32),
  tabsCentered: l(y, !1)
}, Ce = (e, t, a) => oe`
    &.ant-tabs {
      overflow: hidden;
      border: ${e.borderWidth} solid ${e.border};
      border-radius: ${e.radius};
      padding: ${e.padding};
      background-color: ${e.background};
      background-image: ${e.backgroundImage};
      background-repeat: ${e.backgroundImageRepeat};
      background-size: ${e.backgroundImageSize};
      background-position: ${e.backgroundImagePosition};
      background-origin: ${e.backgroundImageOrigin};

      > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
        height: 100%;
        .react-grid-layout {
          border-radius: 0;
          background-color: ${a.background || "transparent"};
          background-image: ${a.backgroundImage};
          background-repeat: ${a.backgroundImageRepeat};
          background-size: ${a.backgroundImageSize};
          background-position: ${a.backgroundImagePosition};
          background-origin: ${a.backgroundImageOrigin};

        }
      }

      > .ant-tabs-nav {
        background-color: ${t.headerBackground || "transparent"};
        background-image: ${t.headerBackgroundImage};
        background-repeat: ${t.headerBackgroundImageRepeat};
        background-size: ${t.headerBackgroundImageSize};
        background-position: ${t.headerBackgroundImagePosition};
        background-origin: ${t.headerBackgroundImageOrigin};

        .ant-tabs-tab {
          div {
            color: ${e.tabText};
          }

          &.ant-tabs-tab-active div {
            color: ${e.accent};
          }
        }

        .ant-tabs-tab-btn {
          font-size: ${e.textSize};
          font-family:${e.fontFamily};
          font-weight:${e.textWeight};
          text-transform:${e.textTransform};
          text-decoration:${e.textDecoration};
          font-style:${e.fontStyle};
        }

        .ant-tabs-ink-bar {
          background-color: ${e.accent};
        }

        ::before {
          border-color: ${e.border};
        }
      }
    }
  `, ye = Y(re)`
  &.ant-tabs {
    height: 100%;
  }

  .ant-tabs-content-animated {
    transition-duration: 0ms;
  }

  .ant-tabs-content {
    height: 100%;
    // margin-top: -16px;
  }

  .ant-tabs-nav {
    display: ${(e) => e.$showHeader ? "block" : "none"};
    padding: 0 ${(e) => e.$isMobile ? 16 : 24}px;
    background: white;
    margin: 0px;
  }

  .ant-tabs-tab + .ant-tabs-tab {
    margin: 0 0 0 20px;
  }

  .ant-tabs-nav-operations {
    margin-right: -24px;
  }

  ${(e) => e.$style && Ce(e.$style, e.$headerStyle, e.$bodyStyle)}
`, ke = (e) => /* @__PURE__ */ s(ge, {
  ...e,
  emptyRows: 15,
  hintPlaceholder: ue
}), we = (e) => {
  let {
    tabs: t,
    containers: a,
    dispatch: n,
    style: o,
    headerStyle: c,
    bodyStyle: r
  } = e;
  const h = t.filter((i) => !i.hidden), v = h.find((i) => i.key === e.selectedTabKey.value), O = v ? v.key : h.length > 0 ? h[0].key : void 0, E = he((i, p) => {
    const u = p.target;
    u.parentNode.click ? u.parentNode.click() : u.parentNode.parentNode.click();
  }, []), M = V(T).getAppSettings().maxWidth, P = ie(M), N = e.showHeader.valueOf(), K = P ? 8 : 0, D = h.map((i) => {
    const p = String(i.id), u = B(B(n, "containers"), p), C = a[p].children, S = i.icon.props.value;
    return {
      label: /* @__PURE__ */ g($, {
        children: [i.iconPosition === "left" && S && /* @__PURE__ */ s("span", {
          style: {
            marginRight: "4px"
          },
          children: i.icon
        }), i.label, i.iconPosition === "right" && S && /* @__PURE__ */ s("span", {
          style: {
            marginLeft: "4px"
          },
          children: i.icon
        })]
      }),
      key: i.key,
      forceRender: !0,
      children: /* @__PURE__ */ s(x.Provider, {
        value: r.background,
        children: /* @__PURE__ */ s(I, {
          style: {
            height: e.autoHeight ? "100%" : "auto",
            margin: "0px",
            padding: "0px"
          },
          hideScrollbar: !e.scrollbars,
          children: /* @__PURE__ */ s(ke, {
            layout: C.layout.getView(),
            items: se(C.items.getView()),
            positionParams: C.positionParams.getView(),
            dispatch: u,
            autoHeight: e.autoHeight,
            containerPadding: [K, 20]
          })
        })
      })
    };
  });
  return /* @__PURE__ */ s(I, {
    style: {
      height: e.autoHeight ? "100%" : "auto",
      margin: "0px",
      padding: "0px"
    },
    hideScrollbar: !e.scrollbars,
    children: /* @__PURE__ */ s("div", {
      style: {
        padding: e.style.margin,
        height: e.autoHeight ? "100%" : "auto"
      },
      children: /* @__PURE__ */ s(x.Provider, {
        value: c.headerBackground,
        children: /* @__PURE__ */ s(ye, {
          tabPosition: e.placement,
          activeKey: O,
          $style: o,
          $headerStyle: c,
          $bodyStyle: r,
          $showHeader: N,
          onChange: (i) => {
            i !== e.selectedTabKey.value && (e.selectedTabKey.onChange(i), e.onEvent("change"));
          },
          onTabClick: E,
          animated: !0,
          $isMobile: P,
          items: D,
          tabBarGutter: e.tabsGutter,
          centered: e.tabsCentered
        })
      })
    })
  });
}, fe = function() {
  return new Z(me, (e, t) => /* @__PURE__ */ s(q.Provider, {
    value: e.disabled,
    children: /* @__PURE__ */ s(we, {
      ...e,
      dispatch: t
    })
  })).setPropertyViewFn((e) => /* @__PURE__ */ g($, {
    children: [/* @__PURE__ */ g(b, {
      name: m.basic,
      children: [e.tabs.propertyView({
        title: d("tabbedContainer.tab"),
        newOptionLabel: "Tab"
      }), e.selectedTabKey.propertyView({
        label: d("prop.defaultValue")
      })]
    }), ["logic", "both"].includes(V(T).editorModeStatus) && /* @__PURE__ */ g(b, {
      name: m.interaction,
      children: [e.onEvent.getPropertyView(), Q(e), e.showHeader.propertyView({
        label: d("tabbedContainer.showTabs")
      }), X(e)]
    }), ["layout", "both"].includes(V(T).editorModeStatus) && /* @__PURE__ */ g($, {
      children: [/* @__PURE__ */ g(b, {
        name: m.layout,
        children: [e.placement.propertyView({
          label: d("tabbedContainer.placement"),
          radioButton: !0
        }), e.tabsCentered.propertyView({
          label: d("tabbedContainer.tabsCentered")
        }), e.tabsGutter.propertyView({
          label: d("tabbedContainer.gutter"),
          tooltip: d("tabbedContainer.gutterTooltip")
        }), e.autoHeight.getPropertyView(), !e.autoHeight.getView() && e.scrollbars.propertyView({
          label: d("prop.scrollbar")
        })]
      }), /* @__PURE__ */ s(b, {
        name: m.style,
        children: e.style.getPropertyView()
      }), e.showHeader.getView() && /* @__PURE__ */ s(b, {
        name: "Header Style",
        children: e.headerStyle.getPropertyView()
      }), /* @__PURE__ */ s(b, {
        name: "Body Style",
        children: e.bodyStyle.getPropertyView()
      })]
    })]
  })).build();
}();
class $e extends fe {
  syncContainers() {
    const t = this.children.tabs.getView(), a = new Set(t.map((r) => String(r.id)));
    let n = this.children.containers.getView();
    const o = [];
    Object.keys(n).forEach((r) => {
      a.has(r) || o.push(w("containers", w(r, de())));
    }), a.forEach((r) => {
      n.hasOwnProperty(r) || o.push(w("containers", ce(r, {
        layout: {},
        items: {}
      })));
    });
    let c = this;
    return o.forEach((r) => {
      c = c.reduce(r);
    }), c;
  }
  reduce(t) {
    if (t.type === H.CUSTOM) {
      const n = t.value;
      if (n.type === "push") {
        const o = n.value;
        f.isEmpty(o.key) && (o.key = o.label), t = {
          ...t,
          value: {
            ...n,
            value: {
              ...o
            }
          }
        };
      }
      if (n.type === "delete" && this.children.tabs.getView().length <= 1)
        return le.warning(d("tabbedContainer.atLeastOneTabError")), this;
    }
    let a = super.reduce(t);
    return t.type === H.UPDATE_NODES_V2 && (a = a.syncContainers()), a;
  }
  realSimpleContainer(t) {
    let a = this.children.selectedTabKey.getView().value;
    const n = this.children.tabs.getView(), o = n.find((r) => r.key === a) ?? n[0], c = String(o.id);
    return f.isNil(t) ? this.children.containers.children[c] : Object.values(this.children.containers.children).find((r) => r.realSimpleContainer(t));
  }
  getCompTree() {
    const t = this.children.containers.getView(), a = Object.values(t).map((n) => n.getCompTree());
    return be(a);
  }
  findContainer(t) {
    const a = this.children.containers.getView();
    for (const n of Object.values(a)) {
      const o = n.findContainer(t);
      if (o)
        return o === n ? this : o;
    }
  }
  getPasteValue(t) {
    const a = this.children.containers.getView(), n = f.mapValues(a, (o) => o.getPasteValue(t));
    return {
      ...this.toJsonValue(),
      containers: n
    };
  }
  autoHeight() {
    return this.children.autoHeight.getView();
  }
}
const xe = ee($e, [new te("selectedTabKey", d("tabbedContainer.selectedTabKeyDesc")), ae]);
export {
  fe as TabbedContainerBaseComp,
  xe as TabbedContainerComp
};
