kgroad-frontend2/src/widgets/home/MapSection/MapSearch/MapSearch.tsx

"use client";

import "./MapSearch.scss";
import Image from "next/image";
import search from "./icons/search.svg";
import { useMapStore } from "../mapSectionStore";
import { useEffect, useState } from "react";
import { useDebounce } from "use-debounce";
import { useRouter } from "@/shared/config/navigation";
import { useTranslations } from "next-intl";

interface IMapSearchProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  searchParams: {
    ["тип-дороги"]: string;
    ["поиск-на-карте"]: string;
    ["поиск-рейтинг"]: string;
    ["страница-рейтинга"]: string;
  };
}

const MapSearch: React.FC<IMapSearchProps> = ({
  searchParams,
  placeholder,
}: IMapSearchProps) => {
  const t = useTranslations("general");
  const router = useRouter();
  const [searchMap, setSearchMap] = useState<string>(
    searchParams["поиск-на-карте"] || ""
  );
  const [query] = useDebounce(searchMap, 500);

  const {
    setLatLng,
    searchData: options,
    getLocations,
    setDisplayLocation,
  } = useMapStore();

  const handleSubmit = (
    display_name: string,
    latLng: { lat: number; lng: number }
  ) => {
    setSearchMap(display_name);
    setDisplayLocation(display_name);
    setLatLng(latLng);

    window.scrollTo({
      top: 1400,
      behavior: "smooth",
    });
  };

  useEffect(() => {
    getLocations(searchMap);

    router.push(
      `?тип-дороги=${
        searchParams["тип-дороги"] || "1,2,3,4,5,6"
      }&поиск-на-карте=${searchMap}&поиск-рейтинг=${
        searchParams["поиск-рейтинг"] || ""
      }&страница-рейтинга=${searchParams["страница-рейтинга"] || ""}`,
      { scroll: false }
    );
  }, [query]);

  return (
    <div className="map-search">
      <form
        onSubmit={(e: React.MouseEvent<HTMLFormElement>) => {
          e.preventDefault();
          handleSubmit(options[0].display_name, {
            lat: +options[0].lat,
            lng: +options[0].lon,
          });
        }}
      >
        <div className="map-search__input">
          <Image src={search} alt="Search Icon" />
          <input
            value={searchMap}
            placeholder={placeholder}
            onChange={(e) => setSearchMap(e.target.value)}
            name="map-search"
            type="text"
          />
        </div>
        <button type="submit">{t("search")}</button>
      </form>

      {options.length !== 0 ? (
        <div className="map-search__recs">
          <ul>
            {options.map((opt) => (
              <li key={opt.place_id}>
                <button
                  onClick={() => {
                    setSearchMap(opt.display_name);
                    setDisplayLocation(opt.display_name);
                    setLatLng({
                      lat: +opt.lat,
                      lng: +opt.lon,
                    });
                    window.scrollTo({
                      top: 1400,
                      behavior: "smooth",
                    });
                  }}
                >
                  {opt.display_name}
                </button>
              </li>
            ))}
          </ul>
        </div>
      ) : null}
    </div>
  );
};

export default MapSearch;