import { jsx as r, jsxs as f } from "@emotion/react/jsx-runtime";
import { useModuleDictionary as O } from "@m4l/core";
import { ActionsCloseSmOutlined as P } from "@m4l/icons";
import { useFormatter as D } from "@m4l/graphics";
import { useState as I, useEffect as g, cloneElement as k, isValidElement as x } from "react";
import { Chip as C } from "../../../Chip/Chip.js";
import { useDynamicFilterStore as L } from "../../store/useDynamicFilterStore.js";
import { fieldFactory as z } from "../FieldTypes/fieldFactory.js";
import A from "../DynamicFilterBase/useDynamicFilterBase.js";
import { usePopoverContainer as $ } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
import { OverflowPopoverStyled as B, OverflowPopoverListStyled as j, OverflowPopoverItemStyled as R, OverflowPopoverItemHeaderStyled as H, OverflowPopoverItemLabelStyled as K } from "../../slots/dynamicFilterSlots.js";
import { Icon as M } from "../../../Icon/Icon.js";
import { IconButton as T } from "../../../extended/mui/IconButton/IconButton.js";
function oe(u) {
  const { anchorEl: v, filters: l, onClose: s } = u, { size: i } = A(), { getLabel: y } = O(), w = D(), c = $(!0), { hidePopoverFilter: d, removeFilter: h, showPopoverFilterForEdit: F } = L(
    (e) => e.actions
  ), [n, m] = I(-1);
  function p(e) {
    s(), d(!1), setTimeout(() => F(e), 10);
  }
  g(() => {
    const e = (o) => {
      o.key === "ArrowDown" ? (o.preventDefault(), m((t) => t < l.length - 1 ? t + 1 : t)) : o.key === "ArrowUp" ? (o.preventDefault(), m((t) => t > 0 ? t - 1 : 0)) : o.key === "Enter" && n >= 0 && n < l.length ? (o.preventDefault(), p(l[n])) : o.key === "Escape" && s();
    };
    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
  }, [l, n]);
  function b(e, o) {
    e.stopPropagation(), d(!1), h(o.id);
  }
  return c ? /* @__PURE__ */ r(
    B,
    {
      open: !0,
      disableAutoFocus: !0,
      disableRestoreFocus: !0,
      anchorOrigin: { vertical: "bottom", horizontal: "left" },
      transformOrigin: { vertical: "top", horizontal: "left" },
      sx: (e) => ({
        mt: e.vars.size.baseSpacings.sp2
      }),
      anchorEl: v,
      onClose: s,
      container: c,
      children: /* @__PURE__ */ r(j, { children: l.map((e, o) => {
        const t = z(e.field.type).getLabels(e, y, w, e.field), S = t.labelOperands.split(" | ").filter(Boolean);
        return /* @__PURE__ */ f(
          R,
          {
            "data-testid": `overflow-popover-item-${e.id}`,
            "data-selected": o === n ? "true" : "false",
            ownerState: { selected: o === n },
            onClick: () => p(e),
            children: [
              x(e.field.urlIcon) ? k(e.field.urlIcon, { size: i, color: "text.secondary" }) : /* @__PURE__ */ r(M, { src: e.field.urlIcon, size: i, color: "text.secondary" }),
              /* @__PURE__ */ f(H, { children: [
                /* @__PURE__ */ r(K, { children: `${t.labelField}=` }),
                S.map((a, E) => /* @__PURE__ */ r(
                  C,
                  {
                    size: i,
                    variant: "contained",
                    opacity: !0,
                    color: e.field.color ?? "default",
                    label: a
                  },
                  `${e.id}-${E}`
                ))
              ] }),
              !e.fixed && /* @__PURE__ */ r(
                T,
                {
                  size: i,
                  icon: /* @__PURE__ */ r(P, {}),
                  onClick: (a) => b(a, e)
                }
              )
            ]
          },
          e.id
        );
      }) })
    }
  ) : null;
}
export {
  oe as default
};
