import { a3 as k, f5 as T, bX as W, f6 as j, w as l, dZ as A, aH as N, a5 as C, f7 as U, f8 as _, aG as F, U as J, H as s, ad as m, I as L, ae as u, af as g, a4 as a, am as b, c0 as X, ag as Z, f9 as H, ah as q, ai as K, s as Q, V as f, ak as p, fa as Y, fb as ee, fc as te, fd as S, fe as oe, ff as ae, e0 as R, _ as x, cT as ne, x as re, fg as ie, fh as se, fi as le, fj as ce, fk as ue, fl as M } from "./56c67d3b.js";
import { useContext as $ } from "react";
import "react-dom";
const de = k(ie)`
  ${(e) => e.$animationStyle}
  height: 100%;
  border-radius: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.radius;
}};
  border-width: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.borderWidth;
}};
  border-color: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.border;
}};
  border-style: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.borderStyle;
}};
  padding: ${(e) => e.$style.padding};
  rotate: ${(e) => e.$style.rotation}
  overflow: ${(e) => e.$showScrollbar ? "auto" : "hidden"};
   ::-webkit-scrollbar {
    display: ${(e) => e.$showScrollbar ? "block" : "none"};
    }
  ${(e) => T(e.$style)}
`, me = k(se)`
  display: flex;
  flex-direction: column;
  flex-basis: ${(e) => e.$minWidth};
  max-width: ${(e) => e.$minWidth};

  > div {
    height: ${(e) => e.$matchColumnsHeight ? "100%" : "auto"};
    border-radius: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.radius;
}};
    border-width: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.borderWidth;
}}px;
    border-color: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.border;
}};
    border-style: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.borderStyle;
}};
    margin: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.margin;
}};
    padding: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.padding;
}};
    ${(e) => e.$style && T(e.$style)}
  }
`, pe = {
  disabled: W,
  columns: j,
  containers: l(Q(le), {
    0: {
      view: {},
      layout: {}
    },
    1: {
      view: {},
      layout: {}
    }
  }),
  horizontalGridCells: A,
  autoHeight: N,
  rowBreak: l(f, !1),
  matchColumnsHeight: l(f, !0),
  style: C(U, "style"),
  columnStyle: C(_, "columnStyle"),
  mainScrollbar: l(f, !1),
  animationStyle: C(F, "animationStyle"),
  columnPerRowLG: l(p, 4),
  columnPerRowMD: l(p, 2),
  columnPerRowSM: l(p, 1),
  verticalSpacing: l(p, 8),
  horizontalSpacing: l(p, 8)
}, ye = (e) => /* @__PURE__ */ s(ce, {
  ...e,
  emptyRows: 15,
  hintPlaceholder: ue,
  radius: e.style.radius,
  style: e.style
}), he = (e) => {
  let {
    columns: t,
    containers: r,
    dispatch: i,
    rowBreak: n,
    matchColumnsHeight: d,
    style: o,
    columnStyle: O,
    columnPerRowLG: v,
    columnPerRowMD: V,
    columnPerRowSM: y,
    verticalSpacing: B,
    horizontalSpacing: G,
    animationStyle: D,
    horizontalGridCells: E,
    mainScrollbar: I,
    autoHeight: Ce
  } = e;
  return /* @__PURE__ */ s(Y.Provider, {
    value: e.style.background,
    children: /* @__PURE__ */ s(ee.Provider, {
      value: e.disabled,
      children: /* @__PURE__ */ s("div", {
        style: {
          padding: o.margin,
          height: "100%"
        },
        children: /* @__PURE__ */ s(de, {
          $style: o,
          $animationStyle: D,
          $showScrollbar: I,
          wrap: n,
          gutter: [G, B],
          children: t.map((P) => {
            const h = String(P.id), z = M(M(i, "containers"), h);
            if (!r[h])
              return null;
            const w = r[h].children, c = t.length;
            return /* @__PURE__ */ s(me, {
              lg: 24 / (c < v ? c : v),
              md: 24 / (c < V ? c : V),
              sm: 24 / (c < y ? c : y),
              xs: 24 / (c < y ? c : y),
              $style: e.columnStyle,
              $minWidth: P.minWidth,
              $matchColumnsHeight: d,
              children: /* @__PURE__ */ s(ye, {
                layout: w.layout.getView(),
                items: te(w.items.getView()),
                positionParams: w.positionParams.getView(),
                dispatch: z,
                autoHeight: e.autoHeight,
                horizontalGridCells: E,
                style: O
              })
            }, h);
          })
        })
      })
    })
  });
}, ge = function() {
  return new J(pe, (e, t) => /* @__PURE__ */ s(he, {
    ...e,
    dispatch: t
  })).setPropertyViewFn((e) => /* @__PURE__ */ m(L, {
    children: [/* @__PURE__ */ s(u, {
      name: g.basic,
      children: e.columns.propertyView({
        title: a("responsiveLayout.column"),
        newOptionLabel: "Column"
      })
    }), ($(b).editorModeStatus === "logic" || $(b).editorModeStatus === "both") && /* @__PURE__ */ m(u, {
      name: g.interaction,
      children: [X(e), Z(e)]
    }), ["layout", "both"].includes($(b).editorModeStatus) && /* @__PURE__ */ m(L, {
      children: [/* @__PURE__ */ m(u, {
        name: g.layout,
        children: [e.autoHeight.getPropertyView(), !e.autoHeight.getView() && e.mainScrollbar.propertyView({
          label: a("prop.mainScrollbar")
        }), e.horizontalGridCells.propertyView({
          label: a("prop.horizontalGridCells")
        })]
      }), /* @__PURE__ */ m(u, {
        name: a("responsiveLayout.rowLayout"),
        children: [e.rowBreak.propertyView({
          label: a("responsiveLayout.rowBreak")
        }), H({}, /* @__PURE__ */ s("div", {
          style: {
            marginTop: "8px"
          },
          children: a("responsiveLayout.columnsPerRow")
        })), e.columnPerRowLG.propertyView({
          label: a("responsiveLayout.desktop")
        }), e.columnPerRowMD.propertyView({
          label: a("responsiveLayout.tablet")
        }), e.columnPerRowSM.propertyView({
          label: a("responsiveLayout.mobile")
        })]
      }), /* @__PURE__ */ m(u, {
        name: a("responsiveLayout.columnsLayout"),
        children: [e.matchColumnsHeight.propertyView({
          label: a("responsiveLayout.matchColumnsHeight")
        }), H({}, /* @__PURE__ */ s("div", {
          style: {
            marginTop: "8px"
          },
          children: a("responsiveLayout.columnsSpacing")
        })), e.horizontalSpacing.propertyView({
          label: a("responsiveLayout.horizontal")
        }), e.verticalSpacing.propertyView({
          label: a("responsiveLayout.vertical")
        })]
      }), /* @__PURE__ */ s(u, {
        name: a("responsiveLayout.rowStyle"),
        children: e.style.getPropertyView()
      }), /* @__PURE__ */ s(u, {
        name: a("responsiveLayout.columnStyle"),
        children: e.columnStyle.getPropertyView()
      }), /* @__PURE__ */ s(u, {
        name: g.animationStyle,
        hasTooltip: !0,
        children: e.animationStyle.getPropertyView()
      })]
    })]
  })).build();
}();
class we extends ge {
  syncContainers() {
    const t = this.children.columns.getView(), r = new Set(t.map((o) => String(o.id)));
    let i = this.children.containers.getView();
    const n = [];
    Object.keys(i).forEach((o) => {
      r.has(o) || n.push(S("containers", S(o, oe())));
    }), r.forEach((o) => {
      i.hasOwnProperty(o) || n.push(S("containers", ae(o, {
        layout: {},
        items: {}
      })));
    });
    let d = this;
    return n.forEach((o) => {
      d = d.reduce(o);
    }), d;
  }
  reduce(t) {
    const r = this.children.columns.getView();
    if (t.type === R.CUSTOM) {
      const n = t.value;
      if (n.type === "push") {
        const o = n.value;
        x.isEmpty(o.key) && (o.key = o.label), t = {
          ...t,
          value: {
            ...n,
            value: {
              ...o
            }
          }
        };
      }
      const {
        path: d
      } = t;
      if (n.type === "delete" && d[0] === "columns" && r.length <= 1)
        return ne.warning(a("responsiveLayout.atLeastOneColumnError")), this;
    }
    let i = super.reduce(t);
    return t.type === R.UPDATE_NODES_V2 && (i = i.syncContainers()), i;
  }
  realSimpleContainer(t) {
    return Object.values(this.children.containers.children).find((r) => r.realSimpleContainer(t));
  }
  getCompTree() {
    const t = this.children.containers.getView(), r = Object.values(t).map((i) => i.getCompTree());
    return re(r);
  }
  findContainer(t) {
    const r = this.children.containers.getView();
    for (const i of Object.values(r)) {
      const n = i.findContainer(t);
      if (n)
        return n === i ? this : n;
    }
  }
  getPasteValue(t) {
    const r = this.children.containers.getView(), i = x.mapValues(r, (n) => n.getPasteValue(t));
    return {
      ...this.toJsonValue(),
      containers: i
    };
  }
  autoHeight() {
    return this.children.autoHeight.getView();
  }
}
const $e = q(we, [K]);
export {
  ge as ResponsiveLayoutBaseComp,
  $e as ResponsiveLayoutComp
};
