import { Y as d, db as z, a4 as A, w as c, aA as D, dc as j, a2 as W, bI as R, Z as y, dd as F, de as U, df as _, az as L, X as J, U as q, F as s, bW as X, a6 as g, G as T, a7 as b, a8 as u, af as v, bJ as Y, a9 as Z, aa as Q, ac as ee, ab as te, s as ae, O as C, dg as ne, ad as oe, av as ie, dh as f, di as re, dj as H, dk as se, dl as de, dm as S, dn as le, dp as ce, dq as I, _ as V, cC as be, x as ge, dr as he, ds as ue, dt as me, du as pe, dv as B } from "./603b75d9.js";
import { useContext as $, useCallback as ye } from "react";
import "react-dom";
const Ce = [{
  label: d("tabbedContainer.switchTab"),
  value: "change",
  description: d("tabbedContainer.switchTabDesc")
}], we = {
  tabs: z,
  selectedTabKey: A("key", "Tab1"),
  containers: c(ae(he), {
    0: {
      layout: {},
      items: {}
    },
    1: {
      layout: {},
      items: {}
    }
  }),
  autoHeight: D,
  showVerticalScrollbar: c(C, !1),
  horizontalGridCells: j,
  scrollbars: c(C, !1),
  placement: c(ne, "top"),
  onEvent: W(Ce),
  disabled: R,
  showHeader: c(C, !0),
  style: y(F, "style"),
  headerStyle: y(U, "headerStyle"),
  bodyStyle: y(_, "bodyStyle"),
  animationStyle: y(L, "animationStyle"),
  tabsGutter: c(oe, 32),
  tabsCentered: c(C, !1)
}, fe = (e, t, a) => ie`
    &.ant-tabs {
      overflow: hidden;
      border: ${e.borderWidth} ${e.borderStyle} ${e.border};
      border-radius: ${e.radius};
      padding: ${e.padding};
      ${f(e)}

      > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
        height: 100%;
        .react-grid-layout {
          border-radius: 0;
          padding: ${a.containerBodyPadding};
          ${f(a)}
        }
      }

      > .ant-tabs-nav {
        padding: ${t.containerHeaderPadding};
        ${f({
  background: t.headerBackground,
  backgroundImage: t.headerBackgroundImage,
  backgroundImageSize: t.headerBackgroundImageSize,
  backgroundImageRepeat: t.headerBackgroundImageRepeat,
  backgroundImageOrigin: t.headerBackgroundImageOrigin,
  backgroundImagePosition: t.headerBackgroundImagePosition
})}

        .ant-tabs-tab {
          div {
            color: #8b8fa3;
          }

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

        .ant-tabs-tab-btn {
          color: ${e.tabText} !important;
          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};
        }
      }
    }
  `, Se = J(ue)`
  &.ant-tabs {
    height: 100%;
    ${(e) => e.$animationStyle}
  }

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