'use client';

import { TileLayer, MapContainer } from 'react-leaflet';
import { LatLngTuple } from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { PopupType } from '@/types/interfaces';
import MapMarker from './map-marker';
import { useCallback, useEffect } from 'react';
import MapPopup from './map-popup';
import { transformPostToArticle } from '@/features/posts/_lib/transformers';
import { api } from '@/lib/trpc/client';
import { AppRouterOutput } from '@/server/trpc/types';
import { useMapStore } from './map-store';
import MapBoundsWatcher from './map-bounds-watcher';
import { useRouter, useSearchParams } from 'next/navigation';

type Markers = NonNullable<AppRouterOutput['posts']['getGeolocations']>;

export default function MapComponent({
  data,
  popupType,
  disableMarkerClick
}: {
  data: Markers;
  popupType?: PopupType;
  disableMarkerClick?: boolean;
}) {
  const isSingleMarker = data.length === 1;
  const center = isSingleMarker ? [data[0].lat, data[0].lng] : [55.676, 12.564];
  const zoom = isSingleMarker ? 16 : 11;

  const { popupData, setPopupData, activeMarker, setActiveMarker, reset } =
    useMapStore();

  const utils = api.useUtils();

  const onMarkerClick = useCallback(
    async (marker: Markers[number]) => {
      setActiveMarker(marker);
      const response = await utils.posts.get.fetch({
        id: marker.id
      });
      if (!response) {
        reset();
        return;
      }
      setPopupData(transformPostToArticle(response));
    },
    [utils, reset, setPopupData, setActiveMarker]
  );

  const onPopupClose = () => reset();

  // preselect marker logic
  const router = useRouter();
  const searchParams = useSearchParams();

  useEffect(() => {
    const preselectId = searchParams?.get('preselectId');
    if (!preselectId || !data?.length || disableMarkerClick) return;

    const marker = data.find((item) => item.id === preselectId);
    if (!marker) return;

    onMarkerClick(marker);

    const params = new URLSearchParams(searchParams.toString());
    params.delete('preselectId');

    router.replace(`?${params.toString()}`, { scroll: false });
  }, [data, searchParams, onMarkerClick, router, disableMarkerClick]);

  return (
    <div className='relative z-1 size-full'>
      <MapContainer
        center={center as LatLngTuple}
        zoom={zoom}
        className='size-full'
        id='map_kbh'
      >
        <TileLayer
          url='https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
          subdomains={['a', 'b', 'c', 'd']}
        />
        <MapBoundsWatcher />
        {data.map((item, index) => (
          <MapMarker
            eventHandlers={{
              click() {
                onMarkerClick(item);
              }
            }}
            key={index}
            data={item}
            isActive={activeMarker?.id === item.id}
            disableMarkerClick={disableMarkerClick}
          />
        ))}
        {activeMarker && (
          <MapPopup
            data={popupData}
            popupType={popupType}
            onPopupClose={onPopupClose}
            position={[activeMarker.lat, activeMarker.lng] as LatLngTuple}
          />
        )}
      </MapContainer>
    </div>
  );
}