src/components/views/comment/Comment.tsx

import TextArea from "@/components/generics/textArea/TextArea";
import { GoStarFill } from "react-icons/go";
import Button from "@/components/generics/button/Button";
import { useMemo, useState } from "react";
import { CommentProps } from "./CommentProps";
import { UserScore } from "@/api/predictions/types";
import Input from "@/components/generics/input/Input";
import "./Comment.scss";

const Comment = ({ onSubmit, loading, log_id }: CommentProps) => {
  const [score, setScore] = useState<UserScore | null>(null);
  const [hover, setHover] = useState<number>(0);
  const [commentText, setCommentText] = useState<string>("");
  const [showMessage, setShowMessage] = useState(false);
  const [manualEstimate, setManualEstimate] = useState<string>("");
  const [llmEstimate, setLlmEstimate] = useState<string>("");
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const handleInput = (event: any) => {
    setCommentText(event.target.value);
  };

  const handleFeedback = () => {
    setShowMessage(true);
    setTimeout(() => {
      setShowMessage(false);
    }, 2000);
  };

  const handleSubmit = async () => {
    if (score !== null && log_id != null) {
      onSubmit(
        {
          log_id: log_id,
          userComment: commentText,
          userScore: score,
          llmEstimate: Number(llmEstimate),
          manualEstimate: Number(manualEstimate),
        },
        () => {
          handleFeedback();
          setCommentText("");
          setScore(null);
          setLlmEstimate("");
          setManualEstimate("");
        }
      );
    }
  };

  const ratingView = useMemo(() => {
    return Array.from({ length: 5 }, (_, i) => (
      <button
        key={i}
        type="button"
        className="icon_btn"
        onClick={() => (score !== i + 1 ? setScore((i + 1) as UserScore) : setScore(null))}
        onMouseEnter={() => setHover(i + 1)}
        onMouseLeave={() => setHover(0)}
      >
        <GoStarFill
          style={{
            cursor: "pointer",
            fontSize: "20px",
            color: hover > i || (score != null && score > i) ? "gold" : "lightgray ",
          }}
        />
      </button>
    ));
  }, [hover, score]);

  return (
    <div className="comment">
      <div className="reaction">
        <span className="required_field">Оцените ответ:</span>
        {ratingView}
      </div>
      <TextArea value={commentText} onInput={handleInput} onKeyDown={() => {}} rows={0} placeholder={"Комментарий"} />
      <div>
        <label className="reaction reaction_input">
          <span className="required_field">Время с ИИ (минут):</span>
          <Input
            name={"llmSearchTime"}
            placeholder={""}
            value={llmEstimate}
            onSetValue={(value) => setLlmEstimate(value)}
            type="number"
            max="300"
            min="0"
            step="1"
          />
        </label>
        <label className="reaction reaction_input">
          <span className="required_field">Время без ИИ (минут):</span>
          <Input
            name={"ownSearchTime"}
            placeholder={""}
            value={manualEstimate}
            onSetValue={(value) => setManualEstimate(value)}
            type="number"
            max="300"
            min="0"
            step="1"
          />
        </label>
      </div>
      <div className="submit_btn">
        <Button
          name="Отправить"
          onClick={() => {
            handleSubmit();
          }}
          disabled={
            score === null ||
            manualEstimate == null ||
            llmEstimate == null ||
            manualEstimate == "" ||
            llmEstimate == "" ||
            Number(manualEstimate) == 0 ||
            Number(llmEstimate) == 0
          }
          loading={loading}
        />
      </div>
      <div className="feedback_container">
        <div className={`feedback_message ${showMessage ? "show" : ""}`}>Спасибо за обратную связь!</div>
      </div>
    </div>
  );
};

export default Comment;