import { Outlet } from "react-router"

import { ScopeChooser } from "@/components/scope-chooser"
import { useProduct } from "@/contexts/product-context"
import { useActiveScope } from "@/hooks/use-active-scope"
import { useAppStore } from "@/stores/app-store"

export function RequireProductScope() {
  const { product } = useProduct()
  const switching = useAppStore(s => s.productSwitching)
  const { status } = useActiveScope(product)

  if (switching) return null
  if (status === "open") return <Outlet />
  return <ScopeChooser product={product} />
}