import { getTypographyStyles as e } from "../../utils/getTypographyStyles.js";
import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
const n = "dynamic", d = {
  /**
   * root: Estilos del contenedor principal del componente.
   */
  root: ({ theme: r, ownerState: a }) => ({
    containerName: n,
    containerType: "inline-size",
    width: "100%",
    height: "auto",
    padding: 0,
    ...o(
      r,
      a?.size || "medium",
      "container",
      (i) => ({
        height: i,
        maxHeight: i,
        minHeight: i
      })
    )
  }),
  /**
   * innerContainer: Estilos del contenedor interno del componente.
   */
  innerContainer: ({ theme: r }) => ({
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-start",
    gap: r.vars.size.baseSpacings["sp1-5"],
    width: "100%",
    height: "fit-content",
    borderRadius: r.vars.size.borderRadius.r2,
    background: r.vars.palette.background.default,
    overflow: "hidden"
  }),
  /**
   * inputFilter: Estilos del contenedor del campo de entrada de filtrado.
   * Ahora se usa como header dentro del `PopoverMenuFields`, donde el icono
   * queda a la izquierda y el input "Filtrar por" se alinea a continuación.
   */
  inputFilter: ({ theme: r, ownerState: a }) => ({
    display: "flex",
    flexDirection: "row",
    paddingLeft: r.vars.size.baseSpacings.sp2,
    paddingRight: r.vars.size.baseSpacings.sp1,
    overflow: "hidden",
    width: "100%",
    alignItems: "center",
    borderRadius: r.vars.size.borderRadius["r1-5"],
    backgroundColor: r.vars.palette.default.enabledOpacity,
    ...o(
      r,
      a?.size || "medium",
      "container",
      (i) => ({
        height: i
      })
    )
  }),
  /**
   * inputFilterTriggerButton: IconButton que sustituye al input en el header
   * principal. Al hacerle clic abre el `PopoverMenuFields`. Cuando el popover
   * está abierto (`ownerState.selected`) se pinta con los mismos tokens que
   * el chip "Más" activo — fondo `info.contained.backgroundColor` y border
   * `info.semanticText` — para mantener consistencia visual.
   */
  inputFilterTriggerButton: ({ theme: r, ownerState: a }) => ({
    flexShrink: 0,
    cursor: "pointer",
    borderRadius: r.vars.size.borderRadius.r1,
    ...a?.selected && {
      backgroundColor: `${r.vars.palette.chips.info.contained.backgroundColor} !important`,
      border: `${r.vars.size.borderStroke.container} ${r.vars.palette.info.semanticText}`,
      outline: "none !important",
      "&:hover, &:focus, &:focus-visible": {
        backgroundColor: `${r.vars.palette.chips.info.contained.backgroundColor} !important`,
        border: `${r.vars.size.borderStroke.container} ${r.vars.palette.info.semanticText}`,
        outline: "none !important"
      }
    }
  }),
  /**
   * inputFilterInput: Estilos del campo de entrada de filtrado.
   */
  inputFilterInput: ({ theme: r, ownerState: a }) => ({
    width: "100%",
    background: "#ffffff00",
    ...o(
      r,
      a?.size || "medium",
      "action",
      (i) => ({
        height: i,
        minHeight: i,
        maxHeight: i
      })
    ),
    fontFamily: "inherit",
    ...e(
      r.generalSettings.isMobile,
      a?.size || "medium",
      "bodyStandard"
    ),
    color: r.vars.palette.text.secondary,
    border: 0,
    borderColor: "transparent",
    paddingLeft: r.vars.size.baseSpacings.sp1,
    paddingRight: r.vars.size.baseSpacings.sp1,
    height: "100%",
    "&::placeholder": {
      color: r.vars.palette.text.secondary
    },
    "&:focus-visible": {
      color: r.vars.palette.text.secondary,
      border: "unset",
      borderColor: r.vars.palette.primary.opacity,
      BorderRadius: r.vars.size.borderRadius["r0-5"],
      outline: "none!important"
    }
  }),
  /**
   * appliedFilters: Estilos del contenedor de los filtros aplicados.
   */
  appliedFilters: ({ theme: r, ownerState: a }) => ({
    width: "100%",
    height: "fit-content",
    display: "flex",
    alignItems: "center",
    borderLeft: "none",
    margin: "0px",
    padding: "0px",
    flex: 1,
    overflow: "hidden",
    ...o(
      r,
      a?.size || "medium",
      "container",
      (i) => ({
        height: i,
        maxHeight: i,
        minHeight: i
      })
    )
  }),
  /**
   * appliedFilterInnerContainer: Estilos del contenedor interno de los filtros aplicados.
   */
  appliedFilterInnerContainer: ({ theme: r, ownerState: a }) => ({
    padding: r.vars.size.baseSpacings["sp0-5"],
    gap: r.vars.size.baseSpacings.sp1,
    height: "fit-content",
    display: "flex",
    flexWrap: "nowrap",
    // Only take the space the visible chips need (do not grow). Shrinks
    // when content overflows to leave room for the sibling "More" chip.
    // The "More" chip then sits flush against the last visible chip with
    // any leftover space appearing AFTER it.
    flex: "0 1 auto",
    minWidth: 0,
    justifyContent: "flex-start",
    alignItems: "center",
    overflow: "hidden",
    position: "relative",
    "& .M4LChip-root": {
      borderRadius: r.vars.size.borderRadius.r1,
      ...o(
        r,
        a?.size || "medium",
        "action",
        (i) => ({
          height: i
        })
      ),
      "& .M4LIconButton-styledMUIIconButton:hover": {
        backgroundColor: `${r.vars.palette.chips.error.contained.backgroundHover} !important`,
        "& .M4LIcon-icon": {
          backgroundColor: `${r.vars.palette.chips.error.contained.backgroundColorTone} !important`
        }
      }
    }
  }),
  /**
   * emptyStateLabel: Texto mostrado dentro de `AppliedFilters` cuando no
   * hay filtros aplicados ("Sin filtros aplicados"). Usa `text.secondary`
   * para desaturar el mensaje y no competir visualmente con los chips.
   */
  emptyStateLabel: ({ theme: r }) => ({
    display: "inline-flex",
    alignItems: "center",
    color: r.vars.palette.text.secondary
  }),
  /**
   * actions: Estilos del contenedor de los botones de acción.
   */
  actions: ({ theme: r, ownerState: a }) => ({
    gridArea: "actions-filter",
    overflow: "hidden",
    display: "flex",
    flexDirection: "row",
    gap: r.vars.size.baseSpacings["sp0-5"],
    padding: r.vars.size.baseSpacings.sp1,
    height: "100%",
    alignItems: "center",
    borderTopRightRadius: r.vars.size.borderRadius.r1,
    borderBottomRightRadius: r.vars.size.borderRadius.r1,
    ...!a?.visibleRefresh && !a?.isDirty && {
      display: "none"
    }
  }),
  /**
   * actionsClearButton: Estilos del botón de acción de limpiar.
   */
  actionsClearButton: ({ theme: r }) => ({
    "&:hover": {
      backgroundColor: `${r.vars.palette.chips.error.contained.backgroundHover} !important`,
      // mask strategy icons: color via backgroundColor
      "& .M4LIcon-icon": {
        backgroundColor: `${r.vars.palette.error.semanticText} !important`
      },
      // component strategy icons (createSvgIcon): color via fill on SVG paths
      "& .MuiSvgIcon-root svg path, & .MuiSvgIcon-root path": {
        fill: `${r.vars.palette.error.semanticText} !important`
      }
    }
  }),
  /**
   * actionsSubmitButton: Estilos del botón de acción de filtrado.
   */
  actionsSubmitButton: ({ theme: r, ownerState: a }) => ({
    ...a?.isDirty ? {
      animation: "changeBgColor 0.9s ease infinite",
      "& .M4LIcon-icon": {
        background: `${r.vars.palette.primary.main} !important`
      }
    } : null,
    //Create and apply animation with change background color red and green
    "@keyframes changeBgColor": {
      "0%": {
        background: r.vars.palette.primary.hoverOpacity
      },
      "50%": {
        background: r.vars.palette.primary.activeOpacity
      },
      "100%": {
        background: r.vars.palette.primary.hoverOpacity
      }
    }
  }),
  /**
   * popoverMenu: Estilos del menú emergente.
   */
  popoverMenu: ({ theme: r }) => ({
    "& .MuiPaper-root": {
      display: "flex",
      flexDirection: "column",
      padding: r.vars.size.baseSpacings.sp3,
      gap: r.vars.size.baseSpacings.sp1,
      borderRadius: r.vars.size.borderRadius.r1,
      backgroundColor: r.vars.palette.background.default
    }
  }),
  /**
   * popoverFilter: Estilos del menú emergente de filtro.
   */
  popoverFilter: ({ theme: r }) => ({
    width: "auto",
    "& .MuiPaper-root": {
      borderRadius: `${r.vars.size.borderRadius.r3}!important`,
      padding: "0 !important",
      minWidth: "220px",
      maxWidth: "100%",
      minHeight: "auto",
      backgroundColor: r.vars.palette.background.default,
      boxShadow: r.customShadows?.z3,
      "& .M4LPopover-arrowStyle": {
        display: "none"
      },
      "& .M4LRHFormProvider-root": {
        gap: "0px",
        width: "max-content",
        minWidth: "220px",
        maxWidth: "420px",
        height: "fit-content",
        overflow: "visible"
      },
      "& .M4LWindowBase-root": {
        borderRadius: `${r.vars.size.borderRadius.r3}!important`,
        border: "unset!important",
        "& .M4LWindowBase-headerWindowComponent": {
          cursor: "unset"
        }
      }
    }
  }),
  /**
   * popoverFilterActions: Estilos del contenedor de acciones del menú emergente de filtro.
   */
  popoverFilterActions: ({ theme: r }) => ({
    paddingTop: r.vars.size.baseSpacings.sp6
  }),
  /**
   * inputSortInputSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.
   */
  inputFilterInputSkeleton: ({ theme: r, ownerState: a }) => ({
    width: "100%",
    minWidth: "80px",
    marginLeft: r.vars.size.baseSpacings.sp2,
    marginRight: r.vars.size.baseSpacings.sp2,
    ...o(
      r,
      a?.size || "medium",
      "base",
      (i) => ({
        height: i,
        minHeight: i,
        maxHeight: i
      })
    )
  }),
  /**
   * popoverFilterContainerFields: Estilos del contenedor de los campos del menú emergente de filtro.
   */
  popoverFilterContainerFields: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "column",
    gap: r.vars.size.baseSpacings.sp3
  }),
  /**
   * chipWrapper: Wrapper for each chip used for overflow measurement.
   */
  chipWrapper: ({ theme: r, ownerState: a }) => ({
    display: "inline-flex",
    flexShrink: 0,
    ...a?.isWarning && {
      "@keyframes m4lDynamicFilterWarningPulse": {
        "0%, 100%": {
          backgroundColor: r.vars.palette.chips.warning.contained.backgroundColor
        },
        "50%": {
          backgroundColor: r.vars.palette.chips.warning.contained.backgroundHover
        }
      },
      '& .MuiChip-root, & [class*="M4LChip-root"]': {
        animation: "m4lDynamicFilterWarningPulse 1.6s ease-in-out infinite"
      }
    }
  }),
  /**
   * overflowMoreChip: Styles for the "More (N)..." chip button that appears when filters overflow.
   */
  overflowMoreChip: ({ theme: r, ownerState: a }) => ({
    flexShrink: 0,
    cursor: "pointer",
    borderRadius: r.vars.size.borderRadius.r1,
    ...o(
      r,
      a?.size || "medium",
      "action",
      (i) => ({
        height: i
      })
    ),
    // While the overflow popover is open, lock the chip to the info palette's
    // background and add the container border in `info.semanticText` so the
    // chip visually stays active regardless of hover/focus transitions.
    ...a?.selected && {
      backgroundColor: `${r.vars.palette.chips.info.contained.backgroundColor} !important`,
      border: `${r.vars.size.borderStroke.container} ${r.vars.palette.info.semanticText}`,
      outline: "none !important",
      "&:hover, &:focus, &:focus-visible": {
        backgroundColor: `${r.vars.palette.chips.info.contained.backgroundColor} !important`,
        border: `${r.vars.size.borderStroke.container} ${r.vars.palette.info.semanticText}`,
        outline: "none !important"
      }
    }
  }),
  /**
   * overflowPopover: Styles for the popover that shows hidden overflow filters.
   */
  overflowPopover: ({ theme: r }) => ({
    "& .MuiPaper-root": {
      display: "flex",
      flexDirection: "column",
      padding: `${r.vars.size.baseSpacings.sp3} ${r.vars.size.baseSpacings.sp2}`,
      gap: r.vars.size.baseSpacings.sp1,
      borderRadius: r.vars.size.borderRadius.r2,
      backgroundColor: r.vars.palette.background.default,
      boxShadow: r.customShadows?.z3,
      width: "280px"
    }
  }),
  /**
   * overflowPopoverList: Styles for the list container inside the overflow popover.
   */
  overflowPopoverList: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "column",
    gap: r.vars.size.baseSpacings.sp2
  }),
  /**
   * overflowPopoverItem: Styles for each filter item inside the overflow popover.
   * Row layout: icon | text column | close button, all vertically centered.
   */
  overflowPopoverItem: ({ theme: r, ownerState: a }) => ({
    display: "flex",
    alignItems: "center",
    alignSelf: "stretch",
    gap: r.vars.size.baseSpacings.sp2,
    padding: r.vars.size.baseSpacings.sp2,
    borderBottom: `1px solid ${r.vars.palette.border.disabled}`,
    background: r.vars.palette.background.default,
    borderRadius: r.vars.size.borderRadius["r1-5"],
    cursor: "pointer",
    transition: "background-color 0.3s ease",
    "&:hover": {
      backgroundColor: `${r.vars.palette.default.hoverOpacity} !important`
    },
    ...a?.selected && {
      backgroundColor: `${r.vars.palette.default.hoverOpacity} !important`
    },
    "&:last-child": {
      borderBottom: "none"
    }
  }),
  /**
   * overflowPopoverItemHeader: Column container for label and value text.
   */
  overflowPopoverItemHeader: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "center",
    flex: 1,
    minWidth: 0,
    rowGap: r.vars.size.baseSpacings["sp0-5"],
    columnGap: r.vars.size.baseSpacings.sp1,
    // The label occupies the full first row so the value chips wrap below it.
    "& > span:first-of-type": {
      flexBasis: "100%"
    },
    "& .M4LChip-root": {
      height: "auto",
      minHeight: "auto",
      maxWidth: "100%"
    },
    "& .M4LChip-root .M4LTypography-root": {
      whiteSpace: "normal",
      wordBreak: "break-word",
      overflow: "visible",
      textOverflow: "clip"
    }
  }),
  /**
   * overflowPopoverItemLabel: Label text for the filter field name inside the overflow item.
   */
  overflowPopoverItemLabel: ({ theme: r }) => ({
    ...e(!1, "medium", "body"),
    color: r.vars.palette.text.primary,
    flex: 1,
    whiteSpace: "normal",
    wordBreak: "break-word"
  })
};
export {
  d as dynamicFilterStyles
};
