import { MessageAction } from "@phoenix/components/ai/message/MessageAction";
import { MessageActions } from "@phoenix/components/ai/message/MessageActions";
import { Icon, Icons } from "@phoenix/components/core/icon";

export type FeedbackValue = "positive" | "negative";

export function FeedbackActionToolbar({
  onAnnotate,
  selectedFeedback,
  isSubmittingFeedback = false,
  onFeedback,
}: {
  onAnnotate?: () => void;
  selectedFeedback: FeedbackValue | null;
  isSubmittingFeedback?: boolean;
  onFeedback: ({ feedback }: { feedback: FeedbackValue }) => void;
}) {
  const isPositiveSelected = selectedFeedback === "positive";
  const isNegativeSelected = selectedFeedback === "negative";

  return (
    <MessageActions aria-label="Feedback actions">
      {onAnnotate ? (
        <MessageAction
          label="Annotate"
          tooltip="Annotate"
          onPress={() => {
            onAnnotate();
          }}
        >
          <Icon svg={<Icons.Edit />} />
        </MessageAction>
      ) : null}
      <MessageAction
        label="Thumbs up"
        tooltip={
          isPositiveSelected
            ? "Remove positive feedback"
            : "Set feedback to positive"
        }
        isDisabled={isSubmittingFeedback}
        onPress={() => {
          onFeedback({ feedback: "positive" });
        }}
      >
        <Icon
          svg={<Icons.ThumbsUp />}
          color={isPositiveSelected ? "success" : "inherit"}
        />
      </MessageAction>
      <MessageAction
        label="Thumbs down"
        tooltip={
          isNegativeSelected
            ? "Remove negative feedback"
            : "Set feedback to negative"
        }
        isDisabled={isSubmittingFeedback}
        onPress={() => {
          onFeedback({ feedback: "negative" });
        }}
      >
        <Icon
          svg={<Icons.ThumbsDown />}
          color={isNegativeSelected ? "danger" : "inherit"}
        />
      </MessageAction>
    </MessageActions>
  );
}
