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

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

export const CodiceBox = ({
  className,
  optionBoxClassName,
  optionsClassName,
}: {
  className?: string;
  optionBoxClassName?: string;
  optionsClassName?: 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}
    />
  );
};

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

const AutocompleteSearchBox = ({
  options,
  loading,
  className,
  optionBoxClassName,
  optionsClassName,
}: 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="relative flex w-full items-center justify-center rounded-md bg-white">
        <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",
            )}
            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>(
    t.code_search_frases[0]!,
  );
  useEffect(() => {
    const interval = setInterval(() => {
      const randomIndex = Math.floor(
        Math.random() * t.code_search_frases.length,
      );
      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}
    />
  );
};