import { getTypographyStyles as e } from "../../utils/getTypographyStyles.js";
import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
const s = "dynamic", p = {
  /**
   * Root: Estilos del contenedor principal del componente.
   */
  root: ({ theme: r, ownerState: i }) => ({
    containerName: s,
    containerType: "inline-size",
    width: "100%",
    height: "auto",
    padding: 0,
    ...o(
      r,
      i?.size || "medium",
      "container",
      (a) => ({
        height: a,
        maxHeight: a,
        minHeight: a
      })
    )
  }),
  /**
   * 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"
  }),
  /**
   * inputSort: Contenedor del input "Ordenar por" dentro del PopoverMenuFields.
   * Estilos idénticos al inputFilter del DynamicFilter:
   * fondo gris enabledOpacity, borderRadius r1-5, sin borderBottom.
   */
  inputSort: ({ theme: r, ownerState: i }) => ({
    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,
      i?.size || "medium",
      "container",
      (a) => ({
        height: a
      })
    )
  }),
  /**
   * inputSortInput: Estilos del campo de entrada de ordenamiento.
   */
  inputSortInput: ({ theme: r, ownerState: i }) => ({
    width: "100%",
    background: "#ffffff00",
    ...o(
      r,
      i?.size || "medium",
      "action",
      (a) => ({
        height: a,
        minHeight: a,
        maxHeight: a
      })
    ),
    fontFamily: "inherit",
    ...e(
      r.generalSettings.isMobile,
      i?.size || "medium",
      "bodyStandard"
    ),
    color: r.vars.palette.text.secondary,
    border: 0,
    borderColor: "transparent",
    paddingLeft: r.vars.size.baseSpacings.sp2,
    paddingRight: r.vars.size.baseSpacings.sp2,
    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"
    }
  }),
  /**
   * appliedSorts: Estilos del contenedor de los campos de ordenamiento aplicados.
   */
  appliedSorts: ({ theme: r, ownerState: i }) => ({
    width: "100%",
    height: "fit-content",
    display: "flex",
    alignItems: "center",
    // Gap sp1 (4px) entre el contenedor de chips y el chip "Más", idéntico al
    // DynamicFilter (appliedFilters). Sin esto el chip "Más" queda pegado a los chips.
    gap: r.vars.size.baseSpacings.sp1,
    borderLeft: "none",
    margin: "0px",
    padding: "0px",
    flex: 1,
    overflow: "hidden",
    ...o(
      r,
      i?.size || "medium",
      "container",
      (a) => ({
        height: a,
        maxHeight: a,
        minHeight: a
      })
    ),
    // Fuerza la misma altura en TODOS los chips del contenedor (incluido el chip "Más")
    "& .M4LChip-root": {
      ...o(r, i?.size || "medium", "action", (a) => ({
        height: a,
        minHeight: a,
        maxHeight: a
      }))
    }
  }),
  /**
   * appliedSortInnerContainer: Contenedor de los chips de sorts.
   * flex: '0 1 auto' — no crece, solo encoge. Igual que DynamicFilter.
   */
  appliedSortInnerContainer: ({ theme: r, ownerState: i }) => ({
    padding: r.vars.size.baseSpacings["sp0-5"],
    gap: r.vars.size.baseSpacings.sp1,
    height: "fit-content",
    display: "flex",
    flexWrap: "nowrap",
    flex: "0 1 auto",
    minWidth: 0,
    justifyContent: "flex-start",
    alignItems: "center",
    overflow: "hidden",
    position: "relative",
    "& .M4LChip-root": {
      borderRadius: r.vars.size.borderRadius["r1-5"],
      ...o(
        r,
        i?.size || "medium",
        "action",
        (a) => ({
          height: a
        })
      ),
      "& .M4LIconButton-styledMUIIconButton:hover": {
        backgroundColor: `${r.vars.palette.chips.error.contained.backgroundHover} !important`,
        "& .M4LIcon-icon": {
          backgroundColor: `${r.vars.palette.chips.error.contained.backgroundColorTone} !important`
        }
      }
    }
  }),
  /**
   * actions: Estilos del contenedor de los botones de acción.
   */
  actions: ({ theme: r, ownerState: i }) => ({
    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,
    flexShrink: 0,
    // minWidth garantiza que useChipsOverflow siempre mida un ancho > 0
    // incluso antes de que el layout del container-type:inline-size se resuelva.
    // Se calcula como 2 botones (action size) + gap + padding horizontal.
    ...o(r, i?.size || "medium", "action", (a) => ({
      minWidth: `calc(${a} * 2 + ${r.vars.size.baseSpacings["sp0-5"]} + ${r.vars.size.baseSpacings.sp1} * 2)`
    })),
    ...!i?.visibleRefresh && !i?.isDirty && {
      display: "none"
    }
  }),
  /**
   * actionsClearButton: Estilos del botón de acción de limpiar.
   */
  actionsClearButton: ({ theme: r }) => ({
    visibility: "visible",
    "&: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 envío de formulario.
   */
  actionsSubmitButton: ({ theme: r, ownerState: i }) => ({
    ...i?.isDirty ? {
      animation: "changeBgColor 0.9s ease infinite",
      "& .M4LIcon-icon": {
        background: `${r.vars.palette.primary.main} !important`
      },
      "& .MuiSvgIcon-root svg path, & .MuiSvgIcon-root path": {
        fill: `${r.vars.palette.chips.info.contained.color} !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
    }
  }),
  /**
   * popoverSort: Estilos del menú emergente de ordenamiento.
   */
  popoverSort: ({ theme: r }) => ({
    width: "auto",
    "& .MuiPaper-root": {
      padding: "0 !important",
      minWidth: "220px",
      maxWidth: "100%",
      minHeight: "auto",
      borderRadius: `${r.vars.size.borderRadius.r3}!important`,
      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"
        }
      }
    }
  }),
  /**
   * popoverSortContainerFields: Estilos del contenedor de campos del menú emergente de ordenamiento.
   */
  popoverSortContainerFields: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "column",
    gap: r.vars.size.baseSpacings.sp3
  }),
  /**
   * popoverSortActions: Estilos del contenedor de acciones del menú emergente de ordenamiento.
   */
  popoverSortActions: ({ theme: r }) => ({
    paddingTop: r.vars.size.baseSpacings.sp6
  }),
  /**
   * inputSortSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.
   */
  inputSortSkeleton: ({ theme: r, ownerState: i }) => ({
    width: "100%",
    minWidth: "80px",
    marginLeft: r.vars.size.baseSpacings.sp2,
    marginRight: r.vars.size.baseSpacings.sp2,
    ...o(
      r,
      i?.size || "medium",
      "base",
      (a) => ({
        height: a,
        minHeight: a,
        maxHeight: a
      })
    )
  }),
  /** chipWrapper: Wrapper de cada chip — inline-flex y flexShrink:0 son críticos para useChipsOverflow. */
  chipWrapper: () => ({
    display: "inline-flex",
    flexShrink: 0
  }),
  /**
   * inputSortTriggerButton: Botón trigger cuadrado que reemplaza el input visible.
   * Patrón idéntico al inputFilterTriggerButton del DynamicFilter.
   */
  inputSortTriggerButton: ({ theme: r, ownerState: i }) => ({
    flexShrink: 0,
    cursor: "pointer",
    borderRadius: r.vars.size.borderRadius.r1,
    ...i?.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"
      }
    }
  }),
  /**
   * emptyStateLabel: Label "Sin sorts aplicados" cuando el array de sorts está vacío.
   */
  // Igual que DynamicFilter.emptyStateLabel + cursor pointer para abrir el popover al hacer clic
  emptyStateLabel: ({ theme: r }) => ({
    display: "inline-flex",
    alignItems: "center",
    color: r.vars.palette.text.secondary,
    cursor: "pointer",
    userSelect: "none"
  }),
  /**
   * overflowMoreChip: Chip "Más (N)" que agrupa los sorts que no caben.
   */
  overflowMoreChip: ({ theme: r }) => ({
    flexShrink: 0,
    cursor: "pointer",
    // Mismo radius que los chips aplicados (r1-5, 6px) para alinear el chip "Más".
    borderRadius: r.vars.size.borderRadius["r1-5"]
  }),
  /** overflowSortPopover: Popover container for overflow sorts, identical to DynamicFilter.overflowPopover. */
  overflowSortPopover: ({ 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"
    }
  }),
  /** overflowSortList: Vertical list inside the overflow popover, identical to DynamicFilter.overflowPopoverList. */
  overflowSortList: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "column",
    gap: r.vars.size.baseSpacings.sp2
  }),
  /** overflowSortItem: Clickable item row inside the overflow popover, identical to DynamicFilter.overflowPopoverItem. */
  overflowSortItem: ({ theme: r, ownerState: i }) => ({
    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`
    },
    ...i?.selected && {
      backgroundColor: `${r.vars.palette.default.hoverOpacity} !important`
    },
    "&:last-child": {
      borderBottom: "none"
    }
  }),
  /** overflowSortItemHeader: Center section of each overflow item showing label and direction chip. */
  overflowSortItemHeader: ({ 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,
    "& > span:first-of-type": {
      flexBasis: "100%"
    }
  }),
  /** overflowSortItemLabel: Field name label text inside the overflow item. */
  overflowSortItemLabel: ({ theme: r }) => ({
    ...e(!1, "medium", "body"),
    color: r.vars.palette.text.primary,
    flex: 1,
    whiteSpace: "normal",
    wordBreak: "break-word"
  })
};
export {
  p as dynamicSortStyles
};
