import { ChangeEvent, forwardRef, useCallback, useMemo } from "react";

const SafeInput = forwardRef<
  HTMLInputElement,
  {
    value: string;
    onChange: (value: string) => void;
    regex: RegExp;
    id: string;
    placeholder?: string;
    className?: string;
    disabled?: boolean;
  }
>(({ value, onChange, id, placeholder, regex, className, disabled }, ref) => {
  const size = useMemo(() => (value.length < 2 ? 2 : value.length), [value]);

  const handleChange = useCallback(
    (e: ChangeEvent<HTMLInputElement>) => {
      if (e.target.value === ".") {
        // todo temporary fix
        return;
      }
      if (regex.test(e.target.value)) {
        onChange(e.target.value.replace(/,/g, "."));
      }
    },
    [onChange, regex, id],
  );

  return (
    <input
      ref={ref}
      id={id}
      type="text"
      size={size}
      placeholder={placeholder || "0"}
      pattern={regex.toString()}
      inputMode="decimal"
      spellCheck="false"
      autoComplete="off"
      autoCorrect="off"
      disabled={disabled}
      value={value}
      onChange={handleChange}
      className={className}
    />
  );
});

SafeInput.displayName = "SafeInput";
export { SafeInput };