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