interface BranchSelectorProps {
    repoName: string;
    branches: string[];
    currentRef: string;
    view: "tree" | "commits" | "blob";
    /** subpath for tree, full file path for blob */
    path?: string;
}

export function BranchSelector({
    repoName,
    branches,
    currentRef,
    view,
    path,
}: BranchSelectorProps) {
    if (branches.length === 0) return "";
    const isDetached = !branches.includes(currentRef);
    const shortRef =
        isDetached && currentRef.length > 8
            ? currentRef.slice(0, 8)
            : currentRef;
    return (
        <form
            method="GET"
            action={`/${repoName}/branch-switch`}
            class="branch-selector"
        >
            <input type="hidden" name="view" value={view} />
            {path && <input type="hidden" name="path" value={path} />}
            <span class="branch-selector-icon">⎇</span>
            <select
                name="rev"
                class="branch-select"
                onchange="this.form.submit()"
            >
                {isDetached && (
                    <option value={currentRef} selected>
                        {shortRef} (commit)
                    </option>
                )}
                {branches.map((b) => (
                    <option
                        value={b}
                        selected={b === currentRef ? true : undefined}
                    >
                        {b}
                    </option>
                ))}
            </select>
            <noscript>
                <button type="submit" class="btn btn-sm btn-ghost">
                    Go
                </button>
            </noscript>
        </form>
    );
}