import { jsxs as o, Fragment as h, jsx as t } from "@emotion/react/jsx-runtime";
import { AnimatePresence as u } from "framer-motion";
import { useModuleDictionary as y } from "@m4l/core";
import { PATH_ICONS as i } from "../../icons.js";
import { BackdropStyled as C, SettingsLayoutRootStyled as A, HeaderContainerStyled as b, TypographyStyled as E, HeaderActionsStyled as L, BodyContentStyled as T } from "../../slots/SettingsLayoutSlots.js";
import w from "../SettingDirection/SettingDirection.js";
import { DICTIONARY as D } from "../../dictionary.js";
import { useThemeSettingsStore as I } from "@m4l/graphics";
import { SETTINGS_LAYOUT_CLASSES as s } from "../../constants.js";
import { IconButton as l } from "../../../extended/mui/IconButton/IconButton.js";
import { SettingMode as N } from "../SettingMode/SettingMode.js";
import { SettingColorPresets as O } from "../SettingColorPresets/SettingColorPresets.js";
import { SettingFullscreen as R } from "../SettingFullscreen/SettingFullscreen.js";
const G = (a) => {
  const {
    open: r,
    themeUserSettings: m,
    settingsActions: c
  } = I((f) => f), { prefixPathIcon: e, width: S } = a, { themeDirection: d } = m, { onResetSetting: p, handleOpen: n } = c, { getLabel: g } = y();
  return /* @__PURE__ */ o(h, { children: [
    /* @__PURE__ */ t(
      C,
      {
        ownerState: {},
        open: r,
        onClick: () => n()
      }
    ),
    /* @__PURE__ */ t(u, { children: r && /* @__PURE__ */ o(A, { role: "form", "aria-label": "settings-layout", ownerState: { themeDirection: d, width: S }, className: s.root, children: [
      /* @__PURE__ */ o(b, { ownerState: {}, className: s.headerContainer, children: [
        /* @__PURE__ */ t(
          E,
          {
            ownerState: {},
            variant: "subtitleDens",
            ellipsis: !0,
            children: g(D.MODULE_NAME)
          }
        ),
        /* @__PURE__ */ o(L, { children: [
          /* @__PURE__ */ t(
            l,
            {
              src: `${e}/${i.REFRESH}`,
              onClick: p,
              role: "button",
              "aria-label": "reset-setting"
            }
          ),
          /* @__PURE__ */ t(
            l,
            {
              src: `${e}/${i.CLOSE}`,
              onClick: () => n(),
              role: "button",
              "aria-label": "close-settings"
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ o(T, { ownerState: {}, children: [
        /* @__PURE__ */ t(N, { prefixPathIcon: e }),
        /* @__PURE__ */ t(w, { prefixPathIcon: e }),
        /* @__PURE__ */ t(O, { prefixPathIcon: e }),
        /* @__PURE__ */ t(R, { prefixPathIcon: e })
      ] })
    ] }) })
  ] });
};
export {
  G as SettingsLayoutBase
};
