import { jsx as e, jsxs as b, Fragment as me } from "@emotion/react/jsx-runtime";
import pe from "clsx";
import { forwardRef as Se } from "react";
import { Icon as ge } from "@m4l/base";
import { useModuleDictionary as he } from "@m4l/core";
import { getPropDataTestId as v } from "../../test/getNameDataTestId.js";
import { DEFAULT_PRESENTATION_TYPE as ue, IMAGE_SELECTOR_CLASSES as t, IMAGE_SELECTOR_KEY_COMPONENT as E } from "./constants.js";
import { DICTIONARY as fe } from "./dictionary.js";
import { useImageSelector as we } from "./hooks/useImageSelector.js";
import { LoadingStateStyled as Oe, CircularProgressStyled as Ie, OptionsGridStyled as ye, OptionButtonStyled as be, OptionImageStyled as ve, EmptyStateStyled as Ee, RootStyled as Ce, TriggerStyled as Te, PreviewFrameStyled as Le, PreviewImageStyled as Ne, OverlayStyled as Re, PopoverStyled as Ae } from "./slots/ImageSelectorSlots.js";
import { ImageSelectorSlots as C } from "./slots/ImageSelectorEnum.js";
function Fe(c, T) {
  const {
    options: L,
    value: N,
    onChange: R,
    endpoint: A,
    refetchOnOpen: F = !1,
    getOptionLabel: m,
    getOptionImage: p,
    isOptionEqualToValue: P,
    presentationType: S = ue,
    imageSize: g,
    maxColumns: _,
    maxRows: x,
    size: l = "medium",
    disabled: r = !1,
    error: h = !1,
    className: D,
    dataTestId: B,
    id: K,
    name: M,
    timeout: z,
    parms: G,
    resultField: Y,
    isExternalUrl: $,
    isRemote: j,
    responseToCamelCase: k
  } = c, H = c.onBlur, { getLabel: U } = he(), {
    getOptionId: V,
    gridOwnerState: i,
    handleBlur: q,
    handleFocus: W,
    handleKeyDown: J,
    handleOptionFocus: Q,
    handleOptionKeyDown: X,
    handleOptionRef: Z,
    handlePopoverClose: ee,
    handleSelect: te,
    handleToggle: oe,
    handleTriggerRef: re,
    isOptionSelected: ae,
    loading: ne,
    open: u,
    options: f,
    optionsListId: w,
    overlayIconSrc: le,
    previewLabel: O,
    previewOwnerState: ie,
    previewSource: se,
    rootOwnerState: a,
    triggerElement: de
  } = we({
    blurHandler: H,
    disabled: r,
    endpoint: A,
    error: h,
    forwardedRef: T,
    getOptionImage: p,
    getOptionLabel: m,
    isExternalUrl: $,
    isOptionEqualToValue: P,
    isRemote: j,
    imageSize: g,
    maxColumns: _,
    maxRows: x,
    onChange: R,
    options: L,
    presentationType: S,
    parms: G,
    refetchOnOpen: F,
    responseToCamelCase: k,
    resultField: Y,
    size: l,
    timeout: z,
    value: N
  }), I = ne ? /* @__PURE__ */ e(Oe, { ownerState: i, children: /* @__PURE__ */ e(Ie, { size: l }) }) : f.length > 0 ? /* @__PURE__ */ e(
    ye,
    {
      id: w,
      role: "listbox",
      "aria-label": "Image options",
      ownerState: i,
      children: f.map((n, o) => {
        const y = ae(n), s = m(n), ce = {
          disabled: r,
          imageSize: g,
          selected: y,
          size: l
        };
        return /* @__PURE__ */ e(
          be,
          {
            id: V(o),
            ref: (d) => Z(o, d),
            role: "option",
            "aria-selected": y,
            "aria-label": s,
            ownerState: ce,
            disabled: r,
            onFocus: () => Q(o),
            onKeyDown: (d) => X(o, d),
            onClick: () => te(n),
            children: /* @__PURE__ */ e(
              ve,
              {
                className: t.optionImage,
                src: p(n),
                alt: s,
                width: "100%",
                height: "100%",
                enableIntersectionObserver: !1
              }
            )
          },
          `${s}-${o}`
        );
      })
    }
  ) : /* @__PURE__ */ e(
    Ee,
    {
      ownerState: i,
      variant: "bodyStandard",
      className: t.emptyState,
      ...v(E, C.emptyState),
      children: U(fe.LABEL_NO_IMAGES_AVAILABLE)
    }
  );
  return /* @__PURE__ */ e(
    Ce,
    {
      ownerState: a,
      className: pe(D, t.root),
      ...v(E, C.root, B),
      children: S === "standard" ? /* @__PURE__ */ b(me, { children: [
        /* @__PURE__ */ e(
          Te,
          {
            ref: re,
            type: "button",
            id: K,
            name: M,
            ownerState: a,
            className: t.trigger,
            disabled: r,
            "aria-haspopup": "listbox",
            "aria-expanded": u,
            "aria-controls": w,
            "aria-invalid": h || void 0,
            "aria-label": `Image selector: ${O}`,
            onClick: oe,
            onFocus: W,
            onBlur: q,
            onKeyDown: J,
            disableRipple: !0,
            children: /* @__PURE__ */ b(
              Le,
              {
                ownerState: a,
                className: t.previewFrame,
                children: [
                  /* @__PURE__ */ e(
                    Ne,
                    {
                      ownerState: ie,
                      className: t.previewImage,
                      src: se,
                      alt: O,
                      width: "100%",
                      height: "100%",
                      enableIntersectionObserver: !1
                    }
                  ),
                  /* @__PURE__ */ e(
                    Re,
                    {
                      ownerState: a,
                      className: t.overlay,
                      "aria-hidden": !0,
                      children: /* @__PURE__ */ e(ge, { src: le })
                    }
                  )
                ]
              }
            )
          }
        ),
        /* @__PURE__ */ e(
          Ae,
          {
            open: u,
            anchorEl: de,
            onClose: ee,
            disableRestoreFocus: !0,
            disableEnforceFocus: !0,
            disableAutoFocus: !0,
            anchorOrigin: { vertical: "bottom", horizontal: "left" },
            transformOrigin: { vertical: "top", horizontal: "left" },
            slotProps: {
              paper: {
                "aria-label": "Image selector options paper",
                sx: {
                  p: 2,
                  overflow: "hidden",
                  maxWidth: "calc(100vw - 32px)"
                }
              }
            },
            children: I
          }
        )
      ] }) : I
    }
  );
}
const je = Se(Fe);
export {
  je as ImageSelector
};
