import { NumberInput, type NumberInputProps, Tooltip } from '@mantine/core';
import { Controller } from 'react-hook-form';

import type { FormerControllersProps, SpecialIDProps } from '../FormerControllers.types';

const NumberInputCtrl = (props: FormerControllersProps & NumberInputProps & SpecialIDProps) => {
  const { control, name, sid, tooltip, ...textProps } = props;
  return (
    <Controller
      control={control}
      name={name}
      render={({ field, formState }) => (
        <Tooltip label={tooltip ?? ''} withArrow>
          <NumberInput
            {...textProps}
            {...field}
            disabled={formState.disabled}
            id={`field_${name}_${sid ?? ''}`}
            key={`field_${name}_${sid ?? ''}`}
            onChange={(num) =>
              field.onChange(num !== undefined && num !== null ? Number(num) : undefined)
            }
            value={
              field.value !== undefined && field.value !== null ? Number(field.value) : undefined
            }
          >
            {props.children}
          </NumberInput>
        </Tooltip>
      )}
    />
  );
};

export { NumberInputCtrl };
export default NumberInputCtrl;