supabase/apps/studio/components/layouts/Navigation/NavigationBar/ProjectBranchSelector.tsx

import { useBreakpoint, useParams } from 'common'
import { useRouter } from 'next/router'
import { useState } from 'react'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from 'ui'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'

import { getProjectBranchSelectorState } from './ProjectBranchSelector.utils'
import { ProjectBranchSelectorPopover } from './ProjectBranchSelectorPopover'
import { ProjectBranchSelectorSheet } from './ProjectBranchSelectorSheet'
import { ProjectBranchSelectorTrigger } from './ProjectBranchSelectorTrigger'
import { useBranchesQuery } from '@/data/branches/branches-query'
import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { IS_PLATFORM } from '@/lib/constants'

export function ProjectBranchSelector() {
  const router = useRouter()
  const { ref } = useParams()
  const { data: selectedOrganization } = useSelectedOrganizationQuery()
  const { data: project, isPending: isLoadingProject } = useSelectedProjectQuery()

  const isBranch = project?.parentRef !== project?.ref
  const isProductionBranch = !isBranch
  const { data: parentProject } = useProjectDetailQuery(
    { ref: project?.parent_project_ref },
    { enabled: isBranch }
  )
  const displayProject = parentProject ?? project

  const [open, setOpen] = useState(false)

  const isBranchingEnabled = project?.is_branch_enabled === true
  const { data: branches } = useBranchesQuery(
    { projectRef: project?.parent_project_ref || ref },
    { enabled: open && Boolean(project) }
  )

  const selectedBranch = branches?.find((b) => b.project_ref === ref)
  const { isMainBranch, branchDisplayName, selectedOrgInitial, organizationHref } =
    getProjectBranchSelectorState({
      selectedBranch,
      isBranchingEnabled,
      selectedOrganization: selectedOrganization ?? undefined,
    })

  const goToOrganization = () => {
    setOpen(false)
    router.push(organizationHref)
  }

  const isMobile = useBreakpoint('md')

  if (isLoadingProject || !displayProject)
    return <ShimmeringLoader className="w-[120px] ml-1 md:py-3" />

  if (!IS_PLATFORM) {
    return (
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton className="grid flex-1 text-left text-sm leading-tight text-foreground">
            <span className="truncate">{displayProject.name}</span>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    )
  }

  const triggerProps = {
    displayProjectName: displayProject.name,
    selectedOrgInitial,
    isBranch,
    isProductionBranch,
    branchDisplayName,
    onGoToOrganization: goToOrganization,
  }

  if (isMobile) {
    return (
      <>
        <ProjectBranchSelectorTrigger {...triggerProps} onClick={() => setOpen(true)} />
        <ProjectBranchSelectorSheet
          open={open}
          onOpenChange={setOpen}
          selectedRef={ref}
          onClose={() => setOpen(false)}
          selectedOrganization={selectedOrganization ?? null}
          displayProject={displayProject ?? null}
          selectedBranch={selectedBranch ?? null}
          isMainBranch={isMainBranch}
        />
      </>
    )
  }

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <Popover open={open} onOpenChange={setOpen} modal={false}>
          <PopoverTrigger asChild>
            <ProjectBranchSelectorTrigger {...triggerProps} />
          </PopoverTrigger>
          <PopoverContent className="p-0 w-[780px]" side="bottom" align="start">
            <ProjectBranchSelectorPopover onClose={() => setOpen(false)} />
          </PopoverContent>
        </Popover>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}