import {Select as InstUISelect, type SelectProps as InstUISelectProps} from '@instructure/ui-select'
import React, {forwardRef} from 'react'
import {enhanceErrorMessages} from '../../util/enhanceErrorMessages'

export interface SelectSubcomponents {
  Option: typeof InstUISelect.Option
  Group: typeof InstUISelect.Group
}

export interface SelectProps extends InstUISelectProps {}

const SelectComponent = forwardRef<InstUISelect, SelectProps>(({messages, ...props}, ref) => {
  const messagesWithEnhancedErrors = enhanceErrorMessages(messages)

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

/**
 * This is a wrapper around the InstUI `Select` component.
 *
 * Differences include:
 * - If the `messages` prop contains an error message, it will include an icon
 */
export const Select = Object.assign(SelectComponent, {
  Option: InstUISelect.Option,
  Group: InstUISelect.Group,
}) as typeof SelectComponent & SelectSubcomponents
Select.displayName = 'Select'