import { c as _c } from "react/compiler-runtime";
import * as stylex from "@stylexjs/stylex";
import { memo } from "react";
import { Link } from "react-router";
import { controlColor } from "./theme.stylex";
import { color, font, fontSize, radius, size, timingFunction, transition } from "./tokens.stylex";
import { a11y, interaction, reset } from "./mixins";
import useRippleEffect from "./useRippleEffect";
const styles = stylex.create({
  button: {
    position: "relative",
    // needed for ripple effect + badge

    fontFamily: font.main,
    fontSize: fontSize.body,
    textAlign: "center",
    borderStyle: "none",
    cursor: {
      default: "pointer",
      ":disabled": "not-allowed"
    },
    display: "flex",
    gap: size.rem3,
    justifyContent: "center",
    alignItems: "center",
    transition: `${transition.a11yOutline}, ${transition.themeBackground}, ${transition.themeColor}`,
    // used for badge
    "::after": {
      opacity: 0,
      transition: `opacity ${timingFunction.fast} ease-out`
    }
  },
  // Neuer Stil für lowercase Text
  lowercase: {
    textTransform: "lowercase"
  },
  // Stile für verschiedene Schriftgewichte
  fontWeightNormal: {
    fontWeight: "normal"
  },
  fontWeightBold: {
    fontWeight: "bold"
  },
  fontWeightLight: {
    fontWeight: 300
  },
  fontWeightMedium: {
    fontWeight: 500
  },
  inline: {
    display: "inline-flex"
  },
  icon: {
    fontSize: "120%",
    // TODO: ASK-UX proportional icon size?
    display: "flex"
  },
  hasBadge: {
    "::after": {
      position: "absolute",
      content: "''",
      aspectRatio: "1/1",
      opacity: 1,
      // not using ds-unit because the border could not be made with that
      borderWidth: "3px",
      borderStyle: "solid",
      borderColor: color.white900,
      backgroundColor: controlColor.buttonPrimaryBackground,
      borderRadius: radius.circle,
      top: size.n_px2,
      right: size.n_px2,
      width: size.px4,
      height: size.px4
    }
  },
  noPadding: {
    padding: 0
  }
});
const buttonSizes = stylex.create({
  tiny: {
    gap: size.rem1,
    padding: `${size.rem1} ${size.rem2}`,
    fontSize: fontSize.tiny
  },
  small: {
    padding: `${size.rem2} ${size.rem4}`,
    fontSize: fontSize.sub
  },
  medium: {
    padding: `${size.rem3} ${size.rem6}`,
    fontSize: fontSize.body
  },
  large: {
    padding: `${size.rem4} ${size.rem8}`,
    fontSize: fontSize.h4
  },
  huge: {
    flexDirection: "column",
    gap: size.rem2,
    padding: `${size.rem4} ${size.rem10}`,
    fontSize: fontSize.h4
  }
});
const CAN_HOVER = "@media (hover: hover)";
const buttonVariants = stylex.create({
  primary: {
    background: {
      default: controlColor.buttonPrimaryBackground,
      [CAN_HOVER]: {
        ":hover": controlColor.buttonPrimaryHoverBackground
      },
      ":active": controlColor.buttonPrimaryActiveBackground,
      ":disabled": controlColor.buttonPrimaryDisabledBackground
    },
    color: {
      default: controlColor.buttonPrimaryColor,
      [CAN_HOVER]: {
        ":hover": controlColor.buttonPrimaryHoverColor
      },
      ":active": controlColor.buttonPrimaryActiveColor,
      ":disabled": controlColor.buttonPrimaryDisabledColor
    }
  },
  secondary: {
    background: {
      default: controlColor.buttonPrimaryColor,
      [CAN_HOVER]: {
        ":hover": controlColor.buttonPrimaryBackground
      },
      ":active": controlColor.buttonPrimaryActiveBackground,
      ":disabled": controlColor.buttonPrimaryDisabledBackground
    },
    color: {
      default: controlColor.buttonPrimaryBackground,
      [CAN_HOVER]: {
        ":hover": controlColor.buttonPrimaryColor
      },
      ":active": controlColor.buttonPrimaryActiveColor,
      ":disabled": controlColor.buttonPrimaryDisabledColor
    }
  },
  subscription: {
    background: {
      default: color.mustard150,
      [CAN_HOVER]: {
        ":hover": controlColor.buttonPrimaryHoverBackground
      },
      ":active": controlColor.buttonPrimaryActiveBackground,
      ":disabled": controlColor.buttonPrimaryDisabledBackground
    },
    color: {
      default: controlColor.buttonPrimaryColor,
      [CAN_HOVER]: {
        ":hover": controlColor.buttonPrimaryHoverColor
      },
      ":active": controlColor.buttonPrimaryActiveColor,
      ":disabled": controlColor.buttonPrimaryDisabledColor
    }
  },
  tertiary: {
    background: {
      default: controlColor.buttonTertiaryBackground,
      [CAN_HOVER]: {
        ":hover": controlColor.buttonTertiaryHoverBackground
      },
      // TODO: ASK-UX Active style?
      ":active": controlColor.buttonTertiaryActiveBackground,
      ":disabled": controlColor.buttonTertiaryDisabledBackground
    },
    color: {
      default: controlColor.buttonTertiaryColor,
      [CAN_HOVER]: {
        ":hover": controlColor.buttonTertiaryHoverColor
      },
      ":active": controlColor.buttonTertiaryActiveColor,
      ":disabled": controlColor.buttonTertiaryDisabledColor
    }
  },
  // Quaternary variant: Inverted colors of tertiary
  quaternary: {
    background: {
      default: controlColor.buttonTertiaryHoverBackground,
      [CAN_HOVER]: {
        ":hover": controlColor.buttonTertiaryBackground
      },
      ":active": controlColor.buttonTertiaryActiveBackground,
      ":disabled": controlColor.buttonTertiaryDisabledBackground
    },
    color: {
      default: controlColor.buttonTertiaryHoverColor,
      [CAN_HOVER]: {
        ":hover": controlColor.buttonTertiaryColor
      },
      ":active": controlColor.buttonTertiaryActiveColor,
      ":disabled": controlColor.buttonTertiaryDisabledColor
    }
  },
  link: {
    color: {
      default: controlColor.linkColor,
      [CAN_HOVER]: {
        ":hover": controlColor.linkHoverColor
      },
      ":active": controlColor.linkActiveColor

      // Nothing here yet?
      // ":disabled": ,
    },
    fontWeight: "normal",
    fontSize: "unset",
    background: "none",
    padding: 0,
    margin: 0
  }
});

// Properties and some behavior of this button is based on the Button of MUI:
// https://mui.com/material-ui/react-button/

// TODO: Refactor this to a link button

export default memo(function Button(props) {
  const $ = _c(37);
  let t0;
  if ($[0] !== props.fontWeight) {
    t0 = () => {
      switch (props.fontWeight) {
        case "bold":
          {
            return styles.fontWeightBold;
          }
        case "light":
          {
            return styles.fontWeightLight;
          }
        case "medium":
          {
            return styles.fontWeightMedium;
          }
        default:
          {
            return styles.fontWeightNormal;
          }
      }
    };
    $[0] = props.fontWeight;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  const getFontWeightStyle = t0;
  let t1;
  if ($[2] !== getFontWeightStyle || $[3] !== props.badge || $[4] !== props.inline || $[5] !== props.lowercase || $[6] !== props.noPadding || $[7] !== props.size || $[8] !== props.variant) {
    t1 = stylex.props(interaction.disableTapHighlight, reset.buttonStyle, a11y.defaultOutline, styles.button, buttonSizes[props.size ?? "small"], buttonVariants[props.variant ?? "primary"], props.inline && styles.inline, props.noPadding && styles.noPadding, props.badge === true && styles.hasBadge, props.lowercase && styles.lowercase, getFontWeightStyle());
    $[2] = getFontWeightStyle;
    $[3] = props.badge;
    $[4] = props.inline;
    $[5] = props.lowercase;
    $[6] = props.noPadding;
    $[7] = props.size;
    $[8] = props.variant;
    $[9] = t1;
  } else {
    t1 = $[9];
  }
  const elementProps = t1;
  const rippleRef = useRippleEffect(props.disabled);
  const refForAnimatedButtons = props.noPadding || props.variant === "link" || props.variant === "subscription" ? undefined : rippleRef;
  const onClick = props.onClick;
  if (props.component === "link") {
    let t2;
    if ($[10] !== onClick || $[11] !== props.disabled) {
      t2 = onClick && !props.disabled ? e => {
        e.preventDefault();
        onClick();
      } : undefined;
      $[10] = onClick;
      $[11] = props.disabled;
      $[12] = t2;
    } else {
      t2 = $[12];
    }
    let t3;
    if ($[13] !== props.icon) {
      t3 = props.icon && <span {...stylex.props(styles.icon)}>{props.icon}</span>;
      $[13] = props.icon;
      $[14] = t3;
    } else {
      t3 = $[14];
    }
    let t4;
    if ($[15] !== elementProps || $[16] !== props.children || $[17] !== props.role || $[18] !== props.title || $[19] !== props.to || $[20] !== refForAnimatedButtons || $[21] !== t2 || $[22] !== t3) {
      t4 = <Link ref={refForAnimatedButtons} {...elementProps} role={props.role} title={props.title} to={props.to} onClick={t2}>{t3}{props.children}</Link>;
      $[15] = elementProps;
      $[16] = props.children;
      $[17] = props.role;
      $[18] = props.title;
      $[19] = props.to;
      $[20] = refForAnimatedButtons;
      $[21] = t2;
      $[22] = t3;
      $[23] = t4;
    } else {
      t4 = $[23];
    }
    return t4;
  }
  let t2;
  if ($[24] !== props.icon) {
    t2 = props.icon && <span {...stylex.props(styles.icon)}>{props.icon}</span>;
    $[24] = props.icon;
    $[25] = t2;
  } else {
    t2 = $[25];
  }
  let t3;
  if ($[26] !== elementProps || $[27] !== onClick || $[28] !== props.children || $[29] !== props.disabled || $[30] !== props.form || $[31] !== props.role || $[32] !== props.title || $[33] !== props.type || $[34] !== refForAnimatedButtons || $[35] !== t2) {
    t3 = <button ref={refForAnimatedButtons} {...elementProps} type={props.type} role={props.role} form={props.form} onClick={onClick} disabled={props.disabled} title={props.title}>{t2}{props.children}</button>;
    $[26] = elementProps;
    $[27] = onClick;
    $[28] = props.children;
    $[29] = props.disabled;
    $[30] = props.form;
    $[31] = props.role;
    $[32] = props.title;
    $[33] = props.type;
    $[34] = refForAnimatedButtons;
    $[35] = t2;
    $[36] = t3;
  } else {
    t3 = $[36];
  }
  return t3;
});
//# sourceMappingURL=Button.jsx.map