'use client';

import MapWrapper from '@/components/shared/map/map-wrapper';
import { TopicsEnum } from '@/config/enums';
import { api } from '@/lib/trpc/client';
import { useSearchParams } from 'next/navigation';
import { useMemo } from 'react';
import { initialBounds, sponsored } from '../_constants/map-options';

export default function MainMap() {
  const searchParams = useSearchParams();

  const topic = useMemo(() => {
    const filters = searchParams?.get('filters');
    if (!filters) return undefined;
    const filtered = filters.split(',').filter((item) => item !== sponsored);
    return !!filtered.length ? (filtered as TopicsEnum[]) : undefined;
  }, [searchParams]);

  const isSponsored = useMemo(() => {
    const filters = searchParams?.get('filters');
    return !!filters?.includes(sponsored);
  }, [searchParams]);

  const { data: markers = [] } = api.posts.getGeolocations.useQuery({
    topic,
    notTopic: [TopicsEnum.REVIEWS],
    isSponsored,
    bounds: initialBounds
  });

  return <MapWrapper data={markers} popupType='large' />;
}