import useTranslation from "next-translate/useTranslation"
import TextareaAutosize from "react-textarea-autosize"

import type { MessageProps } from "../Message"

export interface EditMessageProps extends MessageProps {
  handleEdit: () => Promise<void>
  handleKeyDown: React.KeyboardEventHandler<HTMLFormElement>
  textareaRef: React.RefObject<HTMLTextAreaElement>
}

export const EditMessage: React.FC<
  React.PropsWithChildren<EditMessageProps>
> = ({ handleEdit, handleKeyDown, textareaRef, message }) => {
  const { t } = useTranslation()

  const handleEditSubmit: React.FormEventHandler<HTMLFormElement> = async (
    event,
  ) => {
    event.preventDefault()
    await handleEdit()
  }

  return (
    <form
      className="flex h-full w-full items-center"
      onSubmit={handleEditSubmit}
      onKeyDown={handleKeyDown}
    >
      <TextareaAutosize
        className="scrollbar-firefox-support w-full resize-none bg-transparent p-2 tracking-wide outline-none"
        placeholder={t("application:write-a-message")}
        wrap="soft"
        maxRows={6}
        name="message"
        defaultValue={message.value}
        ref={textareaRef}
        autoFocus
        onFocus={(event) => {
          event.currentTarget.setSelectionRange(
            event.currentTarget.value.length,
            event.currentTarget.value.length,
          )
        }}
      />
    </form>
  )
}