import { jsxs as p, jsx as e, Fragment as Ze } from "react/jsx-runtime";
import { execute as ve } from "@/common/services/QueryBuilder";
import { showToast as ie } from "@/common/toaster/toaster";
import { useDroppable as nt, DndContext as Nt, useDraggable as Mt, DragOverlay as an, rectIntersection as At, closestCenter as sn } from "@dnd-kit/core";
import { SortableContext as De, verticalListSortingStrategy as Ue, arrayMove as Pe, useSortable as rt } from "@dnd-kit/sortable";
import { Box as U, Typography as S, FormControl as Ve, InputLabel as ln, Select as cn, MenuItem as Tt, Tooltip as dn, Paper as xe, IconButton as un, Divider as ot, Button as Ge, Switch as Ot, TextField as Qe, InputAdornment as pn, Accordion as Ye, AccordionSummary as Je, AccordionDetails as Xe, Grid2 as fn, Autocomplete as mn } from "@mui/material";
import v from "@mui/material/Grid2";
import { Grid as ye, Box as N } from "@mui/system";
import K, { createContext as hn, useState as k, useCallback as Re, useMemo as Fe, useEffect as Ke } from "react";
import { useForm as gn } from "react-hook-form";
import { useSelector as xn } from "react-redux";
import { useLocation as yn, useNavigate as bn } from "react-router";
import Sn from "@/views/custom-components/CustomDropdown";
import m from "prop-types";
import { FontAwesomeIcon as W } from "@fortawesome/react-fontawesome";
import { faWifi as Cn, faSignal as In, faBatteryFull as vn, faLocationDot as Rn, faRotate as wn, faBell as En, faCircleUser as An, faChevronDown as _t, faMagnifyingGlass as kt, faTimes as Tn, faTrashCan as On } from "@fortawesome/free-solid-svg-icons";
import Nn from "@/assets/img/home.svg";
import Mn from "@/assets/img/programs.svg";
import _n from "@/assets/img/analytics.svg";
import kn from "@/assets/img/family-management.svg";
import { CSS as Fn } from "@dnd-kit/utilities";
import X from "@/common/fontAwesomeIcons/FontAwesomeIcons";
import { generateUUID as ge } from "@/utils/UUIDgenerator";
import Pn from "@/views/custom-components/CustomConfirmationModal";
import './AddMenuConfiguration.css';const Gn = hn(), Dn = ({ id: o, children: c, componentType: d }) => {
  const { attributes: b, listeners: E, setNodeRef: u, isDragging: y } = rt({
    id: o,
    data: { sortable: !0, type: d }
  }), R = {
    opacity: y ? 0.3 : 1
  };
  return K.cloneElement(c, {
    ref: u,
    style: { ...c.props.style, ...R },
    dnd: { listeners: E, attributes: b }
  });
}, Un = ({ id: o, children: c, componentType: d }) => {
  const { attributes: b, listeners: E, setNodeRef: u, isDragging: y } = Mt({
    id: o,
    data: {
      type: d,
      deletable: !0
    }
  }), R = {
    opacity: y ? 0.3 : 1
  };
  return K.cloneElement(c, {
    ref: u,
    style: { ...c.props.style, ...R },
    ...E,
    ...b
  });
}, Ft = ({ id: o, children: c, sectionId: d, featureName: b }) => {
  const { attributes: E, listeners: u, setNodeRef: y, isDragging: R } = rt({
    id: o,
    data: {
      sortable: !0,
      type: "FEATURE_TILE",
      sectionId: d,
      name: b
    }
  }), F = {
    opacity: R ? 0.3 : 1
  };
  return K.cloneElement(c, {
    ref: y,
    style: { ...c.props.style, ...F },
    ...E,
    ...u
  });
}, it = K.forwardRef(({ id: o, style: c, handleSectionClick: d, ...b }, E) => /* @__PURE__ */ p(
  U,
  {
    id: o,
    ref: E,
    onContextMenu: (y) => {
      y.preventDefault(), d(o);
    },
    sx: {
      ...c,
      width: "100%",
      minHeight: "50px",
      p: 1.5,
      border: "1px solid #ccc",
      borderRadius: "8px",
      backgroundColor: "#fff",
      display: "flex",
      alignItems: "center",
      mt: 1,
      boxShadow: "0 1px 3px rgba(0,0,0,0.05)",
      mb: 3
    },
    ...b,
    children: [
      /* @__PURE__ */ e(W, { icon: kt, style: { marginRight: "8px", color: "#888" } }),
      /* @__PURE__ */ e(S, { variant: "body2", color: "textSecondary", sx: { flexGrow: 1 }, children: "Search..." })
    ]
  }
));
it.displayName = "MobileSearchBar";
it.propTypes = {
  id: m.any,
  style: m.any,
  handleSectionClick: m.any
};
const at = K.forwardRef(
  ({
    id: o,
    arrayIndex: c,
    sectionTitle: d,
    handleSectionClick: b,
    dnd: E,
    sectionFeatures: u,
    SvgIconBox: y,
    onGroupClick: R,
    activeGroupId: F,
    ...Q
  }, ee) => {
    const { listeners: de, attributes: T } = E || {}, te = (A) => {
      A.preventDefault(), b(o);
    }, M = (A) => {
      A.stopPropagation();
    }, ne = (A, j) => {
      A.preventDefault(), A.stopPropagation(), R && R(A, j);
    }, { setNodeRef: ae, isOver: ue } = nt({
      id: `section-drop-zone-${o}`,
      data: {
        type: "SECTION_DROP_ZONE",
        sectionId: o
      }
    });
    return /* @__PURE__ */ p(
      U,
      {
        id: o,
        ref: ee,
        ...de,
        ...T,
        onContextMenu: te,
        sx: {
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
          justifyContent: "flex-start",
          p: 1,
          border: ue ? "1px dashed #073149" : "0.1px solid #A9BCCD",
          cursor: "pointer",
          backgroundColor: "#e6f0ff",
          borderRadius: "14px",
          mt: 1
        },
        ...Q,
        children: [
          /* @__PURE__ */ e(
            U,
            {
              sx: {
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                width: "100%",
                mb: 0.5
              },
              children: /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "bold", color: "#073149", flexGrow: 1 }, children: d || `Section ${c + 1}` })
            }
          ),
          /* @__PURE__ */ e(
            U,
            {
              ref: ae,
              sx: {
                width: "100%",
                minHeight: "40px",
                border: `${ue ? "1px dashed #073149" : ""}`,
                borderRadius: "4px",
                textAlign: "center",
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: (u == null ? void 0 : u.length) > 0 ? "flex-start" : "center",
                transition: "background-color 0.1s"
              },
              children: (u == null ? void 0 : u.length) > 0 ? /* @__PURE__ */ e(De, { items: u.map((A) => A.instanceId), strategy: Ue, children: /* @__PURE__ */ e(ye, { container: !0, spacing: 1, sx: { width: "100%", m: 0 }, children: u.map((A) => {
                const j = A.type === "GROUP", be = j && F === A.instanceId;
                return /* @__PURE__ */ e(
                  Ft,
                  {
                    id: A.instanceId,
                    sectionId: o,
                    featureName: A.name,
                    children: /* @__PURE__ */ e(
                      ye,
                      {
                        item: !0,
                        xs: 3,
                        sm: 3,
                        sx: {
                          flexBasis: "calc(25% - 8px)",
                          maxWidth: "calc(25% - 8px)",
                          flexGrow: 0,
                          flexShrink: 0,
                          minWidth: 0
                        },
                        children: /* @__PURE__ */ p(
                          U,
                          {
                            onClick: (P) => A.type === "FEATURE" && M(P),
                            onContextMenu: (P) => A.type === "GROUP" && ne(P, A),
                            sx: {
                              display: "flex",
                              flexDirection: "column",
                              alignItems: "center",
                              justifyContent: "flex-start",
                              p: 0.5,
                              height: "100%",
                              backgroundColor: "transparent",
                              cursor: j ? "pointer" : "grab",
                              minWidth: 0,
                              overflow: "hidden",
                              "&:hover": {
                                backgroundColor: "#f5f5f5"
                              }
                            },
                            children: [
                              Ut(
                                Object.prototype.hasOwnProperty.call(A, "icon") ? A.icon : null,
                                y
                              ),
                              /* @__PURE__ */ e(
                                S,
                                {
                                  variant: "body2",
                                  sx: {
                                    mt: 0.5,
                                    textAlign: "center",
                                    lineHeight: 1.2,
                                    width: "100%",
                                    fontSize: "0.7rem",
                                    color: "#073149",
                                    fontWeight: "bold",
                                    letterSpacing: 0.2,
                                    whiteSpace: "normal",
                                    wordBreak: "break-word",
                                    overflowWrap: "break-word"
                                  },
                                  children: Dt(A.name)
                                }
                              ),
                              j && /* @__PURE__ */ e(U, { sx: { ml: 0.5, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e(
                                W,
                                {
                                  icon: _t,
                                  sx: {
                                    fontSize: "0.7rem",
                                    color: "#073149",
                                    transition: "transform 0.2s",
                                    transform: be ? "rotate(180deg)" : "rotate(0deg)"
                                  }
                                }
                              ) })
                            ]
                          }
                        )
                      }
                    )
                  },
                  A.instanceId
                );
              }) }) }) : /* @__PURE__ */ e(S, { variant: "caption", color: "textSecondary", children: ue ? "Drop Feature Here" : "Drag features here later." })
            }
          )
        ]
      }
    );
  }
);
at.displayName = "MobileSection";
at.propTypes = {
  id: m.any,
  arrayIndex: m.any,
  sectionTitle: m.any,
  handleSectionClick: m.any,
  dnd: m.any,
  sectionFeatures: m.any,
  SvgIconBox: m.any,
  onGroupClick: m.any,
  activeGroupId: m.any
};
const Pt = ({ feature: o, SvgIconBox: c, handleFeatureClick: d }) => {
  const { attributes: b, listeners: E, setNodeRef: u, transform: y, transition: R, isDragging: F } = rt({
    id: o.uuid || o.id
  }), Q = {
    transform: Fn.Transform.toString(y),
    transition: R,
    zIndex: F ? 2e3 : 1,
    opacity: F ? 0.8 : 1,
    boxShadow: F ? "0px 4px 10px rgba(0,0,0,0.1)" : "none"
  };
  return /* @__PURE__ */ e(
    ye,
    {
      item: !0,
      xs: 4,
      ref: u,
      style: Q,
      sx: {
        flexBasis: "calc(33.3333% - 8px)",
        maxWidth: "calc(33.3333% - 8px)",
        flexGrow: 0,
        flexShrink: 0,
        minWidth: 0,
        p: 0.5
      },
      children: /* @__PURE__ */ p(
        U,
        {
          onClick: (T) => {
            T.stopPropagation(), d && d();
          },
          ...E,
          ...b,
          sx: {
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "flex-start",
            p: 0.5,
            height: "100%",
            backgroundColor: "transparent",
            cursor: "grab",
            minWidth: 0,
            overflow: "hidden",
            borderRadius: "8px",
            "&:hover": {
              backgroundColor: "#f5f5f5"
            }
          },
          children: [
            /* @__PURE__ */ e(U, { sx: { mt: 0.5, mb: 0.5, display: "flex", alignItems: "center" }, children: ((T, te) => {
              let M = null;
              if (typeof T == "object" && T !== null ? T.type === "svg" && typeof T.content == "string" ? M = T.content : typeof T.svg == "string" && (M = T.svg) : typeof T == "string" ? M = T : typeof o.icon == "object" && o.icon !== null && (M = o.icon.content || o.icon.svg), typeof M == "string" && M.includes("<svg")) {
                const ne = M.match(/<svg[\s\S]*<\/svg>/i);
                ne && (M = ne[0]);
              }
              return M ? /* @__PURE__ */ e(U, { sx: { height: "24px", width: "24px", display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ e(te, { svg: M }) }) : /* @__PURE__ */ e(
                U,
                {
                  sx: {
                    height: "24px",
                    width: "24px",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    color: "#b0bec5",
                    border: "1px solid",
                    borderRadius: "4px",
                    fontSize: "0.8rem"
                  },
                  children: "?"
                }
              );
            })(o.icon, c) }),
            /* @__PURE__ */ e(
              S,
              {
                variant: "body2",
                sx: {
                  mt: 0.5,
                  textAlign: "center",
                  lineHeight: 1.2,
                  width: "100%",
                  fontSize: "0.7rem",
                  color: "#073149",
                  fontWeight: "bold",
                  letterSpacing: 0.2,
                  whiteSpace: "normal",
                  wordBreak: "break-word",
                  overflowWrap: "break-word",
                  p: "0 4px"
                },
                children: o.name
              }
            )
          ]
        }
      )
    }
  );
};
Pt.propTypes = {
  feature: m.any,
  SvgIconBox: m.any,
  handleFeatureClick: m.any
};
function Gt({
  tabStatus: o,
  layoutComponents: c,
  componentTypes: d,
  handleSectionClick: b,
  activeElementId: E,
  activeTabId: u,
  handleTabSwitch: y,
  formList: R,
  selectedForm: F,
  onFormSelect: Q,
  SvgIconBox: ee,
  setCurrentLayoutComponents: de,
  programFeatures: T
}) {
  const te = "mobile-content", M = u === "programs" ? "PROGRAMS_ROOT_DROP_ZONE" : "LAYOUT_ROOT_DROP_ZONE", { setNodeRef: ne, isOver: ae } = nt({
    id: te,
    data: {
      type: M,
      sectionId: te
    }
  }), A = [
    { id: "home", label: "Home", icon: Nn, alt: "Home" },
    { id: "programs", label: "Programs", icon: Mn, alt: "Programs" },
    { id: "analytics", label: "Analytics", icon: _n, alt: "Analytics" },
    { id: "familyManagement", label: "Family Management", icon: kn, alt: "Family Management" }
  ].filter((f) => o[f.id]), j = c.find((f) => f.type === d.SEARCH_BAR), be = c.filter((f) => f.type === d.SECTION), [P, se] = k({
    anchorEl: null,
    groupData: null
  }), $ = Re(
    (f, G) => {
      var H;
      const q = f.currentTarget;
      ((H = P.groupData) == null ? void 0 : H.instanceId) === G.instanceId ? Se() : se({
        anchorEl: q,
        groupData: G
      });
    },
    [P.groupData]
  ), Se = Re(() => {
    se({ anchorEl: null, groupData: null });
  }, []), Be = (f) => {
    var H;
    const G = f.type === "GROUP", q = G && ((H = P.groupData) == null ? void 0 : H.instanceId) === f.instanceId;
    return /* @__PURE__ */ e(
      Ft,
      {
        id: f.instanceId,
        sectionId: null,
        featureName: f.name,
        children: /* @__PURE__ */ e(
          ye,
          {
            item: !0,
            xs: 4,
            sm: 4,
            sx: {
              flexBasis: "calc(33.3333% - 8px)",
              maxWidth: "calc(33.3333% - 8px)",
              flexGrow: 0,
              flexShrink: 0,
              minWidth: 0
            },
            children: /* @__PURE__ */ p(
              U,
              {
                onClick: (L) => f.type === "FEATURE" && L.stopPropagation(),
                onContextMenu: (L) => f.type === "GROUP" && $(L, f),
                sx: {
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "flex-start",
                  p: 0.5,
                  height: "100%",
                  backgroundColor: "transparent",
                  cursor: G ? "pointer" : "grab",
                  minWidth: 0,
                  overflow: "hidden",
                  "&:hover": {
                    backgroundColor: "#f5f5f5"
                  }
                },
                children: [
                  Ut(Object.prototype.hasOwnProperty.call(f, "icon") ? f.icon : null, ee),
                  /* @__PURE__ */ e(
                    S,
                    {
                      variant: "body2",
                      sx: {
                        mt: 0.5,
                        textAlign: "center",
                        lineHeight: 1.2,
                        width: "100%",
                        fontSize: "0.7rem",
                        color: "#073149",
                        fontWeight: "bold",
                        letterSpacing: 0.2,
                        whiteSpace: "normal",
                        wordBreak: "break-word",
                        overflowWrap: "break-word"
                      },
                      children: Dt(f.name)
                    }
                  ),
                  G && /* @__PURE__ */ e(U, { sx: { ml: 0.5, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e(
                    W,
                    {
                      icon: _t,
                      sx: {
                        fontSize: "0.7rem",
                        color: "#073149",
                        transition: "transform 0.2s",
                        transform: q ? "rotate(180deg)" : "rotate(0deg)"
                      }
                    }
                  ) })
                ]
              }
            )
          }
        )
      },
      f.instanceId
    );
  }, ze = (f) => {
    const { active: G, over: q } = f;
    if (!q || G.id === q.id || !P.groupData)
      return;
    const H = P.groupData.instanceId;
    let L = null;
    de((Ce) => Ce.map((pe) => pe.features ? {
      ...pe,
      features: pe.features.map((B) => {
        if (B.instanceId === H && B.type === "GROUP" && B.menus) {
          const fe = B.menus.findIndex((Y) => (Y.uuid || Y.instanceId) === G.id), Ie = B.menus.findIndex((Y) => (Y.uuid || Y.instanceId) === q.id);
          if (fe !== -1 && Ie !== -1) {
            const Y = Pe(B.menus, fe, Ie);
            return L = { ...B, menus: Y }, L;
          }
        }
        return B;
      })
    } : pe)), L && se((Ce) => ({
      ...Ce,
      groupData: L
    }));
  }, Ae = () => {
    Se();
  }, Te = (f, G) => {
    var H;
    const q = f.id === E;
    return /* @__PURE__ */ e(Dn, { id: f.id, componentType: d.SECTION, isSortable: !0, children: /* @__PURE__ */ e(
      at,
      {
        id: f.id,
        arrayIndex: G,
        sectionTitle: f.title,
        handleSectionClick: b,
        sectionFeatures: f.features,
        isActive: q,
        SvgIconBox: ee,
        onGroupClick: $,
        activeGroupId: (H = P.groupData) == null ? void 0 : H.instanceId
      }
    ) }, f.id);
  };
  return /* @__PURE__ */ p("div", { className: "mobile-screen-v2", id: "mobile-screen", children: [
    /* @__PURE__ */ p("div", { className: "status-bar-v2", children: [
      /* @__PURE__ */ e("span", { className: "time-v2", children: "12:16" }),
      /* @__PURE__ */ e("div", { className: "notch-v2" }),
      /* @__PURE__ */ p("div", { className: "right-status-icons-v2", children: [
        /* @__PURE__ */ e("span", { "aria-label": "wifi", children: /* @__PURE__ */ e(W, { icon: Cn }) }),
        /* @__PURE__ */ e("span", { "aria-label": "signal", children: /* @__PURE__ */ e(W, { icon: In }) }),
        /* @__PURE__ */ e("span", { "aria-label": "battery", className: "battery-icon", children: /* @__PURE__ */ e(W, { icon: vn }) })
      ] })
    ] }),
    /* @__PURE__ */ p("div", { className: "header-v2", children: [
      /* @__PURE__ */ p("div", { className: "location-v2", children: [
        /* @__PURE__ */ e(W, { icon: Rn }),
        /* @__PURE__ */ e("span", { className: "location-text-v2", children: "પાલડી-કાંકજ" })
      ] }),
      /* @__PURE__ */ p("div", { className: "header-actions-v2", children: [
        /* @__PURE__ */ e("span", { className: "action-icon-v2 rotate-icon", role: "button", "aria-label": "refresh", children: /* @__PURE__ */ e(W, { icon: wn }) }),
        /* @__PURE__ */ e("span", { className: "action-icon-v2 notification-outline", role: "button", "aria-label": "notifications", children: /* @__PURE__ */ e(W, { icon: En }) }),
        /* @__PURE__ */ e("span", { className: "action-icon-v2 profile-icon", role: "button", "aria-label": "profile", children: /* @__PURE__ */ e(W, { icon: An }) })
      ] })
    ] }),
    /* @__PURE__ */ e(
      "div",
      {
        className: "content-v2",
        id: "mobile-content",
        ref: u !== "familyManagement" ? ne : null,
        style: {
          border: u !== "familyManagement" && ae ? "2px dashed #073149" : "none",
          backgroundColor: u !== "familyManagement" && ae ? "#f0f4f8" : "transparent",
          minHeight: "300px",
          maxHeight: "calc(100% - 110px)",
          overflowY: "auto",
          padding: "8px",
          marginTop: u === "programs" ? 20 : 0,
          marginLeft: u === "programs" ? 3 : 0
        },
        children: u === "familyManagement" ? /* @__PURE__ */ p(
          U,
          {
            sx: {
              p: 2,
              width: "100%",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              height: "100%"
            },
            children: [
              /* @__PURE__ */ e(S, { variant: "body1", sx: { mb: 2, fontWeight: "bold" }, children: "Select Form for Family Management" }),
              /* @__PURE__ */ p(Ve, { fullWidth: !0, sx: { maxWidth: "90%", mb: 2 }, children: [
                /* @__PURE__ */ e(ln, { id: "form-selector-label", children: "Form Name" }),
                /* @__PURE__ */ p(
                  cn,
                  {
                    labelId: "form-selector-label",
                    id: "form-selector",
                    value: (F == null ? void 0 : F.code) || "",
                    label: "Form Name",
                    onChange: Q,
                    MenuProps: {
                      PaperProps: {
                        style: {
                          maxHeight: 240
                        }
                      }
                    },
                    children: [
                      R == null ? void 0 : R.map((f) => /* @__PURE__ */ e(Tt, { value: f.code, children: f.name }, f.code)),
                      (R == null ? void 0 : R.length) === 0 && /* @__PURE__ */ e(Tt, { disabled: !0, children: "No Forms Available" })
                    ]
                  }
                )
              ] })
            ]
          }
        ) : u === "programs" ? /* @__PURE__ */ e(Ze, { children: T && T.length > 0 ? /* @__PURE__ */ e(De, { items: T.map((f) => f.instanceId), strategy: Ue, children: /* @__PURE__ */ e(ye, { container: !0, spacing: 1, sx: { width: "100%", m: 0 }, children: T.map((f) => Be(f)) }) }) : /* @__PURE__ */ e(S, { variant: "body2", color: "textSecondary", sx: { mt: 5, textAlign: "center" }, children: ae ? "Drop features here (Groups are not allowed)." : "Drag features directly onto the screen." }) }) : /* @__PURE__ */ p(Ze, { children: [
          j && /* @__PURE__ */ e(Un, { id: j.id, componentType: d.SEARCH_BAR, children: /* @__PURE__ */ e(
            it,
            {
              id: j.id,
              style: { marginBottom: "8px" },
              handleSectionClick: b
            }
          ) }),
          be.map((f, G) => Te(f, G)),
          c.length === 0 && /* @__PURE__ */ e(S, { variant: "body2", color: "textSecondary", sx: { mt: 5, textAlign: "center" }, children: "Drag components here to build the layout." })
        ] })
      }
    ),
    P.groupData && P.anchorEl && /* @__PURE__ */ e("div", { onPointerDown: (f) => f.stopPropagation(), children: /* @__PURE__ */ e(Nt, { onDragEnd: ze, children: /* @__PURE__ */ e(
      Bt,
      {
        groupData: P.groupData,
        anchorEl: P.anchorEl,
        onClose: Se,
        SvgIconBox: ee,
        handleFeatureClick: Ae
      }
    ) }) }),
    /* @__PURE__ */ p("div", { className: "bottom-nav-v2", children: [
      /* @__PURE__ */ e("div", { className: "nav-bar-v2", children: A.map((f) => /* @__PURE__ */ e(dn, { title: f.label, placement: "bottom", arrow: !0, children: /* @__PURE__ */ e(
        "div",
        {
          className: `nav-item-v2 ${u === f.id ? "active-v2" : ""}`,
          role: "button",
          "aria-label": f.label,
          onClick: () => y(f.id),
          children: /* @__PURE__ */ e("img", { src: f.icon, alt: f.alt })
        },
        f.id
      ) }, f.id)) }),
      /* @__PURE__ */ e("div", { className: "home-indicator-v2" })
    ] })
  ] });
}
Gt.propTypes = {
  tabStatus: m.any.isRequired,
  layoutComponents: m.any,
  componentTypes: m.any,
  handleSectionClick: m.any,
  activeElementId: m.any,
  activeTabId: m.any,
  handleTabSwitch: m.any,
  formList: m.any,
  selectedForm: m.any,
  onFormSelect: m.any,
  SvgIconBox: m.any,
  setCurrentLayoutComponents: m.any,
  programFeatures: m.any
};
const Dt = (o) => {
  const c = o.split(" ");
  return c.map((d, b) => /* @__PURE__ */ p(K.Fragment, { children: [
    d,
    b < c.length - 1 && /* @__PURE__ */ e("br", {})
  ] }, b));
}, Ut = (o, c) => {
  let d = null;
  if (typeof o == "object" && o !== null ? o.type === "svg" && typeof o.content == "string" ? d = o.content : typeof o.svg == "string" && (d = o.svg) : typeof o == "string" && (d = o), typeof d == "string" && d.includes("<svg")) {
    const b = d.match(/<svg[\s\S]*<\/svg>/i);
    b && (d = b[0]);
  }
  return d ? /* @__PURE__ */ e(
    U,
    {
      sx: {
        height: "36px",
        width: "36px",
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      },
      children: /* @__PURE__ */ e(c, { svg: d })
    }
  ) : /* @__PURE__ */ e(
    U,
    {
      sx: {
        fontSize: "1.2rem",
        color: "#b0bec5",
        border: "1px solid",
        borderRadius: "50%",
        height: "36px",
        width: "36px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        marginBottom: "4px"
      },
      children: "?"
    }
  );
}, Bt = ({ groupData: o, anchorEl: c, onClose: d, SvgIconBox: b, handleFeatureClick: E }) => {
  if (!o || !c) return null;
  const u = o.menus || [], y = c.getBoundingClientRect();
  return /* @__PURE__ */ p(
    xe,
    {
      elevation: 8,
      sx: {
        position: "fixed",
        top: y.bottom,
        left: y.left + y.width + 65,
        minWidth: "320px",
        maxWidth: "100%",
        p: 2,
        borderRadius: "12px",
        boxShadow: "0 8px 30px rgba(0,0,0,0.25)",
        backgroundColor: "#f9f9f9",
        zIndex: 1500,
        maxHeight: "400px",
        overflowY: "auto",
        transform: "translateX(-50%)"
      },
      children: [
        /* @__PURE__ */ p(U, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
          /* @__PURE__ */ e(S, { variant: "h6", sx: { color: "#073149", fontWeight: "bold", fontSize: "1rem" }, children: o.name }),
          /* @__PURE__ */ e(un, { onClick: d, size: "small", sx: { color: "#073149", p: 0.5 }, children: /* @__PURE__ */ e(W, { icon: Tn }) })
        ] }),
        /* @__PURE__ */ e(ot, {}),
        u.length > 0 ? /* @__PURE__ */ e(De, { items: u.map((R) => R.uuid || R.instanceId), strategy: Ue, children: /* @__PURE__ */ e(ye, { container: !0, spacing: 1, children: u.map((R) => /* @__PURE__ */ e(
          Pt,
          {
            feature: R,
            SvgIconBox: b,
            handleFeatureClick: E
          },
          R.uuid || R.instanceId
        )) }) }) : /* @__PURE__ */ e(S, { variant: "body2", color: "textSecondary", sx: { fontStyle: "italic", p: 1 }, children: "This menu is empty." })
      ]
    }
  );
};
Bt.propTypes = {
  groupData: m.any,
  anchorEl: m.any,
  onClose: m.any,
  SvgIconBox: m.any,
  handleFeatureClick: m.any
};
function cr() {
  var ht, gt;
  const o = yn(), c = o.state, d = Fe(() => new URLSearchParams(o.search), [o.search]), b = bn(), [E, u] = k([]), [y, R] = k(!1), [F, Q] = k([]), [ee, de] = k([]), [T, te] = k({}), [M, ne] = k([]), [ae, ue] = k(!0), [A, j] = k(!0), [be, P] = k(!1), { user: se } = xn((t) => t.Authenticate), $ = gn({
    defaultValues: {
      role: "",
      isAttendanceRequired: !1
    },
    mode: "onChange"
  });
  Ke(() => {
    (async () => (await ze(), await Se(), await Be(), d.get("id") && (c != null && c.mobileMenuList) ? (R(!0), $.setValue("role", c.roleId), await Ae(c.roleId)) : R(!1)))();
  }, []), Ke(() => {
    var t;
    if (Object.keys(T).length > 0 && d.get("id") && (c != null && c.mobileMenuList)) {
      const { appConfiguration: n, tabStatus: r, selectedForm: a, isAttendanceRequired: i } = q(
        (t = c == null ? void 0 : c.mobileMenuList) == null ? void 0 : t.configJson
      );
      J(n), Ie(r), ct(a), $.setValue("isAttendanceRequired", i);
    }
  }, [T]);
  const Se = async () => {
    const r = (await ve({
      code: "medplat_form_get_all_form_details",
      parameters: {}
    })).data.result.map((a, i) => ({
      id: a.form_code,
      name: a.form_name,
      code: a.form_code,
      uuid: a.uuid || `temp-uuid-${i}`
    }));
    Q(r);
  }, Be = async () => {
    const n = (await ve({
      code: "get_all_mobile_query",
      parameters: {}
    })).data.result;
    de(n);
  }, ze = async () => {
    try {
      const t = (await ve({
        code: "RETRIEVE_MENU_CONFIG_ROLE_V2"
      })).data;
      t.result && u(t.result);
    } catch (t) {
      ie({
        message: t,
        type: "error"
      });
    }
  }, Ae = async (t) => {
    if (t)
      try {
        const n = (await ve({
          code: "fetch_linked_menus_by_role_id",
          parameters: {
            id: t
          }
        })).data;
        n.result && H(n.result);
      } catch (n) {
        ie({
          message: n,
          type: "error"
        });
      }
  }, Te = (t, n, r) => {
    const a = n[t];
    if (a) return a;
    const i = r.find((s) => s.type === "GROUP" && s.id === t);
    return i || null;
  }, f = (t, n, r, a) => {
    const i = Te(t.id, r, a);
    if (!i) return null;
    const s = ge();
    if (i.type === "GROUP") {
      const l = t.menus.map((C) => {
        const Z = Te(C.id, r, a);
        return Z ? {
          ...Z,
          uuid: ge(),
          isGroupMember: !0,
          groupId: t.id
        } : null;
      }).filter((C) => C !== null);
      return l.length === 0 ? null : {
        ...i,
        id: s,
        instanceId: `${n}_GROUP_${s}`,
        menus: l
      };
    } else if (i.type === "FEATURE") {
      const l = n === "PROGRAMS_ROOT" ? n : `${n}_${i.id}`;
      return {
        ...i,
        id: i.id,
        uuid: s,
        instanceId: `${l}_${s}`
      };
    }
    return null;
  }, G = (t, n, r, a) => {
    if (!t || !Array.isArray(t)) return [];
    if (t.every((i) => i.id && !i.type && !i.features)) {
      const i = n === "programs" ? "PROGRAMS_ROOT" : n;
      return t.map((s) => f(s, i, r, a)).filter((s) => s !== null);
    }
    return t.map((i) => {
      const s = ge();
      if (i.type === "SEARCH_BAR")
        return { ...i, id: s };
      if (i.type === "SECTION") {
        const l = `comp-${s}`, C = i.features.map((Z) => f(Z, l, r, a)).filter((Z) => Z !== null);
        return { type: i.type, title: i.title, id: l, features: C };
      }
      return null;
    }).filter((i) => i !== null);
  }, q = (t) => {
    var s;
    const n = {}, r = {};
    let a = null;
    const i = ((s = t == null ? void 0 : t.isAttendanceRequired) == null ? void 0 : s.value) || !1;
    for (const l in t) {
      const C = t[l];
      if (r[l] = C.active, C.active)
        if (l === "home" && C.layout)
          n[l] = G(C.layout, l, T, M);
        else if (l === "programs" && (C != null && C.features)) {
          const Z = G(C.features, l, T, M);
          n[l] = {
            features: Z
          };
        } else C != null && C.features ? n[l] = G(C == null ? void 0 : C.features, l, T, M) : l === "familyManagement" && C.formCode && (a = {
          formName: `Form for ${C.formCode}`,
          code: C.formCode,
          formUuid: ge()
        });
      else
        l === "programs" ? n[l] = { features: [] } : n[l] = [];
    }
    return {
      appConfiguration: n,
      tabStatus: r,
      selectedForm: a,
      isAttendanceRequired: i
    };
  }, H = (t) => {
    const n = [], r = {};
    t.forEach((a) => {
      const s = JSON.parse(a.menus || "[]").map((l) => {
        const C = {
          uuid: ge(),
          id: l.id ? parseInt(l.id) : null,
          name: l.name || "",
          icon: l.icon || "",
          type: "FEATURE",
          isGroupMember: a.id != null,
          groupId: a.id || null
        };
        return r[C.id] = C, C;
      });
      a.id != null ? n.push({
        uuid: ge(),
        id: a.id,
        name: a.name,
        icon: a.icon || "",
        type: "GROUP",
        menus: s
      }) : n.push(...s);
    }), te(r), ne(n);
  }, L = (t) => {
    var n, r;
    if (t.type === "GROUP") {
      const a = (r = (n = t.menus) == null ? void 0 : n[0]) == null ? void 0 : r.groupId;
      return a ? {
        id: a,
        menus: t.menus.map((i) => ({
          id: i.id
        }))
      } : null;
    } else if (t.type === "FEATURE")
      return {
        id: t.id
      };
    return null;
  }, Ce = (t) => !t || !Array.isArray(t) ? [] : t.map((n) => {
    if (n.type === "SEARCH_BAR")
      return {
        type: n.type,
        queryName: n.queryName
      };
    if (n.type === "SECTION") {
      const r = n == null ? void 0 : n.features.map(L).filter((a) => a !== null);
      return {
        type: n.type,
        title: n.title,
        features: r
      };
    }
    return null;
  }).filter((n) => n !== null), lt = () => {
    const t = {
      isAttendanceRequired: { value: $.getValues("isAttendanceRequired") }
    };
    return B.forEach((n) => {
      var s;
      const r = n.id, a = fe[r], i = {
        active: a
      };
      if (a) {
        if (r === "familyManagement" && We)
          i.formCode = We.code;
        else if (r === "home") {
          const l = he[r] || [];
          i.layout = Ce(l);
        } else if (r === "programs") {
          const l = ((s = he[r]) == null ? void 0 : s.features) || [];
          l.length > 0 && (i.features = l.map(L).filter((C) => C !== null));
        } else if (r !== "analytics") {
          const l = he[r] || [];
          Array.isArray(l) && (i.features = l.map(L).filter((C) => C !== null));
        }
      }
      t[r] = i;
    }), t;
  }, pe = async (t) => {
    const n = lt(), r = JSON.stringify(n), a = {
      roleId: t.role,
      userId: se == null ? void 0 : se.id,
      config_json: r
    };
    try {
      (await ve({
        code: "save_mobile_menu_role_relation",
        parameters: a
      })).data.result && (ie({
        message: "Menu configuration saved successfully",
        type: "success"
      }), b("/ui/medplat/admin/mobileMenuManagement"));
    } catch (i) {
      ie({
        message: i,
        type: "error"
      });
    }
  }, B = [
    { id: "home", name: "Home" },
    { id: "programs", name: "Programs" },
    { id: "analytics", name: "Analytics" },
    { id: "familyManagement", name: "Family Management" }
  ], [fe, Ie] = k({
    home: !0,
    programs: !0,
    analytics: !0,
    familyManagement: !0
  }), Y = (t) => {
    Ie((n) => {
      const r = {
        ...n,
        [t]: !n[t]
      };
      if (t === z && !r[t]) {
        const i = B.find((s) => s.id !== t && r[s.id] === !0);
        i ? Oe(i.id) : r.home ? Oe("home") : Oe(B[0].id);
      }
      return r;
    });
  }, w = {
    SEARCH_BAR: "SEARCH_BAR",
    SECTION: "SECTION",
    FEATURE: "FEATURE",
    SECTION_DROP_ZONE: "SECTION_DROP_ZONE",
    GROUP: "GROUP"
  }, [We, ct] = k(null), Ht = (t) => {
    const n = t.target.value, r = F.find((a) => a.code === n);
    ct(r);
  }, [me, He] = k(null), [dt, ut] = k(null), [z, Oe] = k("home"), [he, J] = k(() => {
    const t = {};
    return B.forEach((n) => {
      t[n.id] = [];
    }), t;
  }), [Le, Lt] = k(""), [jt, $t] = k(null), le = ((ht = he.programs) == null ? void 0 : ht.features) || [], qt = (t) => {
    $t((n) => n === t ? null : t);
  }, pt = he[z], re = Array.isArray(pt) ? pt : [], je = Fe(() => {
    const t = Le.toLowerCase();
    return M.map((n) => {
      if (n.type === "GROUP") {
        const r = n.menus.filter((a) => a.name.toLowerCase().includes(t));
        return n.name.toLowerCase().includes(t) || r.length > 0 ? { ...n, menus: r } : null;
      }
      return n.name.toLowerCase().includes(t) ? n : null;
    }).filter(Boolean);
  }, [M, Le]), { separatedGroups: Ne, separatedFeatures: Me } = Fe(() => {
    const t = je.filter((r) => r.type === "GROUP"), n = je.filter((r) => r.type !== "GROUP");
    return { separatedGroups: t, separatedFeatures: n };
  }, [je]), oe = Re(
    (t) => {
      J((n) => ({
        ...n,
        [z]: typeof t == "function" ? t(n[z] || []) : t
      }));
    },
    [z]
  ), Zt = Re((t) => {
    Oe(t);
  }, []), Vt = (t, n, r) => {
    oe((a) => a.map((i) => i.id === t ? { ...i, [n]: r } : i));
  }, Qt = (t) => {
    He(t.active.id);
  }, Yt = Re(
    (t) => {
      var C, Z, xt, yt, bt, St, Ct, It, vt, Rt, wt, Et;
      const { active: n, over: r } = t;
      if (!n || !n.data.current) {
        He(null);
        return;
      }
      const a = (C = r == null ? void 0 : r.data.current) == null ? void 0 : C.type, i = (Z = r == null ? void 0 : r.data.current) == null ? void 0 : Z.sectionId, s = (xt = n.data.current) == null ? void 0 : xt.sectionId, l = (yt = n.data.current) == null ? void 0 : yt.type;
      if (He(null), !r && z === "programs" && l === w.FEATURE) {
        const g = n.data.current.data;
        if (!g) return;
        J((h) => {
          const x = h.programs || {}, I = (x == null ? void 0 : x.features) || [], O = {
            id: g.id,
            name: g.name,
            instanceId: `PROGRAMS_ROOT_${g.id}_${crypto.randomUUID()}`,
            type: "FEATURE",
            icon: {
              id: `svg-icon-${g.id}`,
              content: g.icon,
              type: "svg"
            }
          };
          return {
            ...h,
            programs: {
              ...x,
              features: [...I, O]
            }
          };
        });
        return;
      }
      if ((r == null ? void 0 : r.id) === "trash-zone") {
        const g = n.id, h = n.data.current.sectionId;
        l === "FEATURE_TILE" ? h ? oe(
          (x) => x.map((I) => {
            if (I.id === h && (I != null && I.features)) {
              const O = I == null ? void 0 : I.features.filter((_) => _.instanceId !== g);
              return { ...I, features: O };
            }
            return I;
          })
        ) : z === "programs" && J((x) => {
          const I = x.programs || {}, _ = ((I == null ? void 0 : I.features) || []).filter((D) => D.instanceId !== g);
          return {
            ...x,
            programs: {
              ...I,
              features: _
            }
          };
        }) : (l === w.SECTION || l === w.SEARCH_BAR) && oe((x) => x.filter((I) => I.id !== n.id));
        return;
      }
      if (l === "FEATURE_TILE" && a === "FEATURE_TILE") {
        if (!s && z === "programs") {
          J((g) => {
            const h = g.programs || {}, x = (h == null ? void 0 : h.features) || [], I = x.findIndex((D) => D.instanceId === n.id), O = x.findIndex((D) => D.instanceId === r.id);
            if (I === -1 || O === -1)
              return g;
            const _ = Pe(x, I, O);
            return {
              ...g,
              programs: {
                ...h,
                features: _
              }
            };
          });
          return;
        }
        s === i && n.id !== r.id && oe(
          (g) => g.map((h) => {
            if (h.id === s) {
              const x = h == null ? void 0 : h.features, I = x.findIndex((D) => D.instanceId === n.id), O = x.findIndex((D) => D.instanceId === r.id);
              if (I === -1 || O === -1) return h;
              const _ = Pe(x, I, O);
              return { ...h, features: _ };
            }
            return h;
          })
        );
        return;
      }
      if (l === w.GROUP && a === w.SECTION_DROP_ZONE) {
        const g = n.data.current.data, h = (bt = r == null ? void 0 : r.data.current) == null ? void 0 : bt.sectionId;
        g && h && J((x) => {
          const I = x[z] || [], O = I.findIndex((ke) => ke.id === h);
          if (O === -1) return x;
          const _ = I[O], D = String(g.uuid);
          if (_ == null ? void 0 : _.features.some((ke) => ke.type === "GROUP" && String(ke.uuid) === D))
            return ie({
              type: "warn",
              message: `Group ${g.name} is already in this section.`
            }), x;
          const qe = {
            id: g.uuid,
            name: g.name,
            instanceId: `${h}_GROUP_${g.uuid}_${crypto.randomUUID()}`,
            type: "GROUP",
            menus: g.menus || [],
            icon: g.icon
          }, _e = {
            ..._,
            features: [..._.features, qe]
          }, ce = [...I];
          return ce[O] = _e, { ...x, [z]: ce };
        });
        return;
      }
      if (l === w.FEATURE && a === w.SECTION_DROP_ZONE) {
        const g = n.data.current.data, h = (St = r == null ? void 0 : r.data.current) == null ? void 0 : St.sectionId;
        g && h && J((x) => {
          const I = x[z] || [], O = I.findIndex((ce) => ce.id === h);
          if (O === -1) return x;
          const _ = I[O];
          if (_ == null ? void 0 : _.features.some((ce) => ce.id === g.id && ce.type === "FEATURE"))
            return ie({
              type: "warn",
              message: `Feature ${g.name} is already in this section.`
            }), x;
          const V = {
            id: g.id,
            name: g.name,
            instanceId: `${h}_${g.id}_${crypto.randomUUID()}`,
            type: "FEATURE",
            icon: {
              id: `svg-icon-${g.id}`,
              content: g.icon,
              type: "svg"
            }
          }, qe = {
            ..._,
            features: [..._.features, V]
          }, _e = [...I];
          return _e[O] = qe, { ...x, [z]: _e };
        });
        return;
      }
      if (!((Ct = n.data.current) != null && Ct.sortable && !((It = r == null ? void 0 : r.data.current) != null && It.sortable) && (r == null ? void 0 : r.id) === "mobile-content")) {
        if ((vt = r == null ? void 0 : r.data.current) != null && vt.sortable && ((Rt = n.data.current) == null ? void 0 : Rt.type) === w.SECTION && n.id !== r.id) {
          oe((g) => {
            const h = g.find((V) => V.type === w.SEARCH_BAR), x = g.filter((V) => V.type !== w.SEARCH_BAR), I = x.findIndex((V) => V.id === n.id), O = x.findIndex((V) => V.id === r.id);
            if (I === -1 || O === -1)
              return g;
            let D = Pe(x, I, O);
            return h && (D = [h, ...D]), D;
          });
          return;
        }
        if ((r == null ? void 0 : r.id) === "mobile-content" && l) {
          const g = (wt = r.data.current) == null ? void 0 : wt.type;
          if (g === "PROGRAMS_ROOT_DROP_ZONE") {
            if (l === w.GROUP) {
              ie({
                type: "warn",
                message: "Groups cannot be dropped directly onto the Programs tab."
              });
              return;
            }
            if (l === w.FEATURE) {
              const h = n.data.current.data;
              if (!h) return;
              J((x) => ({
                ...x,
                programs: {
                  ...x.programs,
                  features: [
                    ...x.programs.features,
                    {
                      id: h.id,
                      name: h.name,
                      instanceId: `PROGRAMS_ROOT_${h.id}_${crypto.randomUUID()}`,
                      type: "FEATURE",
                      icon: {
                        id: `svg-icon-${h.id}`,
                        content: h.icon,
                        type: "svg"
                      }
                    }
                  ]
                }
              }));
              return;
            }
          }
          if ((Et = n.data.current) != null && Et.sortable && g === "LAYOUT_ROOT_DROP_ZONE")
            return;
          if (g === "LAYOUT_ROOT_DROP_ZONE") {
            oe((h) => {
              if (l === w.SEARCH_BAR)
                return h.some((O) => O.type === w.SEARCH_BAR) ? (ie({
                  type: "info",
                  message: "Only one Search Bar is allowed."
                }), h) : [{
                  id: `comp-${Date.now()}`,
                  type: w.SEARCH_BAR,
                  queryName: "Query Name"
                }, ...h];
              if (l === w.SECTION) {
                const x = {
                  id: `comp-${Date.now()}`,
                  type: l,
                  title: "Section",
                  features: []
                };
                return [...h, x];
              }
              return h;
            });
            return;
          }
        }
      }
    },
    [oe, J, z, w]
  ), ft = "350px", Jt = () => /* @__PURE__ */ p(
    N,
    {
      sx: {
        width: ft,
        p: 1.5,
        border: "1px solid #ccc",
        borderRadius: "8px",
        backgroundColor: "#fff",
        display: "flex",
        alignItems: "center",
        boxShadow: "0 1px 10px rgba(0,0,0,0.3)"
      },
      children: [
        /* @__PURE__ */ e(W, { icon: kt, style: { marginRight: "8px", color: "#888" } }),
        /* @__PURE__ */ e(S, { variant: "body2", color: "textSecondary", sx: { flexGrow: 1 }, children: "Search..." })
      ]
    }
  ), Xt = () => /* @__PURE__ */ e(
    N,
    {
      sx: {
        width: ft,
        minHeight: "100px",
        backgroundColor: "#e6f0ff",
        border: "1px dashed #073149",
        borderRadius: "4px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        boxShadow: "0 1px 10px rgba(0,0,0,0.3)",
        color: "#073149"
      },
      children: /* @__PURE__ */ e(S, { variant: "caption", sx: { fontWeight: "bold" }, children: "Section Dragging" })
    }
  ), $e = ({ feature: t }) => /* @__PURE__ */ e(v, { item: !0, xs: 4, sm: 4, children: /* @__PURE__ */ p(
    N,
    {
      sx: {
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        p: 0.5,
        height: "100%",
        backgroundColor: "transparent",
        cursor: "grab"
      },
      children: [
        Ee(t.icon),
        /* @__PURE__ */ e(
          S,
          {
            variant: "caption",
            sx: {
              mt: 1,
              textAlign: "center",
              lineHeight: 1.2,
              width: "100%",
              fontSize: "0.65rem"
            },
            children: t.name
          }
        )
      ]
    }
  ) });
  $e.propTypes = {
    feature: m.any
  };
  const mt = ({ feature: t }) => /* @__PURE__ */ p(
    N,
    {
      sx: {
        width: "fit-content",
        p: "10px",
        pl: "10px",
        backgroundColor: "#fff",
        border: "1px solid #e0e0e0",
        borderRadius: "4px",
        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
        cursor: "grab",
        display: "flex",
        alignItems: "center",
        transition: "all 0.1s",
        mt: "4px",
        "&:hover": {
          backgroundColor: "#f5f5f5",
          borderColor: "#b0bec5"
        }
      },
      children: [
        ((r, a) => {
          const i = Ee(t.icon, "18px");
          return i && i.type === N ? K.cloneElement(i, {
            sx: {
              ...i.props.sx,
              height: "18px",
              width: "18px",
              marginRight: "8px"
            }
          }) : /* @__PURE__ */ e(N, { sx: { mr: "8px", display: "flex", alignItems: "center" }, children: Ee(r, a) });
        })(t.icon, "18px"),
        /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "normal", color: "#333" }, children: t == null ? void 0 : t.name })
      ]
    }
  );
  mt.propTypes = {
    feature: m.any
  };
  const Kt = (t) => {
    const r = M.flatMap((s) => s.type === w.GROUP ? [s, ...s.menus] : [s]).find((s) => (s.uuid || s.id) === t);
    if (r) {
      let s;
      return r.type ? s = r.type : r.menus ? s = w.GROUP : s = w.FEATURE, {
        type: s,
        data: r
      };
    }
    const a = le == null ? void 0 : le.find((s) => s.instanceId === t);
    if (a)
      return { type: "FEATURE_TILE", data: a };
    const i = re.find((s) => s.id === t);
    if (i) return { type: i.type, data: i };
    for (const s of re)
      if (s != null && s.features) {
        const l = s == null ? void 0 : s.features.find((C) => C.instanceId === t);
        if (l)
          return { type: "FEATURE_TILE", data: l };
      }
    return null;
  }, en = re.find((t) => t.id === dt), tn = (t) => {
    const n = Kt(t);
    return n ? n.type === w.SEARCH_BAR ? /* @__PURE__ */ e(Jt, {}) : n.type === w.SECTION ? /* @__PURE__ */ e(Xt, {}) : n.type === w.FEATURE ? /* @__PURE__ */ e(mt, { feature: n.data }) : n.type === w.GROUP ? /* @__PURE__ */ e($e, { feature: n.data }) : n.type === "FEATURE_TILE" ? /* @__PURE__ */ e($e, { feature: n.data }) : null : null;
  }, nn = Fe(() => {
    if (!me) return !1;
    const t = re.some((a) => a.id === me), n = re.some((a) => {
      var i;
      return (i = a == null ? void 0 : a.features) == null ? void 0 : i.some((s) => s.instanceId === me);
    }), r = le == null ? void 0 : le.some((a) => a.instanceId === me);
    return t || n || r;
  }, [me, re, le]), rn = re.filter((t) => t.type === w.SECTION).map((t) => t.id), on = (t) => {
    var r, a;
    const n = (a = (r = t.active) == null ? void 0 : r.data.current) == null ? void 0 : a.type;
    if (n === w.FEATURE) {
      const i = t.droppableContainers.filter(
        (s) => {
          var l;
          return ((l = s.data.current) == null ? void 0 : l.type) === "SECTION_DROP_ZONE";
        }
      );
      return At({
        ...t,
        droppableContainers: i
      });
    }
    if (n === w.SECTION) {
      const i = t.droppableContainers.filter((s) => {
        var l;
        return !(s.id === t.active.id || ((l = s.data.current) == null ? void 0 : l.type) === "SECTION_DROP_ZONE");
      });
      return At({
        ...t,
        droppableContainers: i
      });
    }
    return sn(t);
  };
  return /* @__PURE__ */ p(Ze, { children: [
    /* @__PURE__ */ e(Gn.Provider, { children: /* @__PURE__ */ e("form", { noValidate: !0, onSubmit: $.handleSubmit(pe), children: /* @__PURE__ */ p(
      Nt,
      {
        onDragStart: Qt,
        onDragEnd: Yt,
        collisionDetection: on,
        children: [
          /* @__PURE__ */ p(v, { container: !0, spacing: 1, children: [
            /* @__PURE__ */ e(v, { size: 1 }),
            /* @__PURE__ */ e(v, { size: 6, children: /* @__PURE__ */ p(
              v,
              {
                sx: {
                  padding: "2px",
                  margin: "6px 0px"
                },
                children: [
                  /* @__PURE__ */ p(v, { container: !0, sx: { justifyContent: "space-between" }, children: [
                    /* @__PURE__ */ e(v, { size: 2 }),
                    /* @__PURE__ */ e(S, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px", mb: 1 }, children: "Mobile View" }),
                    /* @__PURE__ */ p(v, { container: !0, spacing: 1, children: [
                      /* @__PURE__ */ e(
                        Ge,
                        {
                          variant: "contained",
                          color: "gray",
                          sx: { fontSize: "0.8rem", height: "30px" },
                          type: "submit",
                          onClick: () => {
                            P(!0);
                          },
                          children: "Back"
                        }
                      ),
                      /* @__PURE__ */ e(
                        Ge,
                        {
                          variant: "contained",
                          color: "primary",
                          sx: { fontSize: "0.8rem", height: "30px" },
                          type: "submit",
                          children: "Save"
                        }
                      )
                    ] })
                  ] }),
                  /* @__PURE__ */ e(v, { sx: { height: "100%", maxHeight: "100%", overflowY: "auto" }, children: /* @__PURE__ */ e(De, { items: rn, strategy: Ue, children: /* @__PURE__ */ e(
                    Gt,
                    {
                      tabStatus: fe,
                      layoutComponents: re,
                      componentTypes: w,
                      handleSectionClick: ut,
                      activeElementId: dt,
                      activeTabId: z,
                      handleTabSwitch: Zt,
                      formList: F,
                      selectedForm: We,
                      onFormSelect: Ht,
                      SvgIconBox: st,
                      setCurrentLayoutComponents: oe,
                      programFeatures: ((gt = he.programs) == null ? void 0 : gt.features) || []
                    }
                  ) }) }),
                  /* @__PURE__ */ e(v, { container: !0, spacing: 2, justifyContent: "space-around", sx: { my: "1.25rem" }, children: B.map((t) => /* @__PURE__ */ e(v, { item: !0, xs: 12, sm: 6, md: 3, children: /* @__PURE__ */ p(v, { container: !0, alignItems: "center", justifyContent: "space-between", children: [
                    /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "bolder" }, children: t.name }),
                    /* @__PURE__ */ e(
                      Ot,
                      {
                        checked: fe[t.id],
                        onChange: () => Y(t.id),
                        name: t.name,
                        sx: {
                          "& .MuiSwitch-switchBase.Mui-checked": {
                            color: "#073149",
                            "&:hover": {
                              backgroundColor: "rgba(7, 49, 73, 0.08)"
                            }
                          },
                          "& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track": {
                            backgroundColor: "#073149",
                            opacity: 0.7
                          }
                        }
                      }
                    )
                  ] }) }, t.id)) })
                ]
              }
            ) }),
            /* @__PURE__ */ e(v, { size: 1 }),
            /* @__PURE__ */ p(v, { size: 4, children: [
              /* @__PURE__ */ e(v, { size: 12, children: /* @__PURE__ */ p(xe, { sx: { padding: "2px", margin: "6px 0px" }, children: [
                /* @__PURE__ */ e(v, { className: "justify-between items-center", container: !0, children: /* @__PURE__ */ e(S, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px" }, children: "Menu Relation" }) }),
                /* @__PURE__ */ p(v, { container: !0, children: [
                  /* @__PURE__ */ e(v, { size: 12, children: /* @__PURE__ */ p(
                    Ve,
                    {
                      variant: "outlined",
                      className: "ml-3 mb-1 flex flex-row items-center align-items w-[90%]",
                      children: [
                        /* @__PURE__ */ p(S, { variant: "body2", children: [
                          "Select Role",
                          /* @__PURE__ */ e("span", { className: "text-red-500 ml-1", children: "*" }),
                          " :"
                        ] }),
                        /* @__PURE__ */ e(N, { className: "w-[60%] ms-3", children: /* @__PURE__ */ e(
                          Sn,
                          {
                            control: $.control,
                            size: "small",
                            id: "role",
                            name: "role",
                            options: E || [],
                            disabled: y,
                            displayName: "name",
                            optionValue: "id",
                            errors: $.formState.errors,
                            sx: { height: "50px", mt: 2 },
                            disableClearable: !!y,
                            placeholder: "Select role",
                            onChange: (t) => Ae(t.target.value)
                          }
                        ) })
                      ]
                    }
                  ) }),
                  /* @__PURE__ */ e(v, { size: 12, children: /* @__PURE__ */ p(
                    Ve,
                    {
                      variant: "standard",
                      className: "ml-3 mb-3 flex flex-row items-center align-items w-[90%]",
                      children: [
                        /* @__PURE__ */ e(S, { variant: "body2", children: "Attendance Required? :" }),
                        /* @__PURE__ */ e(N, { className: "w-[60%] ms-3", children: /* @__PURE__ */ e(
                          Ot,
                          {
                            checked: $.watch("isAttendanceRequired"),
                            onChange: (t) => $.setValue("isAttendanceRequired", t.target.checked),
                            sx: {
                              "& .MuiSwitch-switchBase.Mui-checked": {
                                color: "#073149",
                                "&:hover": {
                                  backgroundColor: "rgba(7, 49, 73, 0.08)"
                                }
                              },
                              "& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track": {
                                backgroundColor: "#073149",
                                opacity: 0.7
                              }
                            }
                          }
                        ) })
                      ]
                    }
                  ) })
                ] })
              ] }) }),
              /* @__PURE__ */ e(v, { size: 12, children: /* @__PURE__ */ p(
                xe,
                {
                  sx: {
                    padding: "5px",
                    margin: "2px 0px",
                    height: "595px",
                    transition: "height 0.3s ease-in-out"
                  },
                  children: [
                    /* @__PURE__ */ e(S, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px", mb: 1 }, children: "Draggable Components" }),
                    /* @__PURE__ */ p(v, { container: !0, spacing: 2, justifyContent: "space-around", sx: { p: 1 }, children: [
                      /* @__PURE__ */ e(we, { id: "draggable-search", componentType: w.SEARCH_BAR, children: /* @__PURE__ */ e(v, { item: !0, xs: 6, sm: 4, size: 6, children: /* @__PURE__ */ p(
                        N,
                        {
                          sx: {
                            width: "100%",
                            height: "50px",
                            p: "8px 10px",
                            backgroundColor: "#f0f4f8",
                            border: "1px solid #e0e0e0",
                            borderRadius: "8px",
                            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
                            cursor: "grab",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "flex-start",
                            color: "#073149",
                            transition: "all 0.2s ease-in-out",
                            "&:hover": {
                              backgroundColor: "#e0eaf1",
                              borderColor: "#b0bec5",
                              boxShadow: "0 2px 5px rgba(0, 0, 0, 0.15)"
                            }
                          },
                          children: [
                            /* @__PURE__ */ e(
                              X,
                              {
                                iconName: "faMagnifyingGlass",
                                style: { fontSize: "1.2rem", marginRight: "8px" }
                              }
                            ),
                            /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "bold", lineHeight: 1 }, children: "Search Bar" })
                          ]
                        }
                      ) }) }),
                      /* @__PURE__ */ e(we, { id: "draggable-section", componentType: w.SECTION, children: /* @__PURE__ */ e(v, { item: !0, xs: 6, sm: 4, size: 6, children: /* @__PURE__ */ p(
                        N,
                        {
                          sx: {
                            width: "100%",
                            height: "50px",
                            p: "8px 10px",
                            backgroundColor: "#f0f4f8",
                            border: "1px solid #e0e0e0",
                            borderRadius: "8px",
                            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
                            cursor: "grab",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "flex-start",
                            color: "#073149",
                            transition: "all 0.2s ease-in-out",
                            "&:hover": {
                              backgroundColor: "#c5e1ff",
                              borderColor: "#073149",
                              boxShadow: "0 2px 5px rgba(0, 0, 0, 0.15)"
                            }
                          },
                          children: [
                            /* @__PURE__ */ e(X, { iconName: "faBox", style: { fontSize: "1.2rem", marginRight: "8px" } }),
                            /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "bold", lineHeight: 1 }, children: "Section" })
                          ]
                        }
                      ) }) })
                    ] }),
                    /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(zt, { isDraggingSortable: nn }) }),
                    /* @__PURE__ */ e(ot, { sx: { mt: 2 } }),
                    /* @__PURE__ */ e(v, { size: 12, children: /* @__PURE__ */ p(
                      N,
                      {
                        sx: {
                          padding: "0px",
                          margin: "10px 0px",
                          height: "450px",
                          overflowY: "auto",
                          transition: "height 0.3s ease-in-out"
                        },
                        children: [
                          /* @__PURE__ */ e(S, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px", mb: 1 }, children: "Available Features" }),
                          /* @__PURE__ */ e(
                            Qe,
                            {
                              fullWidth: !0,
                              size: "small",
                              placeholder: "Search Feature...",
                              variant: "outlined",
                              sx: { mb: 2, px: 1 },
                              value: Le,
                              onChange: (t) => Lt(t.target.value),
                              InputProps: {
                                startAdornment: /* @__PURE__ */ e(pn, { position: "start", children: /* @__PURE__ */ e(X, { iconName: "faMagnifyingGlass" }) })
                              }
                            }
                          ),
                          /* @__PURE__ */ e(
                            N,
                            {
                              sx: {
                                flexGrow: 1,
                                overflowY: "auto",
                                padding: "0 8px"
                              },
                              children: /* @__PURE__ */ p(v, { container: !0, direction: "column", spacing: 0, sx: { px: 1 }, children: [
                                Ne.length > 0 && /* @__PURE__ */ e(
                                  v,
                                  {
                                    item: !0,
                                    xs: 12,
                                    sx: {
                                      mb: 1
                                    },
                                    children: /* @__PURE__ */ p(
                                      Ye,
                                      {
                                        sx: {
                                          "&:before": { display: "none" },
                                          boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
                                          border: "1px solid #c5e1ff",
                                          borderRadius: "4px!important",
                                          backgroundColor: "#fff"
                                        },
                                        expanded: ae,
                                        onChange: () => ue((t) => !t),
                                        disableGutters: !0,
                                        children: [
                                          /* @__PURE__ */ e(
                                            Je,
                                            {
                                              expandIcon: /* @__PURE__ */ e(X, { iconName: "faChevronDown", style: { color: "#3f51b5" } }),
                                              sx: {
                                                minHeight: "40px",
                                                backgroundColor: "#e3f2fd",
                                                "&:hover": { backgroundColor: "#c5e3f8" },
                                                "& .MuiAccordionSummary-content": { margin: "0" },
                                                p: "0 10px"
                                              },
                                              children: /* @__PURE__ */ p(S, { variant: "subtitle2", sx: { fontWeight: "bold", color: "#3f51b5" }, children: [
                                                /* @__PURE__ */ e(X, { iconName: "faLayerGroup", style: { marginRight: "6px" } }),
                                                "Menu Groups (",
                                                Ne.length,
                                                ")"
                                              ] })
                                            }
                                          ),
                                          /* @__PURE__ */ e(Xe, { sx: { p: "8px", pt: 1, backgroundColor: "#f9f9f9" }, children: /* @__PURE__ */ e(v, { container: !0, spacing: 0.5, direction: "column", children: Ne.map((t) => /* @__PURE__ */ e(
                                            tt,
                                            {
                                              item: t,
                                              COMPONENT_TYPES: w,
                                              activeGroupId: jt,
                                              onGroupToggle: qt
                                            },
                                            t.uuid
                                          )) }) })
                                        ]
                                      }
                                    )
                                  }
                                ),
                                Me.length > 0 && /* @__PURE__ */ e(v, { item: !0, xs: 12, children: /* @__PURE__ */ p(
                                  Ye,
                                  {
                                    sx: {
                                      mt: 0.5,
                                      "&:before": { display: "none" },
                                      boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
                                      border: "1px solid #c8e6c9",
                                      mb: 1,
                                      borderRadius: "4px!important",
                                      backgroundColor: "#fff"
                                    },
                                    expanded: A,
                                    onChange: () => j((t) => !t),
                                    disableGutters: !0,
                                    children: [
                                      /* @__PURE__ */ e(
                                        Je,
                                        {
                                          expandIcon: /* @__PURE__ */ e(X, { iconName: "faChevronDown", style: { color: "#009688" } }),
                                          sx: {
                                            minHeight: "40px",
                                            backgroundColor: "#e8f5e9",
                                            "&:hover": { backgroundColor: "#cbe6cc" },
                                            "& .MuiAccordionSummary-content": { margin: "0" },
                                            p: "0 10px"
                                          },
                                          children: /* @__PURE__ */ p(S, { variant: "subtitle2", sx: { fontWeight: "bold", color: "#009688" }, children: [
                                            /* @__PURE__ */ e(X, { iconName: "faPuzzlePiece", style: { marginRight: "6px" } }),
                                            "Standalone Features (",
                                            Me.length,
                                            ")"
                                          ] })
                                        }
                                      ),
                                      /* @__PURE__ */ e(Xe, { sx: { p: "8px", pt: 1, backgroundColor: "#ffffff" }, children: /* @__PURE__ */ e(v, { container: !0, spacing: 0.5, direction: "column", children: Me.map((t) => /* @__PURE__ */ e(
                                        tt,
                                        {
                                          item: t,
                                          COMPONENT_TYPES: w
                                        },
                                        t.uuid
                                      )) }) })
                                    ]
                                  }
                                ) }),
                                Ne.length === 0 && Me.length === 0 && /* @__PURE__ */ e(S, { variant: "body2", sx: { p: 2, color: "#9e9e9e", textAlign: "center" }, children: "No groups or features match your search criteria." })
                              ] })
                            }
                          )
                        ]
                      }
                    ) })
                  ]
                }
              ) }),
              /* @__PURE__ */ e(v, { size: 12, sx: { mt: 1 }, children: /* @__PURE__ */ e(
                Wt,
                {
                  activeComponent: en,
                  onUpdate: Vt,
                  onDeselect: () => ut(null),
                  mobileQueries: ee
                }
              ) })
            ] })
          ] }),
          /* @__PURE__ */ e(an, { children: tn(me) })
        ]
      }
    ) }) }),
    /* @__PURE__ */ e(
      Pn,
      {
        open: be,
        handleClose: () => {
          P(!1);
        },
        handleClick: () => {
          b("/ui/medplat/admin/mobileMenuManagement");
        },
        title: "Leave Page",
        description: "Changes you made will be discarded. Do you want to continue?",
        dataTestId: "delete-auth-confirmation"
      }
    )
  ] });
}
function we({ id: o, children: c, componentType: d, dragData: b = null }) {
  const { attributes: E, listeners: u, setNodeRef: y, transform: R } = Mt({
    id: o,
    data: { type: d, ...b && { data: b } }
  }), F = R ? {
    transform: `translate3d(${R.x}px, ${R.y}px, 0)`,
    zIndex: 1e3,
    opacity: 0.9
  } : void 0;
  return K.cloneElement(c, {
    ref: y,
    style: { ...c.props.style, ...F },
    ...u,
    ...E
  });
}
m.node, m.number.isRequired, m.number.isRequired;
const zt = ({ isDraggingSortable: o }) => {
  const { setNodeRef: c, isOver: d } = nt({
    id: "trash-zone"
  });
  return o ? /* @__PURE__ */ p(
    N,
    {
      ref: c,
      sx: {
        position: "fixed",
        bottom: 20,
        left: "50%",
        transform: "translateX(-50%)",
        width: 250,
        height: 50,
        p: 2,
        borderRadius: "8px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: d ? "#d32f2f" : "#ef5350",
        color: "white",
        zIndex: 3e3,
        transition: "background-color 0.2s"
      },
      children: [
        /* @__PURE__ */ e(W, { icon: On, style: { marginRight: "10px" } }),
        /* @__PURE__ */ e(S, { variant: "body1", children: d ? "Release to Delete" : "Drag Here to Delete" })
      ]
    }
  ) : null;
};
zt.propTypes = {
  isDraggingSortable: m.any
};
const Wt = ({ activeComponent: o, onUpdate: c, onDeselect: d, mobileQueries: b }) => {
  if (!o)
    return /* @__PURE__ */ p(
      xe,
      {
        sx: {
          p: 1,
          backgroundColor: "#f5f5f5",
          textAlign: "center"
        },
        children: [
          /* @__PURE__ */ e(S, { variant: "subtitle1", sx: { fontWeight: "bold", mb: 1, color: "#073149" }, children: "Component Configuration" }),
          /* @__PURE__ */ e(ot, { sx: { mb: 1 } }),
          /* @__PURE__ */ p(S, { variant: "body1", children: [
            "To add or edit ",
            /* @__PURE__ */ e("b", { children: "Section Title" }),
            " or ",
            /* @__PURE__ */ e("b", { children: "Search Bar Query Name" }),
            ":"
          ] }),
          /* @__PURE__ */ p(N, { sx: { display: "flex", alignItems: "center", justifyContent: "center", mb: 1 }, children: [
            /* @__PURE__ */ e(S, { variant: "body1", color: "primary", children: "Right-Click" }),
            /* @__PURE__ */ e(S, { variant: "body1", sx: { ml: 1 }, children: "on the selected component card" })
          ] }),
          /* @__PURE__ */ e(S, { variant: "caption", color: "textSecondary", children: "This will open the menu to access the **Configuration Panel**." })
        ]
      }
    );
  if (o.type === "SEARCH_BAR") {
    const E = b.map((u) => u.code);
    if (o.type === "SEARCH_BAR")
      return /* @__PURE__ */ p(xe, { sx: { p: 2, height: "100%" }, children: [
        /* @__PURE__ */ e(S, { variant: "h6", sx: { mb: 2 }, children: "Search Bar Configuration" }),
        /* @__PURE__ */ e(
          mn,
          {
            disablePortal: !0,
            id: "query-name-autocomplete",
            options: E,
            size: "small",
            fullWidth: !0,
            sx: { mb: 2 },
            value: o.queryName || null,
            onChange: (u, y) => {
              c(o.id, "queryName", y || "");
            },
            renderInput: (u) => /* @__PURE__ */ e(Qe, { ...u, label: "Query Code", variant: "outlined", placeholder: "Select or search query code" })
          }
        ),
        /* @__PURE__ */ e(Ge, { onClick: d, variant: "outlined", color: "gray", children: "Close" })
      ] });
  }
  return o.type === "SECTION" ? /* @__PURE__ */ p(xe, { sx: { p: 2, height: "100%" }, children: [
    /* @__PURE__ */ e(S, { variant: "h6", sx: { mb: 2 }, children: "Section Configuration" }),
    /* @__PURE__ */ e(
      Qe,
      {
        label: "Section Title",
        variant: "outlined",
        fullWidth: !0,
        value: o.title || "",
        onChange: (E) => c(o.id, "title", E.target.value),
        sx: { mb: 2 }
      }
    ),
    /* @__PURE__ */ e(Ge, { onClick: d, variant: "outlined", color: "gray", children: "Close" })
  ] }) : null;
};
Wt.propTypes = {
  activeComponent: m.any,
  onUpdate: m.any,
  onDeselect: m.any,
  mobileQueries: m.any
};
function st({ svg: o }) {
  const [c, d] = k("");
  return Ke(() => {
    if (o) {
      const u = new DOMParser().parseFromString(o, "image/svg+xml").documentElement;
      if (!u.getAttribute("viewBox")) {
        const F = u.getAttribute("width") || "512", Q = u.getAttribute("height") || "512";
        u.setAttribute("viewBox", `0 0 ${F} ${Q}`);
      }
      u.removeAttribute("width"), u.removeAttribute("height"), u.setAttribute("style", "width: 100%; height: 100%;");
      const R = new XMLSerializer().serializeToString(u);
      d(R);
    }
  }, [o]), /* @__PURE__ */ e(
    fn,
    {
      size: 2,
      sx: {
        alignItems: "center",
        alignSelf: "center",
        height: "40px",
        width: "40px",
        display: "flex",
        justifyContent: "center",
        textAlign: "center",
        backgroundColor: "",
        borderRadius: "3%",
        transition: "background-color 0.3s ease",
        "&:hover": {
          backgroundColor: "#e0e0e0",
          cursor: "pointer"
        },
        overflow: "hidden"
      },
      children: /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: c } })
    }
  );
}
st.propTypes = {
  svg: m.string.isRequired
};
const Ee = (o, c = "36px") => {
  let d = null;
  if (typeof o == "object" && o !== null ? o.type === "svg" && typeof o.content == "string" ? d = o.content : typeof o.svg == "string" && (d = o.svg) : typeof o == "string" && (d = o), typeof d == "string" && d.includes("<svg")) {
    const b = d.match(/<svg[\s\S]*<\/svg>/i);
    b && (d = b[0]);
  }
  return d ? /* @__PURE__ */ e(
    N,
    {
      sx: {
        height: c,
        width: c,
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      },
      children: /* @__PURE__ */ e(st, { svg: d })
    }
  ) : /* @__PURE__ */ e(
    N,
    {
      sx: {
        fontSize: "1.2rem",
        color: "#b0bec5",
        border: "1px solid",
        borderRadius: "50%",
        height: "36px",
        width: "36px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        marginBottom: "4px"
      },
      children: "?"
    }
  );
}, et = ({ feature: o, isGroupMember: c = !1 }) => /* @__PURE__ */ p(
  N,
  {
    sx: {
      width: "fit-content",
      p: "10px",
      pl: c ? "20px" : "10px",
      backgroundColor: "#fff",
      border: "1px solid #e0e0e0",
      borderRadius: "4px",
      boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
      cursor: "grab",
      display: "flex",
      alignItems: "center",
      transition: "all 0.1s",
      mt: "4px",
      "&:hover": {
        backgroundColor: "#f5f5f5",
        borderColor: "#b0bec5"
      }
    },
    children: [
      ((b, E) => {
        const u = Ee(o.icon, "18px");
        return u && u.type === N ? K.cloneElement(u, {
          sx: {
            ...u.props.sx,
            height: "18px",
            width: "18px",
            marginRight: "8px"
          }
        }) : /* @__PURE__ */ e(N, { sx: { mr: "8px", display: "flex", alignItems: "center" }, children: Ee(b, E) });
      })(o.icon, "18px"),
      /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "normal", color: "#333" }, children: o == null ? void 0 : o.name })
    ]
  }
);
et.propTypes = {
  feature: m.any,
  isGroupMember: m.any
};
const tt = ({ item: o, COMPONENT_TYPES: c, activeGroupId: d, onGroupToggle: b }) => {
  const E = d === o.uuid, u = (y) => {
    y.stopPropagation();
  };
  return o.type !== "GROUP" ? /* @__PURE__ */ e(we, { id: o.uuid, componentType: c.FEATURE, dragData: o, children: /* @__PURE__ */ e(v, { item: !0, xs: 12, children: /* @__PURE__ */ e(et, { feature: o }) }, o.id) }, o.uuid) : /* @__PURE__ */ p(
    Ye,
    {
      sx: {
        m: 0,
        "&:before": { display: "none" },
        boxShadow: "none",
        border: "1px solid #e0e0e0",
        mb: 1,
        borderRadius: "4px!important"
      },
      expanded: E,
      onChange: () => b(o.uuid),
      disableGutters: !0,
      children: [
        /* @__PURE__ */ e(
          Je,
          {
            expandIcon: /* @__PURE__ */ e(N, { sx: { p: 1 }, onMouseDown: u, onTouchStart: u, children: /* @__PURE__ */ e(
              X,
              {
                iconName: "faChevronDown",
                style: {
                  fontSize: "1rem",
                  color: "#073149",
                  transform: E ? "rotate(360deg)" : "rotate(0deg)",
                  transition: "transform 0.2s"
                }
              }
            ) }),
            sx: {
              minHeight: "15px",
              backgroundColor: "#e3f2fd",
              borderBottom: "1px solid #bbdefb",
              cursor: "grab",
              "&:hover": { backgroundColor: "#c5e3f8" },
              "& .MuiAccordionSummary-content": { margin: "0" },
              p: "0 10px"
            },
            children: /* @__PURE__ */ p(N, { sx: { display: "flex", alignItems: "center", width: "100%" }, children: [
              /* @__PURE__ */ e(
                we,
                {
                  id: o.uuid,
                  componentType: c.GROUP,
                  dragData: o,
                  children: /* @__PURE__ */ e(
                    N,
                    {
                      component: "span",
                      sx: { cursor: "grab", mr: 1, px: 0.5, "&:hover": { color: "#007bff" } },
                      onClick: (y) => y.stopPropagation(),
                      onMouseDown: (y) => y.stopPropagation(),
                      onTouchStart: (y) => y.stopPropagation(),
                      children: /* @__PURE__ */ e(X, { iconName: "faBars", style: { fontSize: "0.8rem", color: "#073149" } })
                    }
                  )
                },
                `drag-handle-${o.uuid}`
              ),
              /* @__PURE__ */ p(S, { variant: "subtitle2", sx: { fontWeight: "bold", color: "#073149", flexGrow: 1 }, children: [
                o.name,
                " (",
                o.menus.length,
                ")"
              ] })
            ] })
          }
        ),
        /* @__PURE__ */ e(Xe, { sx: { p: "8px", pt: 1, backgroundColor: "#f9f9f9" }, children: /* @__PURE__ */ e(v, { container: !0, spacing: 0.5, children: o.menus.map((y) => /* @__PURE__ */ e(
          we,
          {
            id: y.uuid,
            componentType: c.FEATURE,
            dragData: y,
            children: /* @__PURE__ */ e(v, { item: !0, xs: 12, children: /* @__PURE__ */ e(et, { feature: y, isGroupMember: !0 }) }, y.id)
          },
          y.uuid
        )) }) })
      ]
    },
    o.uuid
  );
};
tt.propTypes = {
  item: m.any,
  COMPONENT_TYPES: m.any,
  activeGroupId: m.any,
  onGroupToggle: m.any
};
export {
  cr as default
};
//# sourceMappingURL=AddMenuConfiguration-QWfpcnuP.js.map
