import { stringToEmoji } from "@buzzwaretech/propel/emoji-icon-picker";
import type { EmojiReactionType } from "@buzzwaretech/propel/emoji-reaction";
import {
    EmojiReactionGroup,
    EmojiReactionPicker,
} from "@buzzwaretech/propel/emoji-reaction";
import { TOAST_TYPE, setToast } from "@buzzwaretech/propel/toast";
import type { IUser } from "@buzzwaretech/types";
import { observer } from "mobx-react";
import { useMemo, useState } from "react";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
import { useMember } from "@/hooks/store/use-member";

export type TIssueCommentReaction = {
  workspaceSlug: string;
  projectId: string;
  commentId: string;
  currentUser: IUser;
  disabled?: boolean;
};

export const IssueCommentReaction = observer(function IssueCommentReaction(
  props: TIssueCommentReaction,
) {
  const {
    workspaceSlug,
    projectId,
    commentId,
    currentUser,
    disabled = false,
  } = props;
  // state
  const [isPickerOpen, setIsPickerOpen] = useState(false);
  // hooks
  const {
    commentReaction: {
      getCommentReactionsByCommentId,
      commentReactionsByUser,
      getCommentReactionById,
    },
    createCommentReaction,
    removeCommentReaction,
  } = useIssueDetail();
  const { getUserDetails } = useMember();

  const reactionIds = getCommentReactionsByCommentId(commentId);
  const userReactions = commentReactionsByUser(commentId, currentUser.id).map(
    (r) => r.reaction,
  );

  const issueCommentReactionOperations = useMemo(
    () => ({
      create: async (reaction: string) => {
        try {
          if (!workspaceSlug || !projectId || !commentId)
            throw new Error("Missing fields");
          await createCommentReaction(
            workspaceSlug,
            projectId,
            commentId,
            reaction,
          );
          setToast({
            title: "Success!",
            type: TOAST_TYPE.SUCCESS,
            message: "Reaction created successfully",
          });
        } catch (_error) {
          setToast({
            title: "Error!",
            type: TOAST_TYPE.ERROR,
            message: "Reaction creation failed",
          });
        }
      },
      remove: async (reaction: string) => {
        try {
          if (!workspaceSlug || !projectId || !commentId || !currentUser?.id)
            throw new Error("Missing fields");
          removeCommentReaction(
            workspaceSlug,
            projectId,
            commentId,
            reaction,
            currentUser.id,
          );
          setToast({
            title: "Success!",
            type: TOAST_TYPE.SUCCESS,
            message: "Reaction removed successfully",
          });
        } catch (_error) {
          setToast({
            title: "Error!",
            type: TOAST_TYPE.ERROR,
            message: "Reaction remove failed",
          });
        }
      },
      react: async (reaction: string) => {
        if (userReactions.includes(reaction))
          await issueCommentReactionOperations.remove(reaction);
        else await issueCommentReactionOperations.create(reaction);
      },
    }),
    [
      workspaceSlug,
      projectId,
      commentId,
      currentUser,
      createCommentReaction,
      removeCommentReaction,
      userReactions,
    ],
  );

  const getReactionUsers = (reaction: string): string[] => {
    const reactionUsers = (reactionIds?.[reaction] || [])
      .map((reactionId) => {
        const reactionDetails = getCommentReactionById(reactionId);
        return reactionDetails
          ? getUserDetails(reactionDetails?.actor)?.display_name ||
              reactionDetails?.display_name
          : null;
      })
      .filter((displayName): displayName is string => !!displayName);
    return reactionUsers;
  };

  // Transform reactions data to Propel EmojiReactionType format
  const reactions: EmojiReactionType[] = useMemo(() => {
    if (!reactionIds) return [];

    return Object.keys(reactionIds)
      .filter((reaction) => reactionIds[reaction]?.length > 0)
      .map((reaction) => ({
        emoji: stringToEmoji(reaction),
        count: reactionIds[reaction].length,
        reacted: userReactions.includes(reaction),
        users: getReactionUsers(reaction),
      }));
  }, [reactionIds, userReactions]);

  const handleReactionClick = (emoji: string) => {
    if (disabled) return;
    // Convert emoji back to decimal string format for the API
    const emojiCodePoints = Array.from(emoji).map((char) =>
      char.codePointAt(0),
    );
    const reactionString = emojiCodePoints.join("-");
    issueCommentReactionOperations.react(reactionString);
  };

  const handleEmojiSelect = (emoji: string) => {
    // emoji is already in decimal string format from EmojiReactionPicker
    issueCommentReactionOperations.react(emoji);
  };

  return (
    <div className="relative mt-4">
      <EmojiReactionPicker
        isOpen={isPickerOpen}
        handleToggle={setIsPickerOpen}
        onChange={handleEmojiSelect}
        disabled={disabled}
        label={
          <EmojiReactionGroup
            reactions={reactions}
            onReactionClick={handleReactionClick}
            showAddButton={!disabled}
            onAddReaction={() => setIsPickerOpen(true)}
          />
        }
        placement="bottom-start"
      />
    </div>
  );
});