"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Button } from "@open-mercato/ui/primitives/button";
import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
import { flash } from "@open-mercato/ui/backend/FlashMessages";
import { useT } from "@open-mercato/shared/lib/i18n/context";
const REACTION_BAR_MUTATION_CONTEXT_ID = "communication-channels-reaction-bar";
function ReactionBarWidget({
  data
}) {
  const t = useT();
  const messageId = data?.id ?? null;
  const initial = React.useMemo(() => data?._reactions ?? [], [data?._reactions]);
  const [groups, setGroups] = React.useState(initial);
  const [busyEmoji, setBusyEmoji] = React.useState(null);
  const { runMutation, retryLastMutation } = useGuardedMutation({
    contextId: REACTION_BAR_MUTATION_CONTEXT_ID,
    blockedMessage: t("ui.forms.flash.saveBlocked", "Save blocked by validation")
  });
  React.useEffect(() => setGroups(initial), [initial]);
  if (!messageId || groups.length === 0) return null;
  const onToggle = async (group) => {
    if (busyEmoji) return;
    setBusyEmoji(group.emoji);
    try {
      if (group.reactedByMe) {
        if (!group.myReactionId) {
          flash(
            t(
              "communication_channels.reaction.cannotRemoveExternal",
              "Reactions from external participants can only be removed in the provider app."
            ),
            "error"
          );
          return;
        }
        const response2 = await runMutation({
          operation: () => apiCall(
            `/api/communication_channels/messages/${messageId}/reactions/${group.myReactionId}`,
            { method: "DELETE" }
          ),
          context: {
            formId: REACTION_BAR_MUTATION_CONTEXT_ID,
            resourceKind: "communication_channels.message",
            resourceId: messageId,
            retryLastMutation
          },
          mutationPayload: { action: "remove-reaction", reactionId: group.myReactionId, emoji: group.emoji }
        });
        if (!response2.ok) {
          const errBody = response2.result;
          flash(
            errBody?.error ?? t("communication_channels.errors.reactionFailed", "Reaction failed"),
            "error"
          );
          return;
        }
        setGroups(
          (prev) => prev.map(
            (g) => g.emoji === group.emoji ? { ...g, count: Math.max(0, g.count - 1), reactedByMe: false, myReactionId: null } : g
          ).filter((g) => g.count > 0)
        );
        return;
      }
      const response = await runMutation({
        operation: () => apiCall(
          `/api/communication_channels/messages/${messageId}/reactions`,
          {
            method: "POST",
            body: JSON.stringify({ emoji: group.emoji }),
            headers: { "content-type": "application/json" }
          }
        ),
        context: {
          formId: REACTION_BAR_MUTATION_CONTEXT_ID,
          resourceKind: "communication_channels.message",
          resourceId: messageId,
          retryLastMutation
        },
        mutationPayload: { action: "add-reaction", emoji: group.emoji }
      });
      if (!response.ok) {
        const errBody = response.result;
        flash(
          errBody?.error ?? t("communication_channels.errors.reactionFailed", "Reaction failed"),
          "error"
        );
        return;
      }
      const created = response.result;
      setGroups(
        (prev) => prev.map(
          (g) => g.emoji === group.emoji ? {
            ...g,
            count: g.count + 1,
            reactedByMe: true,
            myReactionId: created?.id ?? g.myReactionId
          } : g
        )
      );
    } catch (err) {
      flash(
        err instanceof Error ? err.message : t("communication_channels.errors.reactionFailed", "Reaction failed"),
        "error"
      );
    } finally {
      setBusyEmoji(null);
    }
  };
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: "mt-2 flex flex-wrap gap-1",
      "aria-label": t("communication_channels.reaction.bar.aria", "Reactions"),
      children: groups.map((group) => /* @__PURE__ */ jsxs(
        Button,
        {
          type: "button",
          variant: group.reactedByMe ? "default" : "outline",
          size: "sm",
          disabled: busyEmoji === group.emoji,
          onClick: () => void onToggle(group),
          "aria-label": t("communication_channels.reaction.toggleAria", "Toggle {emoji} reaction", {
            emoji: group.emoji
          }),
          children: [
            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: group.emoji }),
            /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs", children: group.count })
          ]
        },
        group.emoji
      ))
    }
  );
}
export {
  ReactionBarWidget as default
};
//# sourceMappingURL=widget.client.js.map
