import * as React from 'react';
import { TextInput } from '../TextInput/TextInput';

// Показ с разделителем тысяч пробелом: 350000 → «350 000».
function formatThousands(input: string): string {
  const digits = input.replace(/\D/g, '');
  if (!digits) {
    return '';
  }
  return digits.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
}

interface IMoneyInputProps {
  id?: string;
  value: string;
  onChange: (value: string) => void;
  readOnly?: boolean;
}

/**
 * Ввод суммы с разделителем тысяч. В модель формы кладём «сырые» цифры
 * (без пробелов), поэтому запись в числовую колонку SP работает как есть.
 */
export const MoneyInput: React.FC<IMoneyInputProps> = ({ id, value, onChange, readOnly }) => (
  <TextInput
    id={id}
    value={formatThousands(value)}
    onChange={(v) => onChange(v.replace(/\D/g, ''))}
    readOnly={readOnly}
  />
);