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

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

const styles = stylex.create({
  area: {
    resize: "vertical",
    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
    },
    padding: `${size.px2} ${size.px3}`,
    fontSize: size.rem4,
    fontWeight: 400,
    fontFamily: font.main,
    width: "100%",
    "::placeholder": {
      color: controlColor.inputPlaceholderColor
    },
    background: {
      default: controlColor.inputBackground,
      ":focus": controlColor.inputActiveBackground,
      ":disabled": controlColor.inputDisabledBackground
    },
    cursor: {
      ":disabled": "not-allowed"
    },
    outline: {
      ":focus": "none"
    },
    fieldSizing: "content"
  },
  fullHeight: {
    height: "100%"
  },
  noAutoGrow: {
    fieldSizing: "content"
  }
});

/**
 * @remarks Currently does not support submitting a form by pressing `Ctrl+Enter`.
 * TODO: Support this if the need arises: https://stackoverflow.com/q/1684196
 */
export default memo(function TextArea(props) {
  const onChange = useCallback(e => {
    props.onChange?.(e.target.value);
  }, [props.onChange]);
  const innerRef = useRef(null);
  useImperativeHandle(props.ref, () => ({
    focus: () => innerRef.current?.focus()
  }), []);
  useEffect(() => {
    const r = innerRef.current;
    if (!r) {
      return;
    }
    const handler = e_0 => {
      if ((e_0.metaKey || e_0.ctrlKey) && e_0.key === "Enter") {
        const target = e_0.currentTarget;
        // If there are any issues, see: https://gist.github.com/KacperKozak/9736160
        // When using .submit(), this error is thrown:
        // > A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead.
        target?.form?.requestSubmit();
        e_0.stopPropagation();
        e_0.preventDefault();
      }
    };
    r.addEventListener("keydown", handler);
    return () => r.removeEventListener("keydown", handler);
  }, []);
  return <textarea {...stylex.props(styles.area, props.fullHeight && styles.fullHeight, props.noAutoGrow && styles.noAutoGrow)} placeholder={props.placeholder} name={props.name} required={props.required} disabled={props.disabled} minLength={props.minLength} maxLength={props.maxLength} title={props.title}
  // biome-ignore lint/a11y/noAutofocus: We're just passing it down
  autoFocus={props.autoFocus} defaultValue={props.defaultValue} value={props.value} onChange={onChange} ref={innerRef} />;
});
//# sourceMappingURL=TextArea.jsx.map