import { OPTION_DIMENSION as d, DEFAULT_MAX_COLUMNS as b, GRID_GAP as i, DEFAULT_MAX_ROWS as S, SCROLLBAR_TRACK_SIZE as f, TRIGGER_DIMENSION as w, IMAGE_SELECTOR_CLASSES as s } from "./constants.js";
const R = /^(-?\d+(?:\.\d+)?)px$/;
function u(o) {
  return o?.presentationType === "grid" && o.error;
}
function h(o, e) {
  const r = R.exec(e.trim());
  return r ? `${o + Number.parseFloat(r[1]) * 2}px` : `calc(${o}px + (${e} * 2))`;
}
const $ = {
  /**
   * Base styles for the root element of the ImageSelector component.
   */
  root: (o) => {
    const { ownerState: e } = o;
    return {
      display: e?.presentationType === "grid" ? "flex" : "inline-flex",
      flexDirection: "column",
      position: "relative",
      width: e?.presentationType === "grid" ? "100%" : "fit-content",
      maxWidth: "100%"
    };
  },
  /**
   * Interactive trigger styles.
   */
  trigger: (o) => {
    const { theme: e, ownerState: r = {} } = o, t = r.imageSize ?? w;
    return {
      width: `${t}px`,
      height: `${t}px`,
      aspectRatio: "1 / 1",
      borderRadius: e.vars.size.borderRadius.r2,
      border: e.vars.size.borderStroke.container,
      borderColor: r.error ? e.vars.palette.error.main : "transparent",
      backgroundColor: e.vars.palette.background.default,
      overflow: "hidden",
      padding: 0,
      transition: "border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease",
      [`& .${s.overlay}`]: {
        opacity: 0
      },
      [`&:hover .${s.previewImage}`]: {
        filter: r.disabled || r.isOpen ? "none" : "blur(1px)"
      },
      [`&:hover .${s.overlay}`]: {
        opacity: r.disabled || r.isOpen ? 0 : 1
      },
      [`&:active .${s.previewImage}`]: {
        filter: r.disabled || r.isOpen ? "none" : "blur(1px)"
      },
      [`&:active .${s.overlay}`]: {
        opacity: r.disabled || r.isOpen ? 0 : 1
      },
      "&:focus-visible": {
        outline: "none",
        borderColor: e.vars.palette.primary.focus,
        boxShadow: `0 0 0 1px ${e.vars.palette.primary.focus}`
      },
      "&.Mui-disabled": {
        opacity: 0.64,
        cursor: "not-allowed"
      }
    };
  },
  /**
   * Preview frame styles.
   */
  previewFrame: (o) => {
    const { theme: e } = o;
    return {
      position: "relative",
      width: "100%",
      height: "100%",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      backgroundColor: e.vars.palette.background.default
    };
  },
  /**
   * Preview image styles.
   */
  previewImage: (o) => {
    const { theme: e, ownerState: r } = o;
    return {
      width: "100%",
      height: "100%",
      objectFit: "contain",
      transition: "filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease",
      opacity: r?.isPlaceholder ? 0.82 : 1,
      transform: r?.disabled ? "scale(0.98)" : "scale(1)",
      borderRadius: e.vars.size.borderRadius.r2
    };
  },
  /**
   * Overlay container styles.
   */
  overlay: (o) => {
    const { theme: e } = o;
    return {
      position: "absolute",
      inset: 0,
      overflow: "hidden",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      opacity: 0,
      pointerEvents: "none",
      borderRadius: e.vars.size.borderRadius.r2,
      "&::before": {
        content: '""',
        position: "absolute",
        inset: 0,
        backgroundColor: e.vars.palette.background.surface,
        opacity: 0.5
      },
      transition: "opacity 0.2s ease"
    };
  },
  /**
   * Refresh icon styles rendered above the blur layer.
   */
  overlayIcon: (o) => {
    const { theme: e } = o;
    return {
      position: "relative",
      zIndex: 1,
      fontSize: 18,
      color: e.vars.palette.primary.contrastText
    };
  },
  popover: {},
  /**
   * Options grid layout styles.
   */
  optionsGrid: (o) => {
    const { theme: e, ownerState: r } = o, t = r?.imageSize ?? d, a = r?.maxColumns ?? b, l = r?.maxRows ?? S, p = a > 0, g = l > 0, n = r?.presentationType === "grid" ? e.vars.size.baseSpacings.sp1 : void 0, x = r?.hasVerticalScroll ? f : 0, m = a * t + (a - 1) * i + x, v = l * t + (l - 1) * i, y = p ? n ? h(m, n) : `${m}px` : void 0, c = g ? n ? h(v, n) : `${v}px` : void 0;
    return {
      boxSizing: r?.presentationType === "grid" ? "border-box" : void 0,
      ...p ? {
        display: "grid",
        gridTemplateColumns: `repeat(${a}, ${t}px)`,
        width: y
      } : {
        display: "flex",
        flexWrap: "wrap",
        width: "100%"
      },
      gap: `${i}px`,
      alignContent: "flex-start",
      minWidth: `${t}px`,
      maxWidth: "100%",
      padding: r?.presentationType === "grid" ? e.vars.size.baseSpacings.sp1 : void 0,
      borderRadius: e.vars.size.borderRadius.r2,
      boxShadow: u(r) ? `0 0 0 1px ${e.vars.palette.error.main}` : "none",
      ...r?.hasVerticalScroll && {
        scrollbarGutter: "stable"
      },
      overflowX: p ? "auto" : "hidden",
      overflowY: c ? "auto" : "visible",
      ...c && {
        maxHeight: c
      }
    };
  },
  /**
   * Selectable option tile styles.
   */
  option: (o) => {
    const { theme: e, ownerState: r } = o, t = r?.imageSize ?? d;
    return {
      width: `${t}px`,
      height: `${t}px`,
      aspectRatio: "1 / 1",
      padding: r?.size === "small" ? e.vars.size.baseSpacings["sp0-5"] : e.vars.size.baseSpacings.sp1,
      borderRadius: e.vars.size.borderRadius.r2,
      border: e.vars.size.borderStroke.container,
      borderColor: r?.selected ? e.vars.palette.primary.focus : "transparent",
      backgroundColor: r?.selected ? e.vars.palette.primary.opacity : e.vars.palette.background.default,
      transition: "border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease",
      "&:hover": {
        borderColor: r?.selected ? e.vars.palette.primary.focus : e.vars.palette.border.secondary,
        backgroundColor: e.vars.palette.background.base
      },
      "&:focus-visible": {
        outline: "none",
        borderColor: e.vars.palette.primary.focus
      },
      "&.Mui-disabled": {
        opacity: 0.64
      }
    };
  },
  /**
   * Option image sizing styles.
   */
  optionImage: () => ({
    width: "100%",
    height: "100%",
    objectFit: "contain"
  }),
  /**
   * Loading state container styles.
   */
  loadingState: (o) => {
    const { theme: e, ownerState: r } = o, t = r?.imageSize ?? d, a = r?.maxColumns ?? b;
    return {
      width: `${a * t + (a - 1) * i}px`,
      maxWidth: "100%",
      minHeight: `${t * 1.45}px`,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      borderRadius: e.vars.size.borderRadius.r2,
      boxShadow: u(r) ? `0 0 0 1px ${e.vars.palette.error.main}` : "none"
    };
  },
  /**
   * Empty state message layout styles.
   */
  emptyState: (o) => {
    const { theme: e, ownerState: r } = o, t = r?.imageSize ?? d, a = r?.maxColumns ?? b;
    return {
      boxSizing: "border-box",
      width: `${a * t + (a - 1) * i}px`,
      maxWidth: "100%",
      minHeight: `${t * 1.45}px`,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      borderRadius: e.vars.size.borderRadius.r2,
      boxShadow: u(r) ? `0 0 0 1px ${e.vars.palette.error.main}` : "none",
      textAlign: "center",
      whiteSpace: "normal",
      overflowWrap: "anywhere",
      wordBreak: "break-word",
      color: e.vars.palette.text.secondary,
      padding: e.vars.size.baseSpacings.sp3
    };
  }
};
export {
  $ as imageSelectorStyles
};
