import * as stylex from "@stylexjs/stylex";
import { memo, useCallback } from "react";
import { controlColor } from "./theme.stylex";
import { font, size } from "./tokens.stylex";

// Properties and some behavior of this textbox is based on the Text Field of MUI:
// https://mui.com/material-ui/react-text-field/

export default memo(TextBox);
const styles = stylex.create({
  box: {
    background: {
      default: controlColor.inputBackground,
      ":focus": controlColor.inputActiveBackground,
      ":disabled": controlColor.inputDisabledBackground
    },
    borderWidth: "1px",
    borderStyle: "solid",
    borderColor: {
      default: controlColor.inputBorder,
      ":focus": controlColor.inputActiveBorder,
      // https://web.dev/articles/user-valid-and-user-invalid-pseudo-classes
      ":user-invalid": controlColor.inputInvalidBorder,
      ":disabled": controlColor.inputDisabledBorder
    },
    borderRadius: 0,
    color: {
      default: controlColor.inputColor,
      ":focus": controlColor.inputActiveColor,
      ":disabled": controlColor.inputDisabledColor
    },
    width: "100%",
    fontFamily: font.main,
    "::placeholder": {
      color: controlColor.inputPlaceholderColor
    },
    outline: {
      ":focus": "none"
    },
    cursor: {
      ":disabled": "not-allowed"
    }
  },
  upperCase: {
    textTransform: "uppercase"
  }
});
const variants = stylex.create({
  small: {
    padding: `${size.rem1} ${size.rem2}`,
    fontSize: size.rem4
  },
  medium: {
    padding: `${size.px2} ${size.px3}`,
    fontSize: size.rem4,
    fontWeight: 400
  },
  large: {
    padding: `${size.rem1} ${size.rem2}`,
    fontSize: size.rem6 // TODO: ASK-UX:So we have small/large text fields?
  }
});
function TextBox(props) {
  const onChange = useCallback(e => {
    props.onChange?.(e.currentTarget.value, e);
  }, [props.onChange]);
  return <input ref={props.ref} {...stylex.props(styles.box, variants[props.size ?? "small"], props.textTransform === "uppercase" && styles.upperCase)} aria-label={props["aria-label"]} type={props.type ?? "text"} placeholder={props.placeholder} name={props.name} required={props.required} disabled={props.disabled} autoComplete={props.autoComplete} inputMode={props.inputMode}
  // biome-ignore lint/a11y/noAutofocus: We're just passing it down
  autoFocus={props.autoFocus} minLength={props.minLength} maxLength={props.maxLength} min={props.min} max={props.max} pattern={props.pattern} list={props.list} title={props.title} value={props.value} onChange={onChange} onKeyDown={props.onKeyDown} defaultValue={props.defaultValue} form={props.form} />;
}

/**
 * See: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
 * MDN link: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
 */
//# sourceMappingURL=TextBox.jsx.map