import { jsxs as m, jsx as s } from "@emotion/react/jsx-runtime";
import { useEnvironment as H } from "@m4l/core";
import { useState as b, useEffect as F, useMemo as M } from "react";
import { ICONS as p } from "../../icons.js";
import { dragResizeWindowRNDClasses as A } from "../../../DragResizeWindowRND/classes/index.js";
import { deepEqual as w } from "fast-equals";
import { useFormatter as P } from "@m4l/graphics";
import { useButtonActions as W } from "./useButtonActions.js";
import { HeaderWindowComponentStyled as U, HeaderContentStyled as j, IconWindowStyled as V, ContainerTitleSubtitleStyled as q, TitleWindowStyled as K, PointIconStyled as G, SubtitleWindowStyled as J, IconsWrapperStyled as Q, ContainerLeftActionsStyled as X, MenuActionsWindowsStyled as Y } from "../../slots/WindowBaseSlots.js";
import { windowBaseClasses as k } from "../../constants.js";
import Z from "clsx";
import { IconButton as ee } from "../../../extended/mui/IconButton/IconButton.js";
const ue = (N) => {
  const {
    title: T,
    subTitle: u,
    onClose: y,
    iconUrl: C,
    size: i,
    selected: B,
    maximized: _,
    version: d,
    buildTime: f,
    variant: E,
    actions: r = [],
    collapsed: S,
    emergeType: a,
    draggable: g
  } = N, { host_static_assets: l, environment_assets: c } = H(), { dateFormatter: h } = P(), [O, R] = b(() => r.filter((t) => t.place === "left")), [x, z] = b(() => r.filter((t) => t.place === "right")), [I, v] = b(() => r.filter((t) => t.place === "inside"));
  F(() => {
    const t = r.reduce(
      (e, o) => (e[o.place]?.push(o), e),
      { left: [], right: [], inside: [] }
    );
    R((e) => w(e, t.left) ? e : t.left), z((e) => w(e, t.right) ? e : t.right), v((e) => w(e, t.inside) ? e : t.inside);
  }, [r]);
  const $ = M(() => {
    const t = [
      ...I.map((e) => e.type === "groupActions" ? e.actions.map((o) => ({
        type: "menuItem",
        startIcon: o.iconUrl,
        label: o.label,
        onClick: o.onClick,
        disabled: o.disabled,
        checkable: !0,
        checked: o.key === e.selectedActionKey
      })) : {
        type: "menuItem",
        startIcon: e.iconUrl,
        label: e.label,
        onClick: e.onClick,
        disabled: e.disabled,
        color: e.color,
        className: e.className
      }).flat()
    ];
    return d && t.push({
      type: "menuItem",
      startIcon: `${l}/${c}/frontend/components/menu_actions/assets/icons/${p.VERSION}`,
      label: f ? `${d} - ${h.formatDate(new Date(f), h.datetimeFormat)}` : d,
      onClick: () => {
      },
      disabled: !0,
      color: "default"
      //className: 'version-action',
    }), t;
  }, [I, d, l, c, f, h]), n = {
    selected: B,
    maximized: _,
    variant: E,
    size: i,
    emergeType: a,
    collapsed: S,
    draggable: g
  }, D = W(O), L = W(x);
  return /* @__PURE__ */ m(U, { className: Z(g && A.draggableHandle, k.headerWindowComponent), ownerState: n, children: [
    /* @__PURE__ */ m(j, { ownerState: n, className: k.headerContentWindowBase, children: [
      C && /* @__PURE__ */ s(V, { size: i, ownerState: n, src: C, "aria-label": "main icon" }),
      /* @__PURE__ */ m(q, { size: i, ownerState: n, children: [
        /* @__PURE__ */ s(K, { variant: a === "popup" || a === "modal" ? "bodyStandard" : "captionDens", size: i, skeletonWidth: 100, ownerState: n, children: T }),
        u && /* @__PURE__ */ s(
          G,
          {
            src: `${l}/${c}/frontend/components/window_base/assets/icons/${p.POINT}`,
            size: i,
            ownerState: n
          }
        ),
        u && /* @__PURE__ */ s(J, { variant: a === "popup" || a === "modal" ? "bodyStandard" : "captionDens", size: i, skeletonWidth: 100, ownerState: n, children: u })
      ] })
    ] }),
    /* @__PURE__ */ m(
      Q,
      {
        id: "icons-wrapper",
        className: A.draggableCancel,
        ownerState: n,
        children: [
          /* @__PURE__ */ s(X, { ownerState: { collapsed: S }, children: D }),
          $.length > 0 && /* @__PURE__ */ s(
            Y,
            {
              type: "menuItem",
              ownerState: n,
              icon: `${l}/${c}/frontend/components/window_base/assets/icons/${p.MORE_VERTICAL}`,
              arrowType: "no-arrow",
              iconButtonClassName: "window-actions",
              anchorOrigin: { vertical: "bottom", horizontal: "right" },
              transformOrigin: { vertical: "top", horizontal: "right" },
              paperProps: { style: { marginTop: "12px" } },
              menuActions: $
            }
          ),
          L,
          y && /* @__PURE__ */ s(
            ee,
            {
              icon: `${l}/${c}/frontend/components/window_base/assets/icons/${p.CLOSE}`,
              onClick: y,
              "aria-label": "close",
              color: "error",
              className: "close-button window-actions"
            }
          )
        ]
      }
    )
  ] });
};
export {
  ue as HeaderWindowBase
};
