import type { LabelRow } from "../db/index.ts";
import { labelTextColor } from "../lib/labelColor.ts";

interface LabelBadgesProps {
    labels: LabelRow[];
    repoLabels: LabelRow[];
    canManage: boolean;
    baseUrl: string;
}

export function LabelBadges({
    labels,
    repoLabels,
    canManage,
    baseUrl,
}: LabelBadgesProps) {
    if (labels.length === 0 && !canManage) return null;
    const available = repoLabels.filter(
        (l) => !labels.some((al) => al.id === l.id),
    );
    return (
        <div class="issue-labels-row">
            {labels.map((label) => (
                <span class="label-badge-wrap">
                    <span
                        class="label-badge"
                        style={`background:${label.color};color:${labelTextColor(label.color)}`}
                        safe
                    >
                        {label.name}
                    </span>
                    {canManage && (
                        <form
                            method="POST"
                            action={`${baseUrl}/labels/remove`}
                            class="label-remove-form"
                        >
                            <input
                                type="hidden"
                                name="label_id"
                                value={String(label.id)}
                            />
                            <button
                                type="submit"
                                class="label-remove-btn"
                                title="Remove label"
                            >
                                ×
                            </button>
                        </form>
                    )}
                </span>
            ))}
            {canManage && available.length > 0 && (
                <form
                    method="POST"
                    action={`${baseUrl}/labels/add`}
                    class="label-add-inline-form"
                >
                    <select name="label_id" class="label-select">
                        {available.map((label) => (
                            <option value={String(label.id)} safe>
                                {label.name}
                            </option>
                        ))}
                    </select>
                    <button type="submit" class="btn btn-sm btn-secondary">
                        Add label
                    </button>
                </form>
            )}
        </div>
    );
}