"use client";

import React from "react";
import { ChevronDown } from "lucide-react";

import { SEARCH_SCOPE } from "@/lib/frontend/search/urlState";

import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuLabel,
	DropdownMenuRadioGroup,
	DropdownMenuRadioItem,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

const SCOPE_LABELS = Object.freeze({
	[SEARCH_SCOPE.SINGLE]: "Diese Niederlassung",
	[SEARCH_SCOPE.MULTI]: "Mehrere Niederlassungen",
	[SEARCH_SCOPE.ALL]: "Alle Niederlassungen",
});

export default function SearchScopeSelect({
	branch,
	scope,
	onScopeChange,
	isSubmitting,
}) {
	const scopeLabel = SCOPE_LABELS[scope] || "Unbekannt";

	return (
		<div className="grid gap-2">
			<Label>Suchbereich</Label>

			<DropdownMenu>
				<DropdownMenuTrigger asChild>
					<Button
						type="button"
						variant="outline"
						disabled={isSubmitting}
						title="Suchbereich auswählen"
					>
						{scopeLabel}
						<ChevronDown className="h-4 w-4" />
					</Button>
				</DropdownMenuTrigger>

				<DropdownMenuContent align="start" className="min-w-[16rem]">
					<DropdownMenuLabel>Suchbereich</DropdownMenuLabel>
					<DropdownMenuSeparator />

					<DropdownMenuRadioGroup
						value={scope}
						onValueChange={(value) => onScopeChange(value)}
					>
						<DropdownMenuRadioItem value={SEARCH_SCOPE.SINGLE}>
							Diese Niederlassung ({branch})
						</DropdownMenuRadioItem>
						<DropdownMenuRadioItem value={SEARCH_SCOPE.MULTI}>
							Mehrere Niederlassungen
						</DropdownMenuRadioItem>
						<DropdownMenuRadioItem value={SEARCH_SCOPE.ALL}>
							Alle Niederlassungen
						</DropdownMenuRadioItem>
					</DropdownMenuRadioGroup>
				</DropdownMenuContent>
			</DropdownMenu>
		</div>
	);
}