import { jsx as r, jsxs as m } from "@emotion/react/jsx-runtime";
import { useModuleDictionary as O } from "@m4l/core";
import { ActionsCloseSmOutlined as D } from "@m4l/icons";
import { useFormatter as g } from "@m4l/graphics";
import { useState as k, useEffect as x } from "react";
import { Chip as E } from "../../../Chip/Chip.js";
import { useDynamicSortStore as I } from "../../store/useDynamicSortStore.js";
import C from "../DynamicSortBase/useDynamicSortBase.js";
import { fieldFactory as F } from "../FieldTypes/fieldFactory.js";
import { usePopoverContainer as L } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
import { OverflowSortPopoverStyled as P, OverflowSortListStyled as z, OverflowSortItemStyled as A, OverflowSortItemHeaderStyled as j, OverflowSortItemLabelStyled as B } from "../../slots/DynamicSortSlots.js";
import { Icon as R } from "../../../Icon/Icon.js";
import { IconButton as H } from "../../../extended/mui/IconButton/IconButton.js";
function Z(p) {
  const { anchorEl: u, sorts: i, onClose: l } = p, { size: a } = C(), { getLabel: S } = O(), y = g(), s = L(!0), { hidePopoverSort: d, removeSort: w, showPopoverSortForEdit: h } = I(
    (e) => e.actions
  ), [n, c] = k(-1);
  function f(e) {
    l(), d(!1), setTimeout(() => h(e), 10);
  }
  function v(e, o) {
    e.stopPropagation(), d(!1), w(o.id);
  }
  return x(() => {
    const e = (o) => {
      o.key === "ArrowDown" ? (o.preventDefault(), c((t) => t < i.length - 1 ? t + 1 : t)) : o.key === "ArrowUp" ? (o.preventDefault(), c((t) => t > 0 ? t - 1 : 0)) : o.key === "Enter" && n >= 0 && n < i.length ? (o.preventDefault(), f(i[n])) : o.key === "Escape" && l();
    };
    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
  }, [i, n]), s ? /* @__PURE__ */ r(
    P,
    {
      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: u,
      onClose: l,
      container: s,
      children: /* @__PURE__ */ r(z, { children: i.map((e, o) => {
        const t = F(e.field.type).getLabels(e, S, y, e.field);
        return /* @__PURE__ */ m(
          A,
          {
            ownerState: { selected: o === n },
            "data-testid": "dynamic-sort-overflow-item",
            "data-field-name": e.field.name,
            onClick: () => f(e),
            children: [
              /* @__PURE__ */ r(R, { src: e.field.urlIcon, size: a, color: "text.secondary" }),
              /* @__PURE__ */ m(j, { children: [
                /* @__PURE__ */ r(B, { children: t.labelField }),
                /* @__PURE__ */ r(
                  E,
                  {
                    size: a,
                    variant: "contained",
                    opacity: !0,
                    color: "default",
                    label: t.labelOperator
                  }
                )
              ] }),
              !e.fixed && /* @__PURE__ */ r(
                H,
                {
                  size: a,
                  icon: /* @__PURE__ */ r(D, {}),
                  onClick: (b) => v(b, e)
                }
              )
            ]
          },
          e.id
        );
      }) })
    }
  ) : null;
}
export {
  Z as default
};
