import { useCallback } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { useContextSelector } from '@/hooks/useContextSelector';

import { ClipBrowserRegistryContext } from './useClipBrowserRegistry';

export default function useClipChanges() {
  const { clips: clipsStore } = useStores();
  const clipChanged = useContextSelector(
    ClipBrowserRegistryContext,
    (context) => context.clipChanged
  );

  const setClipLiked = useCallback(
    async (clipId: string, liked: boolean) => {
      // await after the `clipChanged` call to update UI asap
      const promise = clipsStore.likeClip(clipId, liked);
      clipChanged(clipsStore.clipById[clipId]);
      await promise;
    },
    [clipsStore]
  );

  const setClipDisliked = useCallback(
    async (clipId: string, disliked: boolean) => {
      // await after the `clipChanged` call to update UI asap
      const promise = clipsStore.dislikeClip(clipId, disliked);
      clipChanged(clipsStore.clipById[clipId]);
      await promise;
    },
    [clipsStore]
  );

  const incrementClipPlayCount = useCallback(
    (clipId: string) => {
      const clip = clipsStore.clipById[clipId];
      if (clip) {
        clip.play_count = (clip.play_count || 0) + 1;
        clipChanged(clip);
      }
    },
    [clipsStore.clipById]
  );
  return { setClipLiked, setClipDisliked, incrementClipPlayCount };
}