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

export function BranchSelector({
    repoName,
    branches,
    tags = [],
    currentRef,
    view,
    path,
}: BranchSelectorProps) {
    if (branches.length === 0 && tags.length === 0) return "";
    const isDetached =
        !branches.includes(currentRef) && !tags.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" data-autosubmit>
                {isDetached && (
                    <option value={currentRef} selected>
                        {shortRef} (detached)
                    </option>
                )}
                <optgroup label="Branches">
                    {branches.map((b) => (
                        <option
                            value={b}
                            selected={b === currentRef ? true : undefined}
                        >
                            {b}
                        </option>
                    ))}
                </optgroup>
                {tags.length > 0 && (
                    <optgroup label="Tags">
                        {tags.map((t) => (
                            <option
                                value={t}
                                selected={t === currentRef ? true : undefined}
                            >
                                {t}
                            </option>
                        ))}
                    </optgroup>
                )}
            </select>
            <noscript>
                <button type="submit" class="btn btn-sm">
                    Go
                </button>
            </noscript>
        </form>
    );
}