import React from 'react'
import { ChatMessageInputProps } from '../models'
import zocksStyle from './ChatMessageInput.module.scss'
import { getClassName, getMergedClassNames } from '../../common'

export const ChatMessageInput: React.FC<ChatMessageInputProps> = React.forwardRef<
  HTMLTextAreaElement,
  ChatMessageInputProps
>(({ currentChatMessage, onChatMessageChanged, sendMessage, placeholderText = 'Type a message…', styles }, ref) => {
  const MESSAGE_MAX_LENGTH = 1000

  const keyDownHandler = (evt: React.KeyboardEvent<HTMLElement>) => {
    if (evt.key === 'Enter' && !evt.shiftKey) {
      evt.preventDefault()
      sendMessage && sendMessage()
    }
  }
  const mergedStyles = getMergedClassNames(zocksStyle, styles)
  return (
    <textarea
      ref={ref}
      className={getClassName('chat-input__message-textarea', mergedStyles)}
      value={currentChatMessage}
      onChange={(evt) => onChatMessageChanged(evt.target.value)}
      onKeyDown={keyDownHandler}
      placeholder={placeholderText}
      maxLength={MESSAGE_MAX_LENGTH}
    />
  )
})
