"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,
	limit,
	onLimitChange,
}) {
	const canSearch = typeof qDraft === "string" && qDraft.trim().length > 0;

	return (
		<div className="space-y-4">
			<form
				onSubmit={(e) => {
					e.preventDefault();
					if (!canSearch) return;
					onSubmit();
				}}
				className="space-y-3"
			>
				<SearchQueryBox
					qDraft={qDraft}
					onQDraftChange={onQDraftChange}
					onSubmit={onSubmit}
					currentQuery={currentQuery}
					isSubmitting={isSubmitting}
					canSearch={canSearch}
				/>

				<div className="flex flex-wrap items-center gap-2">
					{isAdminDev ? (
						<SearchScopeSelect
							branch={branch}
							scope={scope}
							onScopeChange={onScopeChange}
							isSubmitting={isSubmitting}
						/>
					) : null}

					{isAdminDev && scope === SEARCH_SCOPE.SINGLE ? (
						<SearchSingleBranchCombobox
							branch={branch}
							branchesStatus={branchesStatus}
							availableBranches={availableBranches}
							onSingleBranchChange={onSingleBranchChange}
							isSubmitting={isSubmitting}
						/>
					) : null}

					<SearchLimitSelect
						limit={limit}
						onLimitChange={onLimitChange}
						isSubmitting={isSubmitting}
					/>
				</div>
			</form>

			{isAdminDev && scope === SEARCH_SCOPE.MULTI ? (
				<SearchMultiBranchPicker
					branchesStatus={branchesStatus}
					availableBranches={availableBranches}
					selectedBranches={selectedBranches}
					onToggleBranch={onToggleBranch}
					isSubmitting={isSubmitting}
				/>
			) : null}
		</div>
	);
}