import React from "react";
import htm from "htm";

export const html = htm.bind(React.createElement);

export const UI_REACTIONS = [
  { ui: "love", api: "love", icon: "\u2764\uFE0F", label: "Love" },
  { ui: "like", api: "like", icon: "\uD83D\uDC4D", label: "Like" },
  { ui: "maybe", api: "curious", icon: "\uD83E\uDD14", label: "Maybe" },
  { ui: "not_interested", api: "not_interested", icon: "\uD83D\uDE48", label: "Hide" },
  { ui: "no_go", api: "hard_no", icon: "\uD83D\uDEAB", label: "No-go" },
];

export const DIRECTION_PILLS = [
  { key: "by_me", label: "I do it", shortLabel: "Me", icon: "\uD83D\uDC64" },
  { key: "to_me", label: "Partner does it", shortLabel: "Partner", icon: "\uD83D\uDC65" },
  { key: "together", label: "We both do it", shortLabel: "Both", icon: "\uD83E\uDD1D" },
];

export const VIEWS = {
  DISCOVER: "discover",
  SCENARIOS: "scenarios",
  PLAYS: "plays",
  TOGETHER: "together",
  SETTINGS: "settings",
};

/** Label for partner-group chips: list name plus partner user id(s), excluding the viewer. */
export function partnerGroupChipLabel(group, viewerUserId) {
  const name = (group?.name || "").trim() || "Shared list";
  if (!viewerUserId) return name;
  const others = (group?.participant_ids || []).filter((id) => id && id !== viewerUserId);
  if (!others.length) return name;
  const short = (id) => (id.length > 12 ? `${id.slice(0, 10)}…` : id);
  return `${name} — ${others.map(short).join(" · ")}`;
}

/** Full partner ids for this group (excluding viewer), for tooltips. */
export function partnerGroupPartnerIdsTitle(group, viewerUserId) {
  if (!viewerUserId) return "";
  const others = (group?.participant_ids || []).filter((id) => id && id !== viewerUserId);
  return others.length ? `Partners: ${others.join(", ")}` : "";
}