import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
import { getColors as c } from "./helpers.js";
const h = {
  /**
   * Styles for the root element of the chip.
   */
  root: ({ theme: s, ownerState: i }) => {
    const { color: a, finalPalette: n } = c(s, i), t = s.vars.palette.chips.default.contained.backgroundColor, p = i?.hasDescription ? t : i?.opacity ? n.backgroundColor : n.backgroundColorTone, d = i?.hasDescription ? t : i?.opacity ? n.backgroundHover : n.backgroundHoverTone, e = i?.hasDescription ? t : i?.opacity ? n.backgroundActive : n.backgroundActiveTone;
    return {
      display: "flex",
      alignItems: "center",
      padding: i?.hasDescription ? s.vars.size.baseSpacings.sp2 : s.vars.size.baseSpacings.sp1,
      borderRadius: s.vars.size.borderRadius["r1-5"],
      gap: i?.hasDescription ? s.vars.size.baseSpacings.sp2 : s.vars.size.baseSpacings["sp0-5"],
      width: "max-content",
      ...i?.ellipsis && {
        maxWidth: "100%"
      },
      cursor: "pointer",
      color: a,
      backgroundColor: i?.variant !== "outlined" ? p : "transparent",
      ...o(
        s,
        i?.size || "medium",
        "base",
        (r) => ({
          height: i?.hasDescription ? "fit-content" : r,
          minHeight: r
        })
      ),
      //TODO: OJO no OLVIDAR interactive ************ JUAN
      ...i?.interactive && {
        "&:hover": {
          backgroundColor: d
        },
        "&:active": {
          backgroundColor: e
        },
        "&:focus-visible": {
          boxShadow: "none",
          outline: `${s.vars.size.borderStroke.container} ${s.vars.palette.border.main}`,
          backgroundColor: e
        }
      },
      ...i?.variant === "outlined" && {
        border: `${s.vars.size.borderStroke.container}`,
        borderColor: p
      },
      "&&& .M4LChip-closeIcon": {
        ...o(
          s,
          i?.size || "medium",
          "base",
          (r) => ({
            height: r,
            width: r
          })
        )
      },
      variants: []
    };
  },
  /**
   * Styles for the text chip element.
   */
  textChip: ({ theme: s, ownerState: i }) => ({
    whiteSpace: "nowrap",
    paddingLeft: i?.hasDescription ? 0 : s.vars.size.baseSpacings.sp1,
    paddingRight: i?.hasDescription ? 0 : s.vars.size.baseSpacings.sp1,
    ...i?.hasDescription && {
      color: s.vars.palette.text.primary
    }
  }),
  /**
   * Styles for the chip description text.
   */
  descriptionChip: ({ theme: s, ownerState: i }) => ({
    whiteSpace: "nowrap",
    color: s.vars.palette.text.secondary,
    paddingLeft: i?.hasDescription ? 0 : s.vars.size.baseSpacings.sp1,
    paddingRight: i?.hasDescription ? 0 : s.vars.size.baseSpacings.sp1
  }),
  /**
   * Styles for label + description wrapper.
   */
  textWrapper: ({ theme: s }) => ({
    display: "flex",
    flexDirection: "column",
    gap: s.vars.size.baseSpacings["sp0-5"],
    minWidth: 0,
    alignItems: "flex-start"
  }),
  /**
   * Styles for the chip icon element.
   */
  chipIcon: ({ theme: s, ownerState: i }) => {
    const { color: a } = c(s, i);
    return {
      "& .M4LIcon-icon": {
        backgroundColor: i?.hasDescription ? s.vars.palette.text.primary : `${a} !important`
      }
    };
  },
  /**
   * Styles for image-only start adornment wrapper.
   */
  startAdornmentImageWrapper: ({ theme: s, ownerState: i }) => ({
    marginRight: s.vars.size.baseSpacings["sp0-5"],
    display: "inline-flex",
    alignItems: "center",
    "& .M4LImage-root": {
      width: i?.hasDescription ? "fit-content" : "16px!important",
      height: i?.hasDescription ? "fit-content" : "16px!important"
    },
    ...o(
      s,
      i?.size || "medium",
      "container",
      (a) => ({
        maxWidth: a,
        maxHeight: a
      })
    ),
    ...o(
      s,
      i?.size || "medium",
      "base",
      (a) => ({
        minWidth: a,
        minHeight: a,
        height: "fit-content",
        width: "fit-content"
      })
    )
  }),
  /**
   * Styles for image-only end adornment wrapper.
   */
  endAdornmentImageWrapper: ({ theme: s, ownerState: i }) => ({
    marginLeft: s.vars.size.baseSpacings["sp0-5"],
    display: "inline-flex",
    alignItems: "center",
    "& .M4LImage-root": {
      width: i?.hasDescription ? "fit-content" : "16px!important",
      height: i?.hasDescription ? "fit-content" : "16px!important"
    },
    ...o(
      s,
      i?.size || "medium",
      "container",
      (a) => ({
        maxWidth: a,
        maxHeight: a
      })
    ),
    ...o(
      s,
      i?.size || "medium",
      "base",
      (a) => ({
        minWidth: a,
        minHeight: a,
        height: "fit-content",
        width: "fit-content"
      })
    )
  }),
  /**
   * Styles for the icon button inside the chip element.
   */
  iconButton: ({ theme: s, ownerState: i }) => {
    const { color: a } = c(s, i);
    return {
      "& .M4LIcon-icon": {
        backgroundColor: `${a} !important`
      },
      ...o(
        s,
        i?.size || "medium",
        "base",
        (n) => ({
          height: n,
          width: n,
          minHeight: n
        })
      )
    };
  },
  /**
   * Styles for the skeleton chip element.
   */
  skeletonChip: ({ theme: s, ownerState: i }) => ({
    width: "100%",
    background: s.vars.palette.skeleton.default,
    ...o(
      s,
      i?.size || "medium",
      "base",
      (a) => ({
        height: `${a}!important`,
        minHeight: `${a}!important`
      })
    )
  })
};
export {
  h as chipStyles
};
