RH-Lieferscheine/components/AdminSearchComponent.js

"use client";

import { useState, useEffect } from "react";
import { Input, Button, Spinner } from "@nextui-org/react";
import { BsFiletypePdf } from "react-icons/bs";
import { FcFolder } from "react-icons/fc";
import { useRouter, useSearchParams } from "next/navigation";

export default function AdminSearchComponent({ searchResults }) {
	const [query, setQuery] = useState("");
	const [loading, setLoading] = useState(false);
	const [hasSearched, setHasSearched] = useState(false);
	const router = useRouter();
	const searchParams = useSearchParams();

	useEffect(() => {
		if (searchParams.get("query")) {
			setLoading(false);
			setHasSearched(true);
		}
	}, [searchParams]);

	const handleSearch = () => {
		if (query) {
			setLoading(true);
			setHasSearched(false);
			router.push(`?query=${query}`);
		}
	};

	const handleKeyPress = (e) => {
		if (e.key === "Enter") {
			handleSearch();
		}
	};

	const formatSearchResult = (filePath) => {
		const pathSegments = filePath.split("\\");
		const fileName = pathSegments.pop();
		const folderPath = pathSegments.join("\\");

		return { folderPath, fileName, pathSegments };
	};

	const handleFolderClick = (pathSegments) => {
		const newPath = pathSegments.join("/");
		router.push(`/admin-view/${newPath}`);
	};

	return (
		<div>
			<div className="flex justify-center gap-4 mb-4">
				<Input
					clearable
					placeholder="Suchbegrif eingeben für Dateien aus dieser Niederlassung"
					value={query}
					onChange={(e) => setQuery(e.target.value)}
					onKeyPress={handleKeyPress}
					classNames={{
						label: "text-black/70",
						input: ["bg-white", "text-black", "placeholder:text-gray-500"],
						inputWrapper: ["shadow-md", "bg-white", "!cursor-text"],
					}}
				/>
				<Button auto onPress={handleSearch} disabled={loading} color="primary">
					Suchen
				</Button>
			</div>
			{loading && (
				<div className="flex justify-center mt-24">
					<Spinner
						size="lg"
						label="Alle Dokumente werden durchgesucht. Das kann einen Moment dauern"
						color="primary"
						labelColor="foreground"
					/>
				</div>
			)}
			{!loading && hasSearched && searchResults && searchResults.length > 0 ? (
				<div className="mt-10 flex flex-wrap gap-4 ps-4">
					{searchResults.map((filePath, index) => {
						const { folderPath, fileName, pathSegments } =
							formatSearchResult(filePath);
						return (
							<div
								key={index}
								className="p-4 border rounded-lg shadow-md flex flex-col w-auto max-w-full bg-slate-100"
							>
								<div
									className="flex items-center cursor-pointer hover:bg-sky-200 p-2 rounded-md overflow-x-auto break-words"
									onClick={() => handleFolderClick(pathSegments)}
								>
									<FcFolder className="mr-2 text-2xl flex-shrink-0" />
									<span className="text-left text-sm text-stone-950">
										{folderPath}
									</span>
								</div>
								<div className="flex items-center mt-2">
									<a
										href={`/api/files/${filePath}`}
										target="_blank"
										rel="noopener noreferrer"
										className="flex items-center hover:bg-sky-200 p-2 rounded-md cursor-pointer overflow-x-auto break-words"
									>
										<BsFiletypePdf className="text-red-500 mr-2 text-xl flex-shrink-0" />
										<span className="text-left text-sm text-stone-950">
											{fileName}
										</span>
									</a>
								</div>
							</div>
						);
					})}
				</div>
			) : (
				!loading &&
				hasSearched && <p className="mt-4 text-sm">Keine Treffer gefunden.</p>
			)}
		</div>
	);
}