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;
  description?: string;
  handleChangeMessageText: (e: ChangeEvent<HTMLTextAreaElement>) => void;
  submitForm: (messageText: string) => void;
}

function InputMessage({
  placeholder,
  messageText,
  textareaRows,
  disabledButton,
  disabledTextArea,
  isLoading,
  description,
  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} />}

      {description && (
        <div role="button" className={styles["chat-cost"]}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
          >
            <title>alert</title>
            <path d="M12-0c-2.373 0-4.693 0.704-6.667 2.022s-3.511 3.193-4.42 5.385c-0.908 2.193-1.146 4.605-0.683 6.933s1.606 4.466 3.284 6.144c1.678 1.678 3.816 2.821 6.144 3.284s4.741 0.225 6.933-0.683c2.193-0.908 4.067-2.446 5.385-4.42s2.022-4.293 2.022-6.667c0-3.183-1.264-6.235-3.515-8.485s-5.303-3.515-8.485-3.515zM12 22c-1.978 0-3.911-0.587-5.556-1.685s-2.926-2.661-3.683-4.488c-0.757-1.827-0.955-3.838-0.569-5.778s1.338-3.722 2.737-5.12c1.399-1.399 3.18-2.351 5.12-2.737s3.95-0.188 5.778 0.569c1.827 0.757 3.389 2.039 4.488 3.683s1.685 3.578 1.685 5.556c0 1.313-0.259 2.614-0.761 3.827s-1.239 2.316-2.168 3.244-2.031 1.665-3.244 2.168c-1.213 0.503-2.514 0.761-3.827 0.761z"></path>
            <path d="M12 14.070c-0.345 0-0.675-0.137-0.919-0.381s-0.381-0.574-0.381-0.919v-6c0-0.345 0.137-0.675 0.381-0.919s0.574-0.381 0.919-0.381 0.675 0.137 0.919 0.381c0.244 0.244 0.381 0.574 0.381 0.919v6c0 0.345-0.137 0.675-0.381 0.919s-0.574 0.381-0.919 0.381z"></path>
            <path d="M11.95 18.52c0.828 0 1.5-0.672 1.5-1.5s-0.672-1.5-1.5-1.5c-0.828 0-1.5 0.672-1.5 1.5s0.672 1.5 1.5 1.5z"></path>
          </svg>
          <span className={styles.text}>{description}</span>
        </div>
      )}
    </form>
  );
}

export default InputMessage;
