import { ChangeEvent, FormEvent } from "react";
import styles from "./styles.module.css";
import Loader, { LoaderColor } from "@/components/Loader";

interface IInputMessageProps {
  placeholder?: string;
  classNameContainer?: string;
  messageText: string;
  textareaRows: number;
  disabledButton: boolean;
  disabledTextArea: boolean;
  isLoading: boolean;
  handleChangeMessageText: (e: ChangeEvent<HTMLTextAreaElement>) => void;
  submitForm: (messageText: string) => void;
}

function InputMessage({
  placeholder,
  messageText,
  textareaRows,
  disabledButton,
  disabledTextArea,
  isLoading,
  handleChangeMessageText,
  submitForm,
  classNameContainer = "",
}: IInputMessageProps) {
  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    submitForm(messageText);
  };

  return (
    <form
      className={`${styles.container} ${classNameContainer}`}
      onSubmit={(e) => handleSubmit(e)}
    >
      <textarea
        className={styles.input}
        disabled={disabledTextArea}
        value={messageText}
        onChange={(e) => handleChangeMessageText(e)}
        rows={textareaRows}
        placeholder={placeholder || "Type your message"}
      />
      {!isLoading && (
        <button className={styles.button} disabled={disabledButton}>
          <div className={styles["arrow"]} />
        </button>
      )}
      {isLoading && <Loader color={LoaderColor.White} />}
    </form>
  );
}

export default InputMessage;
