import { SWITCH_CLASSES as o } from "./constants.js";
import { getSizeStyles as p } from "../../../../utils/getSizeStyles/getSizeStyles.js";
const s = {
  /** Root container styles: flex row, centered, with gap between thumb and label. */
  root: ({ theme: a }) => ({
    display: "flex",
    alignItems: "center",
    outline: "none",
    overflow: "visible",
    boxSizing: "border-box",
    gap: a.vars.size.baseSpacings["sp2-5"],
    width: "fit-content",
    cursor: "pointer"
  }),
  /** MUI Switch element styles: track, thumb, hover/active/focus rings, and checked/disabled states. */
  muiSwitch: ({ theme: a, ownerState: e }) => {
    const r = e?.error, t = e?.size || "medium", { height: i } = p(a, t, "action");
    return {
      overflow: "visible",
      padding: 0,
      // Root = track: w = action × 1.133 (27.2/24), h = action × 0.667 (16/24)
      width: `calc(${i} * 1.133)`,
      height: `calc(${i} * 0.667)`,
      // Track — pill completa, llena el root
      "& .MuiSwitch-track": {
        width: "100%",
        height: "100%",
        borderRadius: "80px",
        backgroundColor: a.vars.palette.default.enabled,
        opacity: 1,
        boxSizing: "border-box",
        boxShadow: "inset 0px 0px 3.2px 0px rgba(0, 0, 0, 0.08)"
      },
      // SwitchBase — action×action, centrado sobre track (overflow -0.167 × action = -4px)
      "& .MuiSwitch-switchBase": {
        padding: 0,
        width: i,
        height: i,
        top: `calc(${i} * -0.167)`,
        left: `calc(${i} * -0.167)`,
        backgroundColor: "transparent",
        // Hover — ring via box-shadow en el thumb (unchecked)
        "&:hover .MuiSwitch-thumb": {
          boxShadow: `0px 0px 0px 6px ${r ? a.vars.palette.error.hoverOpacity : a.vars.palette.default.hoverOpacity}, 0px 1px 4px 0px rgba(0, 0, 0, 0.15)`
        },
        // Active — ring más pronunciado (unchecked)
        "&:active .MuiSwitch-thumb": {
          boxShadow: `0px 0px 0px 6px ${r ? a.vars.palette.error.activeOpacity : a.vars.palette.default.activeOpacity}, 0px 1px 4px 0px rgba(0, 0, 0, 0.15)`
        },
        // Focus visible — outline en el thumb
        "&.Mui-focusVisible .MuiSwitch-thumb": {
          boxShadow: `0px 0px 0px 2px ${a.vars.palette.primary.focusVisible}, 0px 1px 4px 0px rgba(0, 0, 0, 0.15)`
        },
        // Checked: translateX 0.471 × action (11.3/24)
        "&.Mui-checked": {
          transform: `translateX(calc(${i} * 0.471))`,
          // Track — (primary/error)ownerstate/palettecolor/selectedopacity
          "& + .MuiSwitch-track": {
            backgroundColor: r ? a.vars.palette.error.selectedOpacity : a.vars.palette.primary.selectedOpacity,
            opacity: 1,
            boxShadow: "inset 0px 0px 4px 0px rgba(0, 0, 0, 0.08)"
          },
          // Thumb checked — var(--primary-owner-state-palette-color-enabled, #0064FF)
          "& .MuiSwitch-thumb": {
            backgroundColor: r ? a.vars.palette.error.enabled : a.vars.palette.primary.enabled,
            boxShadow: "inset 0px 2.4px 3.2px 0px rgba(255, 255, 255, 0.16)",
            filter: "drop-shadow(0px 1.6px 3.2px rgba(0, 0, 0, 0.16))"
          },
          // Hover checked
          "&:hover .MuiSwitch-thumb": {
            boxShadow: `0px 0px 0px 6px ${r ? a.vars.palette.error.hoverOpacity : a.vars.palette.primary.hoverOpacity}, 0px 1px 4px 0px rgba(0, 0, 0, 0.15)`
          },
          // Active checked
          "&:active .MuiSwitch-thumb": {
            boxShadow: `0px 0px 0px 6px ${r ? a.vars.palette.error.activeOpacity : a.vars.palette.primary.activeOpacity}, 0px 1px 4px 0px rgba(0, 0, 0, 0.15)`
          },
          // Disabled unchecked — track: default.enabledOpacity, thumb faded
          "&.Mui-disabled + .MuiSwitch-track": {
            backgroundColor: r ? a.vars.palette.error.enabledOpacity : a.vars.palette.default.enabledOpacity,
            opacity: 1
          },
          "&.Mui-disabled .MuiSwitch-thumb": {
            opacity: 0.38
          },
          // Disabled checked — track: primary.enabledOpacity (rgba(0,100,255,0.08))
          "&.Mui-disabled.Mui-checked + .MuiSwitch-track": {
            backgroundColor: r ? a.vars.palette.error.enabledOpacity : a.vars.palette.primary.enabledOpacity,
            opacity: 1
          },
          "&.Mui-disabled.Mui-checked .MuiSwitch-thumb": {
            backgroundColor: r ? a.vars.palette.error.enabled : a.vars.palette.primary.enabled,
            opacity: 0.38
          }
        }
      },
      // Thumb — Ellipse 3: 12.8px (action × 0.533), margin 5.6px (action × 0.233)
      // unchecked: text.secondary token | checked: palette.primary.enabled (#0064FF)
      // Posición unchecked: 1.6px desde borde track | checked: ~13px desde borde izq
      "& .MuiSwitch-thumb": {
        width: `calc(${i} * 0.533)`,
        height: `calc(${i} * 0.533)`,
        margin: `calc(${i} * 0.233)`,
        backgroundColor: a.vars.palette.text.secondary,
        borderRadius: "50%",
        boxShadow: "inset 0px 2.4px 3.2px 0px rgba(255, 255, 255, 0.16)",
        filter: "drop-shadow(0px 1.6px 3.2px rgba(0, 0, 0, 0.16))"
      },
      ...e?.disabled && {
        pointerEvents: "none"
      }
    };
  },
  label: () => ({
    cursor: "inherit"
  }),
  /** Skeleton loading state styles for the switch track and optional label. */
  skeleton: ({ theme: a, ownerState: e }) => {
    const r = e?.size || "medium", { height: t } = p(a, r, "action");
    return {
      borderRadius: a.vars.size.borderRadius.r1,
      backgroundColor: a.vars.palette?.skeleton.default,
      // Label skeleton: ancho fijo aproximado al texto, alto = body typography
      "&.switchSkeletonLabel": {
        width: `calc(${t} * 2.5)`,
        height: `calc(${t} * 0.467)`,
        borderRadius: a.vars.size.borderRadius.r1
      },
      // Switch skeleton: mismas proporciones que el track real (action × 1.133 × 0.667)
      [`&.${o.skeleton}`]: {
        width: `calc(${t} * 1.133)`,
        height: `calc(${t} * 0.667)`,
        borderRadius: "80px"
      }
    };
  }
};
export {
  s as switchStyles
};
