import { useMutation, useQuery } from '@tanstack/react-query';

import { useClient } from 'pl-fe/hooks';
import { queryClient } from 'pl-fe/queries/client';

import type { Marker, PlApiClient } from 'pl-api';

type Timeline = 'home' | 'notifications';

const useMarker = (timeline: Timeline) => {
  const client = useClient();

  return useQuery({
    queryKey: ['markers', timeline],
    queryFn: () => client.timelines.getMarkers([timeline]).then(markers => markers[timeline]),
  });
};

const useUpdateMarkerMutation = (timeline: Timeline) => {
  const client = useClient();

  return useMutation({
    mutationFn: (lastReadId: string) => client.timelines.saveMarkers({
      [timeline]: {
        last_read_id: lastReadId,
      },
    }),
    retry: false,
    onMutate: (lastReadId) => queryClient.setQueryData<Marker>(['markers', timeline], (marker) => marker ? ({
      ...marker,
      last_read_id: lastReadId,
    }) : undefined),
  });
};

const prefetchMarker = (client: PlApiClient, timeline: 'home' | 'notifications') =>
  queryClient.prefetchQuery({
    queryKey: ['markers', timeline],
    queryFn: () => client.timelines.getMarkers([timeline]).then(markers => markers[timeline]),
  });

export { useMarker, prefetchMarker, useUpdateMarkerMutation };