import { ChangeEvent, ForwardedRef, forwardRef, useRef } from 'react';
import {
  RtData,
  RtFormFieldNumericProps,
} from '../types/rt-form-field-text.types';
import { RtFormField } from './rt-form-field';
import { RtText } from '@dpa/react-text';
import mergeRefs from 'merge-refs';

const RtDataComponent: RtData<HTMLInputElement> = (props) => {
  const localRef = useRef<HTMLInputElement>(null);

  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    const v = e.target.value;
    let newValue = `${v}`;
    newValue = newValue.replaceAll('e', '').replace(/\D/g, '');
    if (newValue !== v) e.target.value = newValue;
    props.onChange(e);
  }

  return (
    <RtText
      as="input"
      id={props.id}
      typography={props.typography}
      specification="main"
      type="text"
      placeholder={props.placeholder}
      className={props.className}
      ref={mergeRefs(props.forwardedRef, localRef)}
      value={props.value || ''}
      name={props.name}
      readOnly={props.readonly}
      required={props.required}
      disabled={props.disabled}
      autoComplete={props.autoComplete}
      minLength={props.minLength}
      maxLength={props.maxLength}
      onChange={handleChange}
      onFocus={props.onFocus}
      onBlur={props.onBlur}
      onKeyUp={props.onKeyUp}
      onKeyDown={props.onKeyDown}
    />
  );
};
export const RtFormFieldNumeric = forwardRef(function RtFormFieldNumeric(
  props: RtFormFieldNumericProps,
  ref: ForwardedRef<HTMLDivElement>
) {
  return (
    <RtFormField
      {...props}
      type={'numeric' as any}
      ref={ref}
      data={RtDataComponent}
    />
  );
});

RtFormFieldNumeric.displayName = 'RtFormFieldNumeric';