import React, { forwardRef } from 'react';
import { Input, InputProps } from '@chakra-ui/react';

import { handleInputChange } from './helper';

export const CarNumberInput = forwardRef<HTMLInputElement, InputProps>(
  function CarNumberInput({ onChange, ...props }, ref) {
    return (
      <Input
        {...props}
        ref={ref}
        onChange={(e) => {
          const formattedValue = handleInputChange(e.target.value);
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          onChange?.(formattedValue);
        }}
        maxLength={12}
      />
    );
  },
);
