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