supabase/apps/studio/components/interfaces/BranchManagement/BranchSelector.tsx

import { Check, GitMerge, Shield } from 'lucide-react'
import { useState } from 'react'
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  Popover,
  PopoverContent,
  PopoverTrigger,
  ScrollArea,
} from 'ui'

import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { Branch } from '@/data/branches/branches-query'

interface BranchSelectorProps {
  branches: Branch[]
  onBranchSelected?: (branch: Branch) => void
  disabled?: boolean
  isUpdating?: boolean
  variant?: 'primary' | 'outline'
  align?: 'end' | 'center'
}

export const BranchSelector = ({
  branches,
  onBranchSelected,
  disabled = false,
  isUpdating = false,
  variant = 'primary',
  align = 'end',
}: BranchSelectorProps) => {
  const [open, setOpen] = useState(false)
  const [selectedBranch, setSelectedBranch] = useState<Branch | null>(null)

  const availableBranches = branches.filter((branch) => !branch.is_default)

  const handleBranchSelect = (branch: Branch) => {
    setSelectedBranch(branch)
    setOpen(false)
    onBranchSelected?.(branch)
  }

  return (
    <Popover open={open} onOpenChange={setOpen} modal={false}>
      <PopoverTrigger asChild>
        <ButtonTooltip
          icon={<GitMerge size={14} strokeWidth={1.5} />}
          variant={variant}
          disabled={
            disabled || isUpdating || branches.length === 0 || availableBranches.length === 0
          }
          tooltip={{
            content: {
              side: 'bottom',
              align,
              text:
                branches.length === 0 || availableBranches.length === 0
                  ? 'Create a branch first to start a merge request'
                  : undefined,
            },
          }}
        >
          {isUpdating ? 'Creating...' : 'New merge request'}
        </ButtonTooltip>
      </PopoverTrigger>
      <PopoverContent className="p-0 w-80" side="bottom" align="end">
        <Command>
          <CommandInput placeholder="Find branch to review..." />
          <CommandList>
            <CommandEmpty>No available branches found</CommandEmpty>
            <CommandGroup>
              <ScrollArea className="max-h-[210px] overflow-y-auto">
                {availableBranches.map((branch) => (
                  <CommandItem
                    key={branch.id}
                    value={branch.name.replaceAll('"', '')}
                    className="cursor-pointer w-full flex items-center justify-between"
                    onSelect={() => handleBranchSelect(branch)}
                    disabled={isUpdating || !!branch.git_branch || !!branch.review_requested_at}
                  >
                    <div className="flex items-center gap-2">
                      {branch.is_default && <Shield size={14} className="text-amber-900" />}
                      <span className="truncate" title={branch.name}>
                        {branch.name}
                      </span>
                    </div>
                    {selectedBranch?.id === branch.id && (
                      <Check size={14} strokeWidth={1.5} className="text-primary" />
                    )}
                    {branch.git_branch && <span>Synced to a Git branch</span>}
                    {branch.review_requested_at && <span>Merge request opened</span>}
                  </CommandItem>
                ))}
              </ScrollArea>
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}