import React from 'react';
import { sanitizeMobileInput } from '../../lib/utils';

type Props = React.InputHTMLAttributes<HTMLInputElement> & {
  hasError?: boolean;
};

/**
 * فیلد شماره موبایل ایران: ارقام فارسی/عربی را به انگلیسی تبدیل می‌کند، فقط رقم می‌پذیرد و حداکثر ۱۱ رقم.
 * سازگار با react-hook-form `register` (event-based onChange) و حالت controlled.
 * قبل از فراخوانی onChange، مقدار DOM پاک‌سازی می‌شود تا value در state هم تمیز ذخیره شود.
 */
export default React.forwardRef<HTMLInputElement, Props>(function MobileInput(
  { hasError, className, placeholder, style, onChange, ...rest },
  ref,
) {
  const handle = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.target.value = sanitizeMobileInput(e.target.value);
    onChange?.(e);
  };

  return (
    <input
      {...rest}
      ref={ref}
      type="tel"
      inputMode="numeric"
      dir="ltr"
      maxLength={11}
      placeholder={placeholder ?? '09xxxxxxxxx'}
      className={className ?? 'cp-input'}
      style={hasError ? { borderColor: 'var(--danger)', ...(style || {}) } : style}
      onChange={handle}
    />
  );
});