rhl-lieferscheine/components/search/SearchForm.jsx

"use client";

import React from "react";

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

import SearchQueryBox from "@/components/search/form/SearchQueryBox";
import SearchScopeSelect from "@/components/search/form/SearchScopeSelect";
import SearchLimitSelect from "@/components/search/form/SearchLimitSelect";
import SearchSingleBranchCombobox from "@/components/search/form/SearchSingleBranchCombobox";
import SearchMultiBranchPicker from "@/components/search/form/SearchMultiBranchPicker";

export default function SearchForm({
	branch,
	qDraft,
	onQDraftChange,
	onSubmit,
	currentQuery,
	isSubmitting,
	isAdminDev,
	scope,
	onScopeChange,
	onSingleBranchChange,
	availableBranches,
	branchesStatus,
	selectedBranches,
	onToggleBranch,
	onClearAllBranches,
	limit,
	onLimitChange,
}) {
	const canSearch = typeof qDraft === "string" && qDraft.trim().length > 0;

	// RHL-038 UI behavior:
	// - Single scope shows an extra combobox (branch picker).
	// - Multi/All does not.
	// - We animate the combobox container (max-width/max-height/opacity) so the
	//   query block (input + search button) grows/shrinks smoothly.
	const showSingleBranchCombobox = Boolean(
		isAdminDev && scope === SEARCH_SCOPE.SINGLE
	);

	return (
		<div className="space-y-4">
			<form
				onSubmit={(e) => {
					e.preventDefault();
					if (!canSearch) return;
					onSubmit();
				}}
				className="space-y-4"
			>
				{/* 
					Layout goal:
					- Desktop: everything on one line (scope + optional single combobox | query | limit)
					- Mobile: stack to avoid horizontal overflow
				*/}
				<div className="flex flex-col gap-3 lg:flex-row items-start lg:flex-nowrap">
					{/* Left block: scope + (animated) single-branch combobox */}
					{isAdminDev ? (
						<div className="flex items-end shrink-0">
							<SearchScopeSelect
								branch={branch}
								scope={scope}
								onScopeChange={onScopeChange}
								isSubmitting={isSubmitting}
							/>

							{/* 
								Animated presence (no mount/unmount):
								- When hidden: max-w-0/max-h-0 + opacity-0 so it takes no space.
								- When shown: expands to a reasonable max size.
								This animation drives the smooth resize of the query input block.
							*/}
							<div
								className={[
									"overflow-hidden transition-all duration-200 ease-in-out",
									showSingleBranchCombobox
										? "ml-2 max-w-44 max-h-24 opacity-100"
										: "ml-0 max-w-0 max-h-0 opacity-0 pointer-events-none",
								].join(" ")}
								aria-hidden={showSingleBranchCombobox ? "false" : "true"}
							>
								<SearchSingleBranchCombobox
									branch={branch}
									branchesStatus={branchesStatus}
									availableBranches={availableBranches}
									onSingleBranchChange={onSingleBranchChange}
									// Disable when hidden so it can't be focused/clicked.
									isSubmitting={isSubmitting || !showSingleBranchCombobox}
								/>
							</div>
						</div>
					) : null}

					{/* Middle block: query must take the most space */}
					<div className="flex-1 min-w-0">
						<SearchQueryBox
							qDraft={qDraft}
							onQDraftChange={onQDraftChange}
							onSubmit={onSubmit}
							currentQuery={currentQuery}
							isSubmitting={isSubmitting}
							canSearch={canSearch}
						/>
					</div>

					{/* Right block: limit stays “content-sized” */}
					<div className="shrink-0">
						<SearchLimitSelect
							limit={limit}
							onLimitChange={onLimitChange}
							isSubmitting={isSubmitting}
						/>
					</div>
				</div>
			</form>

			{/* Multi scope branch picker remains below */}
			{isAdminDev && scope === SEARCH_SCOPE.MULTI ? (
				<SearchMultiBranchPicker
					branchesStatus={branchesStatus}
					availableBranches={availableBranches}
					selectedBranches={selectedBranches}
					onToggleBranch={onToggleBranch}
					onClearAllBranches={onClearAllBranches}
					isSubmitting={isSubmitting}
				/>
			) : null}
		</div>
	);
}