import { getPropertyByString as n } from "@m4l/core";
import { getSizeStyles as l } from "../../utils/getSizeStyles/getSizeStyles.js";
const s = "container", p = {
  /**
   * Property Value Root Styles
   */
  Root: ({ theme: i, ownerState: r }) => {
    const e = (t) => ({
      maxWidth: `${t}px`,
      minWidth: `${t}px`,
      [`@container ${s} (max-width: ${t - 1}px)`]: {
        minWidth: "100px",
        maxWidth: "100%",
        width: "100%"
      }
    }), o = {
      email: e(400),
      shortName: e(90),
      mediumName: e(260),
      bigName: e(520),
      shortId: e(44),
      mediumId: e(60),
      bigId: e(200),
      shortDescription: e(796),
      mediumDescription: e(1500),
      bigDescription: {
        maxWidth: "100%",
        width: "100%",
        minWidth: "100px"
      },
      shortNumber: e(50),
      mediumNumber: e(60),
      bigNumber: e(162),
      percentNumber: e(50),
      fullWidth: {
        maxWidth: "100%",
        width: "100%",
        minWidth: "0"
      }
    }, a = r?.semanticWidth && o[r?.semanticWidth] ? o[r?.semanticWidth] : {};
    return {
      containerName: s,
      containerType: "inline-size",
      display: "flex",
      flexDirection: "row",
      justifyContent: "flex-start",
      alignItems: "center",
      gap: i.vars.size.baseSpacings.sp2,
      width: r?.semanticWidth ? "auto" : "200px",
      height: r?.valueHeight ? r?.valueHeight : "auto",
      color: i.vars.palette.text.primary,
      /* [`@container ${CONTAINER_QUERY_NAME} (min-width: 0px) and (max-width: 400px)`]: {
        flexDirection: 'column',
      }, */
      ...i.generalSettings.isMobile && {
        flexDirection: "column"
      },
      ...r?.borderStyle !== "none" && {
        paddingBottom: i.vars.size.baseSpacings.sp2
      },
      // Estilos para borderStyle
      ...r?.borderStyle === "dashed" && {
        // Para dashed, usamos un pseudo-elemento para controlar la longitud de los guiones
        position: "relative",
        overflow: "visible",
        overflowX: "hidden",
        overflowY: "visible",
        "&::after": {
          content: '""',
          position: "absolute",
          height: "1px",
          bottom: 0,
          left: 0,
          width: "100%",
          backgroundImage: `repeating-linear-gradient(
            to right,
            ${i.vars.palette.border.secondary} 10px,
            ${i.vars.palette.border.secondary} 20px,
            transparent 20px,
            transparent 32px
          )`,
          backgroundRepeat: "repeat-x",
          backgroundSize: "auto 100%",
          pointerEvents: "none"
        }
      },
      ...r?.borderStyle === "solid" && {
        borderTop: 0,
        borderLeft: 0,
        borderRight: 0,
        borderBottom: i.vars.size.borderStroke.container,
        borderColor: i.vars.palette.border.secondary,
        borderStyle: "solid"
      },
      ...r?.borderStyle === "none" && {
        border: "unset"
      },
      minHeight: i.vars.size.baseSpacings.sp5,
      ...a
    };
  },
  /**
   * Property Styles
   */
  name: ({ theme: i }) => ({
    display: "flex",
    alignItems: "center",
    fontSize: i.typography.body2.fontSize,
    color: i.vars.palette.text.primary,
    gap: i.vars.size.baseSpacings.sp1,
    overflow: "hidden",
    width: "100%"
  }),
  /**
   * Value Styles (Form and No Form Combined)
   */
  value: ({ theme: i, ownerState: r }) => ({
    width: r?.direction === "column" ? "100%" : "fit-content",
    display: "flex",
    justifyContent: "flex-start",
    alignItems: "flex-start",
    height: r?.valueHeight ? r?.valueHeight : "auto",
    whiteSpace: "nowrap",
    ...r?.isForm && {
      gap: i.vars.size.baseSpacings["sp0-5"],
      flexDirection: "column"
    }
  }),
  /**
   * Container Start Adornment Styles
   */
  containerStartAdornment: ({ theme: i, ownerState: r }) => {
    const e = r?.iconColor === "text.primary" || r?.iconColor === "text.secondary" || r?.iconColor === "text.disabled", o = e ? n(i.vars.palette, String(r?.iconColor), i.vars.palette.text.primary) : n(i.vars.palette.chips, String(r?.iconColor), i.vars.palette.chips.primary)?.contained;
    return {
      "&&&": {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        overflow: "hidden",
        borderRadius: i.vars.size.borderRadius["r1-5"],
        ...l(
          i,
          r?.size || "medium",
          "base",
          (a) => ({
            height: `calc(${a} + ${i.vars.size.baseSpacings.sp2})`,
            width: `calc(${a} + ${i.vars.size.baseSpacings.sp2})`,
            minHeight: `calc(${a} + ${i.vars.size.baseSpacings.sp2})`,
            minWidth: `calc(${a} + ${i.vars.size.baseSpacings.sp2})`
          })
        ),
        // variente de icono en modalidad outlined o containedOpacity
        ...(r?.iconVariant === "containedOpacity" || r?.iconVariant === "outlined") && {
          ...r?.iconVariant === "outlined" && {
            border: i.vars.size.borderStroke.container,
            borderColor: e ? i.vars.palette.border.disabled : o?.backgroundColor,
            backgroundColor: "transparent"
          },
          ...r?.iconVariant === "containedOpacity" && {
            backgroundColor: e ? i.vars.palette.border.disabled : o?.backgroundColor
          },
          // icon mask strategy
          "& .M4LIcon-icon": {
            backgroundColor: e ? o : o?.color
          },
          // 🧪 Experimental m4l/icons strategy
          "& svg, & path, & rect, & circle, & ellipse, & polygon, & polyline, & line, & g, & text, & tspan, & use": {
            fill: e ? o : o?.color
          }
        },
        ...r?.iconVariant === "text" && {
          backgroundColor: "transparent",
          // icon mask strategy
          "& .M4LIcon-icon": {
            backgroundColor: e ? o : o?.color
          },
          // 🧪 Experimental m4l/icons strategy
          "& svg, & path, & rect, & circle, & ellipse, & polygon, & polyline, & line, & g, & text, & tspan, & use": {
            fill: e ? o : o?.color
          }
        }
      }
    };
  },
  /**
   * Container Property And Value Styles
   */
  containerPropertyAndValue: ({ theme: i, ownerState: r }) => ({
    display: "flex",
    justifyContent: "space-between",
    overflow: "hidden",
    flexDirection: r?.direction || "row",
    borderColor: i.vars.palette.border.secondary,
    width: "100%",
    height: r?.valueHeight ? r?.valueHeight : "auto",
    "&&& .M4LLabel-root": {
      width: "auto"
    },
    ...r?.direction === "column" ? {
      gap: i.vars.size.baseSpacings["sp0-5"],
      alignItems: "flex-start"
    } : {
      gap: i.vars.size.baseSpacings.sp4,
      alignItems: "center"
    }
  }),
  /**
   * Typography Value Styles
   */
  typographyValue: ({ ownerState: i }) => ({
    wordBreak: "break-word",
    whiteSpace: i?.direction === "column" ? "normal" : "nowrap"
  })
};
export {
  p as propertyValueStyles
};
