infoalloggi-monorepo/apps/infoalloggi/src/components/codiceRicerca.tsx

"use client";
import { CircleOff } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useRef, useState } from "react";
import Input from "~/components/custom_ui/input";
import { StaggeredFade } from "~/components/custom_ui/staggered-fade";
import { useClickOutside } from "~/hooks/useClickOutside";
import { cn } from "~/lib/utils";
import { useTranslation } from "~/providers/I18nProvider";
import { api } from "~/utils/api";

export const CodiceBox = ({
	className,
	optionBoxClassName,
	optionsClassName,
	containerClassName,
}: {
	className?: string;
	optionBoxClassName?: string;
	optionsClassName?: string;
	containerClassName?: string;
}) => {
	const { data: codici, isLoading: loading } = api.annunci.getCodici.useQuery();
	const { locale } = useTranslation();

	return (
		<AutocompleteSearchBox
			key={locale}
			options={codici || []}
			loading={loading}
			className={className}
			optionBoxClassName={optionBoxClassName}
			optionsClassName={optionsClassName}
			containerClassName={containerClassName}
		/>
	);
};

type SearchBoxProps = {
	options: string[];
	loading: boolean;
	className?: string;
	optionBoxClassName?: string;
	optionsClassName?: string;
	containerClassName?: string;
};

const AutocompleteSearchBox = ({
	options,
	loading,
	className,
	optionBoxClassName,
	optionsClassName,
	containerClassName,
}: SearchBoxProps) => {
	const router = useRouter();
	const [open, setOpen] = useState<boolean>(false);
	const [results, setResults] = useState<string[]>(options);
	const [isFocused, setIsFocused] = useState<boolean>(false);
	const [searchValue, setSearchValue] = useState<string>("");
	const [navigationEnter, setNavigationEnter] = useState<boolean>(false);

	const wrapperRef = useRef<HTMLDivElement | null>(null);
	const listRef = useRef<HTMLDivElement | null>(null);

	useClickOutside([wrapperRef, listRef], () => setOpen(false));

	useEffect(() => {
		if (searchValue.trim() === "" || searchValue.length === 0) {
			setResults(options);
		} else {
			setResults(
				options.filter((option) => option.includes(searchValue.trim())),
			);
		}
	}, [searchValue, options]);

	return (
		<div ref={wrapperRef} className="z-[5000] w-full">
			<div
				className={cn(
					"relative flex w-full items-center justify-center rounded-md bg-white",
					containerClassName,
				)}
			>
				<label htmlFor="search" className="sr-only">
					Search Box
				</label>
				<Input
					id="search"
					type="search"
					value={searchValue}
					onChange={(e) => setSearchValue(e.target.value)}
					onFocus={() => {
						setOpen(true);
						setIsFocused(true);
					}}
					onBlur={() => {
						setIsFocused(false);
					}}
					onKeyDown={async (e) => {
						if (e.key === "Enter" && results[0] && results.length > 0) {
							setNavigationEnter(true);
							await router.push(`/annuncio/${results[0].trim()}`);
						}
					}}
					className={cn(
						"placeholder:text-primary search-cancel:brightness-75 search-cancel:grayscale z-10 cursor-pointer rounded-md bg-transparent text-xl placeholder:font-bold",
						className,
					)}
				/>
				<MovingText hidden={isFocused || searchValue !== ""} />
			</div>
			{open && (
				<div
					ref={listRef}
					className={cn(
						"border-foreground ring-foreground absolute z-50 mt-1 max-h-64 w-full overflow-hidden rounded-md border bg-white shadow-xs ring-1",
						optionBoxClassName,
					)}
				>
					<ul
						className={cn(
							"max-h-64 w-full overflow-y-auto",
							navigationEnter &&
								"[&>li:first-child>a]:bg-neutral-100 [&>li:first-child>a]:underline [&>li:first-child>a]:underline-offset-2",
						)}
						// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: <need list>
						role="listbox"
					>
						{loading ? (
							<li className={"px-3 py-2 text-center text-xl text-neutral-600"}>
								<span>Caricamento...</span>
							</li>
						) : (
							<>
								{results.length === 0 && (
									<li
										className={"px-3 py-2 text-center text-xl text-neutral-600"}
									>
										<span>
											<CircleOff className="inline size-6" />
										</span>
									</li>
								)}

								{results.map((item) => (
									<li key={item}>
										<Link
											href={`/annuncio/${item}`}
											className={cn(
												"flex w-full cursor-pointer items-center justify-between border-b border-neutral-200 bg-white px-4 py-2 text-xl text-neutral-500 duration-150 hover:bg-neutral-100 hover:text-neutral-600 hover:underline hover:underline-offset-2",
												optionsClassName,
											)}
										>
											{item}
										</Link>
									</li>
								))}
							</>
						)}
					</ul>
				</div>
			)}
		</div>
	);
};

const MovingText = ({ hidden }: { hidden: boolean }) => {
	const { t } = useTranslation();

	const [randomFrase, setRandomFrase] = useState<string>(
		// biome-ignore lint/style/noNonNullAssertion: <exists>
		t.code_search_frases[0]!,
	);
	useEffect(() => {
		const interval = setInterval(() => {
			const randomIndex = Math.floor(
				Math.random() * t.code_search_frases.length,
			);
			// biome-ignore lint/style/noNonNullAssertion: <exists>
			setRandomFrase(t.code_search_frases[randomIndex]!);
		}, 5000);

		return () => clearInterval(interval);
	}, [t]);

	return (
		<StaggeredFade
			key={randomFrase}
			text={randomFrase}
			className="absolute text-2xl font-bold dark:text-neutral-800"
			hide={hidden}
		/>
	);
};