import { Button } from '../button'
import { useStyleConfig, vui } from '../core'
import { ChatInputButtonProps, ChatInputStatus } from './chat.types'

/**
 *  Displays a chat input button.
 */
export const ChatInputButton = vui<'button', ChatInputButtonProps>((props, ref) => {
  const styles = useStyleConfig('Chat', props)

  const { status = 'default', onSend, onStop } = props

  const icon = status === ChatInputStatus.Processing && onStop ? 'falStopCircle' : 'falChevronCircleRight'

  return (
    <Button
      disabled={status === ChatInputStatus.Disabled || (status === ChatInputStatus.Processing && !onStop)}
      h="100%"
      icon={icon}
      ml={1}
      onClick={() => (status === ChatInputStatus.Processing ? onStop?.() : onSend?.())}
      ref={ref}
      variant="tertiaryDark"
      {...styles?.inputButton}
    />
  )
})

ChatInputButton.displayName = 'ChatInputButton'
export default ChatInputButton
