import { a0 as $, j as i, K as a, a1 as x, H as y, a2 as j, a3 as l, D as z, a4 as W, a5 as O, Q as C, V as B, a6 as F, a7 as w, a8 as A, a9 as K, aa as U, F as q } from "./index-b203ecbb.js";
import { createContext as Q, useCallback as g, memo as X, useState as N, useContext as S } from "react";
import { P as Y } from "./index-56e81c67.js";
import { B as G } from "./index-ba865a7a.js";
import "react-dom";
const I = Q({}), L = (t) => {
  const { eventItems: e, attrPath: n, handleUpdateDsl: r } = t, o = g(
    (c) => {
      const d = e.filter(
        (h, p) => p !== c
      );
      r(n, d);
    },
    [e, r, n]
  ), s = g(
    (c) => {
      let d = e.find(
        (p, v) => v === c
      );
      if (!d)
        return;
      d = {
        ...d,
        id: `option-${$()}`
      };
      const h = [...e, d];
      r(n, h);
    },
    [e, r, n]
  ), m = {
    ...t,
    handleDeleteEventItem: o,
    handleCopyEventItem: s
  };
  return /* @__PURE__ */ i(I.Provider, { value: m, children: t.children });
};
L.displayName = "BaseEventHandlerProvider";
const J = () => `events-${$()}`, R = (t, e) => ({
  id: J(),
  eventType: t,
  targetId: e,
  type: "datasource",
  method: "trigger"
}), Z = a`
  display: flex;
  justify-content: space-between;
  align-items: center;
`, M = (t) => {
  const { labelName: e, labelDesc: n, handleAddItem: r } = t, { t: o } = x();
  return /* @__PURE__ */ y("div", { css: Z, children: [
    /* @__PURE__ */ i(Y, { labelName: e, labelDesc: n }),
    /* @__PURE__ */ i(
      j,
      {
        sx: { padding: "1px 8px" },
        size: "small",
        variant: "contained",
        onClick: r,
        children: o("editor.inspect.setter_content.event_handler_list.new")
      }
    )
  ] });
};
M.displayName = "AddActionLabel";
a`
  width: 100%;
  height: 32px;
  border: solid 1px ${l("grayBlue-08")};
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: ${l("grayBlue-05")};
  font-size: 12px;

  :not(:first-of-type) {
    margin-top: 8px;
  }

  cursor: pointer;
`;
a`
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
`;
a`
  display: flex;
  align-items: center;
  color: ${l("purple-03")};
  cursor: pointer;
  height: 24px;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 14px;

  &:hover {
    background-color: ${l("grayBlue-09")};
  }
`;
a`
  margin-left: 4px;
`;
const ee = a`
  height: 32px;
  width: 100%;
`, te = a`
  width: 100%;
  height: 32px;
  display: flex;
`, ne = a`
  width: 32px;
  flex: none;
  height: 32px;
  border: 1px solid ${l("grayBlue-08")};
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: ${l("grayBlue-06")};
`, re = a`
  display: flex;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid ${l("grayBlue-08")};
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 12px;
  gap: 8px;
  overflow: hidden;
`, ie = a`
  color: ${l("grayBlue-02")};
  min-width: 64px;
  display: block;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
`, oe = a`
  color: ${l("grayBlue-04")};
  display: block;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
`, se = a`
  min-height: 32px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background-color: ${l("grayBlue-09")};
  color: ${l("grayBlue-03")};
  border-radius: 8px;
  font-size: 14px;
`, P = X(() => {
  const { t } = x();
  return /* @__PURE__ */ i("div", { css: se, children: t("editor.inspect.setter_content.event_handler_list.empty") });
});
P.displayName = "EventHandlerEmpty";
const ae = (t, e, n, r) => t === "widget" ? e && n ? `${e}.${n}()` : w.t(
  "editor.inspect.setter_content.event_handler_list.incomplete_selection"
) : t === "datasource" ? r ? `${r}.run()` : w.t(
  "editor.inspect.setter_content.event_handler_list.incomplete_selection"
) : t ? `${t}()` : w.t(
  "editor.inspect.setter_content.event_handler_list.incomplete_selection"
), k = (t) => {
  const e = z(W), { index: n } = t, { t: r } = x(), [o, s] = N(!1), {
    widgetDisplayName: m,
    attrPath: c,
    childrenSetter: d,
    eventItems: h,
    widgetType: p
  } = S(I), v = O(h, n), { eventType: u, widgetID: f, queryID: _, widgetMethod: b, actionType: H } = v, T = g(() => {
    s(!1);
  }, []);
  return /* @__PURE__ */ i(
    F,
    {
      withoutPadding: !0,
      colorScheme: "white",
      popupVisible: o,
      content: /* @__PURE__ */ i(
        G,
        {
          title: r("editor.inspect.setter_content.event_handler_list.title"),
          handleCloseModal: T,
          attrPath: `${c}.${n}`,
          widgetDisplayName: m,
          childrenSetter: d,
          docLink: "raghav"
        }
      ),
      trigger: "click",
      showArrow: !1,
      position: e ? "left-start" : "top-start",
      clickOutsideToClose: !1,
      onVisibleChange: (E) => {
        E && C(B.SHOW, {
          element: "event_handler_editor",
          parameter1: p
        }), s(E);
      },
      children: /* @__PURE__ */ y("div", { css: re, children: [
        /* @__PURE__ */ i("div", { css: ie, children: r(
          u ? `editor.inspect.setter_content.widget_action_type_name.${u}` : "editor.inspect.setter_content.event_handler_list.incomplete_selection"
        ) }),
        /* @__PURE__ */ i("div", { css: oe, children: ae(H, f, b, _) })
      ] })
    }
  );
};
k.displayName = "EventAndMethodLabel";
const D = (t) => {
  const { index: e, handleCloseMode: n } = t, { handleCopyEventItem: r, handleDeleteEventItem: o } = S(
    I
  ), { t: s } = x();
  return /* @__PURE__ */ y(
    K,
    {
      children: [
        /* @__PURE__ */ i(
          A,
          {
            value: "duplicate",
            title: s(
              "editor.inspect.setter_content.option_list.action_menu.duplicate"
            ),
            onClick: () => {
              r(e), n();
            }
          },
          "duplicate"
        ),
        /* @__PURE__ */ i(
          A,
          {
            value: "delete",
            title: s(
              "editor.inspect.setter_content.option_list.action_menu.delete"
            ),
            deleted: !0,
            onClick: () => {
              o(e), n();
            }
          },
          "delete"
        )
      ]
    }
  );
};
D.displayName = "ActionMenu";
const V = (t) => {
  const { index: e } = t, [n, r] = N(!1), o = g(() => {
    r(!1);
  }, []);
  return /* @__PURE__ */ i(
    U,
    {
      popupVisible: n,
      dropList: /* @__PURE__ */ i(D, { index: e, handleCloseMode: o }),
      trigger: "click",
      position: "bottom-end",
      onVisibleChange: (s) => {
        r(s);
      },
      children: /* @__PURE__ */ i("div", { css: ne, children: "moreIcon.." })
    }
  );
};
V.displayName = "OptionListSetterMore";
const le = (t) => {
  const { index: e } = t;
  return /* @__PURE__ */ i("div", { css: ee, children: /* @__PURE__ */ y("div", { css: te, children: [
    /* @__PURE__ */ i(k, { index: e }),
    /* @__PURE__ */ i(V, { index: e })
  ] }) });
}, de = (t) => {
  const { events: e } = t;
  return !e || e.length === 0 ? /* @__PURE__ */ i(P, {}) : /* @__PURE__ */ i(q, { children: e.map((n, r) => /* @__PURE__ */ i(le, { index: r }, n.id)) });
}, ce = a`
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
`, pe = (t) => {
  const {
    widgetType: e,
    value: n,
    childrenSetter: r,
    handleUpdateDsl: o,
    attrName: s,
    widgetDisplayName: m,
    labelName: c,
    labelDesc: d,
    defaultValue: h,
    eventHandlerConfig: p = {
      events: [`${h}`],
      method: []
    }
  } = t, v = g(async () => {
    const { events: u } = p, f = Array.isArray(n) ? n : [], _ = typeof u[0] == "string" ? u[0] : u[0].value, b = R(_, "query1");
    C(B.CLICK, {
      element: "add_event_handler",
      parameter1: e
    }), o(s, [...f, b]);
  }, [p, n, e, o, s]);
  return !r || !Array.isArray(r) || r.length < 1 ? null : /* @__PURE__ */ i(
    L,
    {
      eventItems: n,
      attrPath: s,
      handleUpdateDsl: o,
      widgetDisplayName: m,
      childrenSetter: r,
      widgetType: e,
      children: /* @__PURE__ */ y("div", { css: ce, children: [
        /* @__PURE__ */ i(
          M,
          {
            labelName: c,
            labelDesc: d,
            handleAddItem: v
          }
        ),
        /* @__PURE__ */ i(de, { events: n })
      ] })
    }
  );
};
pe.displayName = "EventHandlerSetter";
export {
  pe as default
};
//# sourceMappingURL=index-099f7a0a.js.map
