// Adapted from Mantine NumberInput (MIT). See THIRD_PARTY_NOTICES.md.
import { useId, type ComponentProps, type CSSProperties } from "react";

export interface NumberInputProps extends Omit<
  ComponentProps<"input">,
  "type" | "onChange" | "className" | "style"
> {
  label: string;
  description?: string;
  error?: string;
  onChange?: (value: number | null) => void;
  className?: string;
  style?: CSSProperties;
  inputClassName?: string;
  inputStyle?: CSSProperties;
}

export function NumberInput({
  label,
  description,
  error,
  id,
  onChange,
  className = "",
  style,
  inputClassName = "",
  inputStyle,
  "aria-describedby": describedBy,
  ...props
}: NumberInputProps) {
  const generatedId = useId();
  const inputId = id ?? generatedId;
  const hint = error ?? description;
  const hintId = `${inputId}-hint`;

  return (
    <div className={`ynr-number-input ynr-field ${className}`} style={style}>
      <label htmlFor={inputId}>{label}</label>
      <input
        {...props}
        id={inputId}
        type="number"
        className={`ynr-number-input-field ${inputClassName}`}
        style={inputStyle}
        onChange={(event) => {
          const value = event.target.valueAsNumber;
          onChange?.(
            event.target.value === "" || Number.isNaN(value) ? null : value,
          );
        }}
        aria-invalid={error ? true : props["aria-invalid"]}
        aria-describedby={
          [describedBy, hint ? hintId : undefined].filter(Boolean).join(" ") ||
          undefined
        }
      />
      {hint && (
        <p id={hintId} className={error ? "ynr-error" : "ynr-hint"}>
          {hint}
        </p>
      )}
    </div>
  );
}