import { ALLOWED_REACTIONS } from "../constants.ts";
import type { SessionUser } from "../middleware/session.ts";

export interface ReactionCount {
    emoji: string;
    count: number;
    userReacted: boolean;
}

interface ReactionBarProps {
    reactions: ReactionCount[];
    postUrl: string;
    commentId?: number;
    user: SessionUser | null;
}

export function ReactionBar({
    reactions,
    postUrl,
    commentId,
    user,
}: ReactionBarProps) {
    if (!user && reactions.length === 0) return null;
    const existing = new Set(reactions.map((r) => r.emoji));
    const all = [...ALLOWED_REACTIONS];
    return (
        <div class="reaction-bar">
            {reactions.map((r) => {
                const unsafeEmoji = r.emoji;
                return (
                    <form method="POST" action={postUrl} class="reaction-form">
                        {commentId != null && (
                            <input
                                type="hidden"
                                name="comment_id"
                                value={String(commentId)}
                            />
                        )}
                        <input type="hidden" name="emoji" value={r.emoji} />
                        <button
                            type="submit"
                            class={`reaction-btn${r.userReacted ? " reacted" : ""}`}
                            disabled={!user}
                            safe
                        >
                            {unsafeEmoji + " " + r.count}
                        </button>
                    </form>
                );
            })}
            {!!user && (
                <details class="reaction-picker">
                    <summary class="reaction-add-btn">+</summary>
                    <div class="reaction-picker-dropdown">
                        {all
                            .filter((e) => !existing.has(e))
                            .map((e) => (
                                <form
                                    method="POST"
                                    action={postUrl}
                                    class="reaction-form"
                                >
                                    {commentId != null && (
                                        <input
                                            type="hidden"
                                            name="comment_id"
                                            value={String(commentId)}
                                        />
                                    )}
                                    <input
                                        type="hidden"
                                        name="emoji"
                                        value={e}
                                    />
                                    <button
                                        type="submit"
                                        class="reaction-picker-btn"
                                        safe
                                    >
                                        {e}
                                    </button>
                                </form>
                            ))}
                    </div>
                </details>
            )}
        </div>
    );
}