import React, {forwardRef} from 'react'
import {
  NumberInput as InstUINumberInput,
  type NumberInputProps as InstUINumberInputProps,
} from '@instructure/ui-number-input'
import {enhanceErrorMessages} from '../../util/enhanceErrorMessages'

export interface NumberInputSubcomponents {
  propTypes: typeof InstUINumberInput.propTypes
}

export interface NumberInputProps extends InstUINumberInputProps {}

const NumberInputComponent = forwardRef<InstUINumberInput, NumberInputProps>(
  ({messages, ...props}, ref) => {
    const messagesWithEnhancedErrors = enhanceErrorMessages(messages)

    return <InstUINumberInput {...props} ref={ref} messages={messagesWithEnhancedErrors} />
  },
)

/**
 * This is a wrapper around the InstUI `NumberInput` component.
 *
 * Differences include:
 * - If the `label` prop is a string, it will be enhanced with an asterisk if `isRequired` is `true`
 * - If the `messages` prop contains an error message, it will include an icon
 */
export const NumberInput = Object.assign(NumberInputComponent, {
  // Note: `propTypes` are still required by functions such as `pickProps` and `omitProps`
  propTypes: InstUINumberInput.propTypes,
}) as typeof NumberInputComponent & NumberInputSubcomponents

NumberInput.displayName = 'NumberInput'