"use client";

import "./MapSection.scss";
import { useEffect, useState } from "react";
import {
  ROAD_TYPES,
  ROAD_TYPES_COLORS,
} from "@/shared/variables/road-types";
import HomeMap from "./HomeMap/HomeMap";
import { useRouter } from "next/navigation";
import { useMapStore } from "./mapSectionStore";
import Switch from "./Switch/Switch";
import { useShallow } from "zustand/react/shallow";
import Typography from "@/shared/ui/components/Typography/Typography";
import Paragraph from "@/shared/ui/components/Paragraph/Paragraph";
import { useDebounce } from "use-debounce";
import MapSearch from "./MapSearch/MapSearch";

interface IMapSectionProps {
  [key: string]: string;
}

interface ILatLng {
  lat: number;
  lng: number;
}

const MapSection: React.FC<IMapSectionProps> = ({
  categories = "1,2,3,4,5,6",
  queryMap,
  queryRating,
}: IMapSectionProps) => {
  const [mapSearch, setMapSearch] = useState<string>(queryMap || "");
  const [latLng, setLatLng] = useState<ILatLng>({
    lat: 42.8746,
    lng: 74.606,
  });
  const [query] = useDebounce(mapSearch, 500);
  const data = useMapStore(useShallow((state) => state.data));
  const searchedData = useMapStore(
    useShallow((state) => state.searchData)
  );

  const getReports = useMapStore(
    useShallow((state) => state.getReports)
  );
  const getLocations = useMapStore(
    useShallow((state) => state.getLocations)
  );
  const router = useRouter();

  useEffect(() => {
    getReports(categories);
  }, [categories]);

  useEffect(() => {
    router.push(
      `/?тип-дороги=${categories}${
        mapSearch ? `&поиск-на-карте=${mapSearch}` : ""
      }${queryRating ? `&поиск-рейтинг=${queryRating}` : ""}`,
      {
        scroll: false,
      }
    );

    getLocations(query);
  }, [categories, query, queryRating]);

  const setSearchParams = (category: string) => {
    const availableCategories = ["1", "2", "3", "4", "5", "6"];

    if (!categories || !availableCategories.includes(category))
      return categories;

    if (categories?.includes(category)) {
      const updatedCategories = categories
        ?.replace(category + ",", "")
        .replace("," + category, "")
        .replace(category, "");

      return updatedCategories;
    } else {
      const newValue = category + ",";
      const updatedCategories = newValue + categories;
      return updatedCategories;
    }
  };

  return (
    <section className="map-section">
      <div className="map-section__header">
        <Typography element="h3">Карта дорог</Typography>
        <Paragraph>
          Будьте в курсе последних новостей о дорожном движении,
          строительствах и мероприятиях!
        </Paragraph>
      </div>

      <MapSearch
        setLatLng={setLatLng}
        setMapSearch={setMapSearch}
        options={searchedData}
        onChange={(e) => setMapSearch(e.target.value)}
        name="map-search"
        value={mapSearch}
        placeholder="Введите город, село или регион"
      />
      <div className="map-section__categories">
        <ul className="map-section__categories_left">
          {[1, 2, 3].map((sw) => (
            <li key={sw}>
              <Switch
                href={`/?тип-дороги=${setSearchParams(
                  sw.toString()
                )}`}
                color={ROAD_TYPES_COLORS[sw]}
                defaultState={categories.includes(sw.toString())}
              />
              <label>{ROAD_TYPES[sw]}</label>
            </li>
          ))}
        </ul>
        <ul className="map-section__categories_right">
          {[4, 5, 6].map((sw) => (
            <li key={sw}>
              <Switch
                href={`/?тип-дороги=${setSearchParams(
                  sw.toString()
                )}`}
                color={ROAD_TYPES_COLORS[sw]}
                defaultState={categories.includes(sw.toString())}
              />
              <label>{ROAD_TYPES[sw]}</label>
            </li>
          ))}
        </ul>
      </div>

      <HomeMap data={data?.results} latLng={latLng} />
    </section>
  );
};

export default MapSection;