import { useCallback, useEffect } from 'react';
import {
  addReactionSpaceEventListener,
  ReactionSpaceEvent,
  removeReactionSpaceEventListener,
  userProfile,
} from '@livelike/javascript';
import { userReactionStoreActions } from '../store/userReaction';

export function useUserReactionsEffect({ reactionSpaceId }) {
  const addUserReaction = useCallback(
    (event) => {
      userReactionStoreActions.addUserReactionAction({
        reactionSpaceId,
        userReaction: event.message,
        profileId: userProfile.id,
      });
    },
    [reactionSpaceId]
  );

  const removeUserReaction = useCallback(
    (event) => {
      userReactionStoreActions.removeUserReactionAction({
        reactionSpaceId,
        userReaction: event.message,
        profileId: userProfile.id,
      });
    },
    [reactionSpaceId]
  );

  useEffect(() => {
    if (!reactionSpaceId) {
      return;
    }
    addReactionSpaceEventListener(
      {
        event: ReactionSpaceEvent.ADD_REACTION,
        reactionSpaceId,
      },
      addUserReaction
    );
    addReactionSpaceEventListener(
      {
        event: ReactionSpaceEvent.REMOVE_REACTION,
        reactionSpaceId,
      },
      removeUserReaction
    );
    return () => {
      removeReactionSpaceEventListener(
        {
          event: ReactionSpaceEvent.ADD_REACTION,
          reactionSpaceId,
        },
        addUserReaction
      );
      removeReactionSpaceEventListener(
        {
          event: ReactionSpaceEvent.REMOVE_REACTION,
          reactionSpaceId,
        },
        removeUserReaction
      );
    };
  }, [reactionSpaceId]);
}