import { b9 as T, bd as j, eX as A, w as c, s as G, cv as W, bv as x, bB as R, eY as z, eZ as N, cn as h, U, V as l, P as g, bh as M, bi as m, bj as V, a0 as i, bg as f, bk as _, bl as F, bs as H, bn as J, bG as X, e_ as Y, e$ as Z, d2 as q, d5 as K, d1 as Q, c1 as d, d7 as ee, d8 as L, d9 as te, da as oe, L as E, cr as ne, x as ae, db as re, dc as ie, dd as O } from "./684d2f28.js";
import { useContext as P } from "react";
import "react-dom";
const se = T(Y)`
  height: 100%;
  border: 1px solid ${(e) => e.$style.border};
  border-radius: ${(e) => e.$style.radius};
  padding: ${(e) => e.$style.padding};
  background-color: ${(e) => e.$style.background};
  overflow-x: auto;
`, le = T(Z)`
  display: flex;
  flex-direction: column;
  flex-basis: ${(e) => e.$minWidth};
  max-width: ${(e) => e.$minWidth};

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