import { Icon } from "@iconify-icon/react";
import { useState } from "react";

export { FeedbackButton };

interface FeedbackButtonProps {
  messageKey: string;
  onFeedback: (key: string, rating: string) => Promise<void>;
}

function FeedbackButton({ messageKey, onFeedback }: FeedbackButtonProps) {
  const [likeStyle, setLikeStyle] = useState({ fontSize: "18px" });
  const [dislikeStyle, setDislikeStyle] = useState({ fontSize: "18px" });
  const [liked, setLiked] = useState(false);
  const [disliked, setDisliked] = useState(false);

  async function sendFeedback(rating: string) {
    await onFeedback(messageKey, rating);
    console.log("Sent feedback:");
    console.log(rating);
  }

  function Like() {
    if (!liked) {
      const colorStyle = { color: "green" };
      setLikeStyle({ fontSize: "18px", ...colorStyle });
      setLiked(true);

      setDislikeStyle({ fontSize: "18px" });
      setDisliked(false);

      sendFeedback("Good");
    } else {
      setLikeStyle({ fontSize: "18px" });
      setLiked(false);

      sendFeedback("None");
    }
  }

  function Dislike() {
    if (!disliked) {
      const colorStyle = { color: "red" };
      setDislikeStyle({ fontSize: "18px", ...colorStyle });
      setDisliked(true);

      setLikeStyle({ fontSize: "18px" });
      setLiked(false);

      sendFeedback("Bad");
    } else {
      setDislikeStyle({ fontSize: "18px" });
      setDisliked(false);

      sendFeedback("None");
    }
  }

  return (
    <div className="flex justify-end space-x-2 mt-3">
      <button className="btn btn-xs btn-ghost" onClick={Like}>
        <Icon style={likeStyle} icon="iconamoon:like" />
      </button>
      <button className="btn btn-xs btn-ghost" onClick={Dislike}>
        <Icon style={dislikeStyle} flip="horizontal" icon="iconamoon:dislike" />
      </button>
    </div>
  );
}
