import { jsx as t, jsxs as n, Fragment as A } from "@emotion/react/jsx-runtime";
import { useState as E, useMemo as w, useCallback as m } from "react";
import { useModuleDictionary as M } from "@m4l/core";
import { DICTIONARY as a } from "../../../../dictionary.js";
import { Icon as i } from "@m4l/base";
import { ContainerToggleCardsStyled as O, CardToggleButtonStyled as b, TextToggleCardButtonStyled as g } from "../../../../slots/DataGridSlot.js";
import { LayoutTableOutlined as C, LayoutCardOutlined as l } from "@m4l/icons";
import { IconButton as D } from "../../../../../extended/mui/IconButton/IconButton.js";
import { useDataGrid as _ } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
import { Popover as x } from "../../../../../extended/mui/Popover/Popover.js";
function N() {
  const { viewMode: o, onViewModeChange: h, cardsViewConfig: v, listViewConfig: f } = _(), { getLabel: r } = M(), [d, p] = E(null), e = {
    viewMode: o
  }, S = v !== void 0, y = f !== void 0, I = w(() => !!d, [d]), T = m(
    (u) => {
      p(u.currentTarget);
    },
    []
  ), c = m(() => {
    p(null);
  }, []), s = m(
    (u) => {
      h?.(u), c();
    },
    [h, c]
  ), V = w(() => o === "table" ? /* @__PURE__ */ t(i, { icon: /* @__PURE__ */ t(C, {}) }) : o === "list" ? /* @__PURE__ */ t(i, { icon: /* @__PURE__ */ t(l, {}) }) : /* @__PURE__ */ t(i, { icon: /* @__PURE__ */ t(l, {}) }), [o]);
  return /* @__PURE__ */ n(A, { children: [
    /* @__PURE__ */ t(
      D,
      {
        tooltip: r(a.TOOLTIP_VIEW_MODE),
        onClick: T,
        "aria-label": "view-mode",
        icon: V,
        dataTestId: "view-mode-button"
      }
    ),
    /* @__PURE__ */ t(
      x,
      {
        open: I,
        anchorEl: d,
        onClose: c,
        anchorOrigin: { vertical: "bottom", horizontal: "left" },
        transformOrigin: { vertical: "top", horizontal: "left" },
        slotProps: {
          paper: {
            sx: { mt: 0.6 }
          }
        },
        children: /* @__PURE__ */ n(O, { ownerState: { ownerState: e }, children: [
          /* @__PURE__ */ n(
            b,
            {
              ownerState: { ...e, isActive: o === "table" },
              variant: "outlined",
              role: "button",
              onClick: () => s("table"),
              "data-testid": "toggle-button-table",
              children: [
                /* @__PURE__ */ t(
                  i,
                  {
                    icon: /* @__PURE__ */ t(C, {}),
                    color: o === "table" ? "primary.enabled" : "text.disabled"
                  }
                ),
                /* @__PURE__ */ t(
                  g,
                  {
                    ownerState: { ...e, isActive: o === "table" },
                    variant: "bodyStandard",
                    children: r(a.VIEW_MODE_TABLE)
                  }
                )
              ]
            }
          ),
          S && /* @__PURE__ */ n(
            b,
            {
              ownerState: { ...e, isActive: o === "cards" },
              variant: "outlined",
              role: "button",
              onClick: () => s("cards"),
              "data-testid": "toggle-button-cards",
              children: [
                /* @__PURE__ */ t(
                  i,
                  {
                    icon: /* @__PURE__ */ t(l, {}),
                    color: o === "cards" ? "primary.enabled" : "text.disabled"
                  }
                ),
                /* @__PURE__ */ t(
                  g,
                  {
                    ownerState: { ...e, isActive: o === "cards" },
                    variant: "bodyStandard",
                    children: r(a.VIEW_MODE_CARDS)
                  }
                )
              ]
            }
          ),
          y && /* @__PURE__ */ n(
            b,
            {
              ownerState: { ...e, isActive: o === "list" },
              variant: "outlined",
              role: "button",
              onClick: () => s("list"),
              "data-testid": "toggle-button-list",
              children: [
                /* @__PURE__ */ t(
                  i,
                  {
                    icon: /* @__PURE__ */ t(l, {}),
                    color: o === "list" ? "primary.enabled" : "text.disabled"
                  }
                ),
                /* @__PURE__ */ t(
                  g,
                  {
                    ownerState: {
                      ...e,
                      isActive: o === "list"
                    },
                    variant: "bodyStandard",
                    children: r(a.VIEW_MODE_LIST_CARDS)
                  }
                )
              ]
            }
          )
        ] })
      }
    )
  ] });
}
export {
  N as ViewMode
};
