import { getContrastTextColor as r } from "@m4l/graphics";
import { getSizeStyles as s } from "../../utils/getSizeStyles/getSizeStyles.js";
const n = {
  /**
   * Root: Estilos del contenedor principal del componente.
   */
  root: ({ theme: e, ownerState: a }) => ({
    width: "100%",
    // height: '100%',
    flexGrow: 1,
    overflow: "hidden",
    display: "flex",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings.sp2,
    ...a?.disabled && {
      opacity: 0.6,
      pointerEvents: "none"
    }
  }),
  /**
   * searchContainer: Estilos del contenedor de búsqueda.
   */
  searchContainer: ({ theme: e }) => ({
    width: "100%",
    padding: e.vars.size.baseSpacings.sp1
  }),
  /**
   * searchInput: Estilos del input de búsqueda.
   */
  searchInput: ({ theme: e, ownerState: a }) => ({
    width: "100%",
    ...s(e, a?.size || "medium", "container", (i) => ({
      height: i,
      minHeight: i
    }))
  }),
  /**
   * selectAllContainer: Estilos del contenedor de "Seleccionar todo".
   */
  selectAllContainer: ({ theme: e }) => ({
    display: "flex",
    alignItems: "center",
    padding: e.vars.size.baseSpacings.sp1,
    paddingLeft: e.vars.size.baseSpacings.sp2,
    borderBottom: `1px solid ${e.vars.palette.border.secondary}`
  }),
  /**
   * selectAllCheckbox: Estilos del checkbox de "Seleccionar todo".
   */
  selectAllCheckbox: ({ theme: e }) => ({
    "&&& .MuiTypography-root": {
      color: e.vars.palette.text.secondary
    }
  }),
  /**
   * listContainer: Estilos del contenedor de la lista.
   */
  listContainer: ({ theme: e, ownerState: a }) => ({
    flex: 1,
    overflow: "hidden",
    display: "flex",
    flexDirection: "column",
    flexGrow: 1,
    // border: `1px solid ${theme.vars.palette.border.secondary}`,
    // borderRadius: theme.vars.size.borderRadius.r2,
    backgroundColor: e.vars.palette.background.default,
    ...a?.maxHeight && {
      maxHeight: typeof a.maxHeight == "number" ? `${a.maxHeight}px` : a.maxHeight
    }
  }),
  /**
   * virtualizedList: Estilos de la lista virtualizada.
   */
  virtualizedList: () => ({
    width: "100%",
    height: "100%"
  }),
  /**
   * itemWrapper: Estilos del contenedor de cada item.
   */
  itemWrapper: ({ theme: e, ownerState: a }) => ({
    display: "flex",
    alignItems: "center",
    height: "100%",
    backgroundColor: a?.selected ? e.vars.palette.primary.opacity : "transparent",
    // borderBottom: `1px solid ${theme.vars.palette.border.secondary}`,
    gap: e.vars.size.baseSpacings["sp2-5"],
    padding: e.vars.size.baseSpacings["sp1-5"],
    paddingLeft: e.vars.size.baseSpacings.sp2,
    paddingRight: e.vars.size.baseSpacings["sp2-5"],
    cursor: "pointer",
    transition: "background-color 0.1s",
    "&:hover": {
      backgroundColor: e.vars.palette.action.hover
    }
  }),
  /**
   * itemCheckbox: Estilos del checkbox del item.
   */
  itemCheckbox: ({ theme: e, ownerState: a }) => ({
    flexShrink: 0,
    ...s(e, a?.size || "medium", "action", (i) => ({
      width: i,
      height: i
    }))
  }),
  /**
   * itemLabel: Estilos del label del item.
   */
  itemLabel: () => ({}),
  /**
   * itemDescription: Estilos de la descripción del item.
   */
  itemDescription: () => ({}),
  /**
   * itemContentWrapper: Estilos del contenedor de contenido del item.
   */
  itemContentWrapper: ({ theme: e }) => ({
    flex: 1,
    display: "flex",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings["sp0-5"]
  }),
  /**
   * itemIcon: Estilos del icono del item.
   */
  itemIcon: ({ theme: e }) => ({
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
    ...s(e, "medium", "action", (a) => ({
      width: a,
      height: a
    }))
  }),
  /**
   * groupWrapper: Estilos del contenedor del grupo.
   */
  groupWrapper: ({ theme: e, ownerState: a }) => ({
    display: "flex",
    flexDirection: "column",
    backgroundColor: a?.selected ? e.vars.palette.primary.opacity : "transparent",
    borderBottom: `1px solid ${e.vars.palette.border.secondary}`,
    "&:last-child": {
      borderBottom: "none"
    }
  }),
  /**
   * groupHeader: Estilos del header del grupo.
   */
  groupHeader: ({ theme: e }) => ({
    display: "flex",
    alignItems: "center",
    height: "100%",
    gap: e.vars.size.baseSpacings.sp1,
    padding: e.vars.size.baseSpacings["sp1-5"],
    paddingLeft: e.vars.size.baseSpacings.sp2,
    // backgroundColor: theme.vars.palette.background.paper,
    cursor: "pointer"
  }),
  /**
   * groupCheckbox: Estilos del checkbox del grupo.
   */
  groupCheckbox: () => ({}),
  /**
   * groupLabelTagWrapper: Estilos del contenedor del label del grupo.
   */
  groupLabelCountWrapper: ({ theme: e }) => ({
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    gap: e.vars.size.baseSpacings.sp1
  }),
  /**
   * groupLabel: Estilos del label del grupo.
   */
  groupLabel: ({ theme: e }) => ({
    flex: 1,
    // fontWeight: 600,
    color: e.vars.palette.text.primary
  }),
  /**
   * chipCount: Estilos del contador del grupo.
   */
  chipCount: ({ theme: e, ownerState: a }) => ({
    "&&& ": {
      borderRadius: e.vars.size.borderRadius["r1-5"],
      paddingLeft: e.vars.size.baseSpacings.sp1,
      paddingRight: e.vars.size.baseSpacings.sp1,
      backgroundColor: a?.color ?? e.vars.palette.background.surface,
      color: a?.color ? r(a?.color) : e.vars.palette.text.secondary
    }
  }),
  /**
   * groupIcon: Estilos del icono del grupo.
   */
  groupIcon: ({ theme: e }) => ({
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
    ...s(e, "medium", "action", (a) => ({
      width: a,
      height: a
    }))
  }),
  /**
   * groupToggleButton: Estilos del botón para expandir/colapsar grupo.
   */
  groupToggleButton: ({ theme: e, ownerState: a }) => ({
    flexShrink: 0,
    ...s(e, a?.size || "medium", "action", (i) => ({
      width: i,
      height: i
    }))
  }),
  /**
   * groupItems: Estilos del contenedor de items del grupo.
   */
  groupItems: () => ({
    display: "flex",
    flexDirection: "column",
    overflow: "hidden"
  }),
  /**
   * emptyMessage: Estilos del mensaje cuando no hay items.
   */
  emptyMessageWrapper: () => ({
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center"
  }),
  /**
   * loadingContainer: Estilos del contenedor de carga.
   */
  loadingContainer: ({ theme: e }) => ({
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    padding: e.vars.size.baseSpacings.sp3
  })
};
export {
  n as checkableListStyles
};
