import { useCallback, useEffect } from 'react';
import {
  getReactionSpaceDetail,
  getReactionPackDetail,
  IReactionSpace,
  addReactionSpaceEventListener,
  ReactionSpaceEvent,
  removeReactionSpaceEventListener,
} from '@livelike/javascript';
import { reactionPackStoreActions } from '../store/reactionPack';

const loadReactionPackFromReactionSpace = (reactionSpace: IReactionSpace) => {
  return Promise.all(
    reactionSpace.reaction_pack_ids.map((reactionPackId) =>
      getReactionPackDetail({ reactionPackId })
    )
  ).then((reactionPacks) => {
    reactionPackStoreActions.updateReactionPackAction({
      reactionSpaceId: reactionSpace.id,
      reactionPacks,
    });
  });
};

export type UseLoadReactionPackArg = {
  reactionSpaceId: string;
};

export function useLoadReactionPacksEffect({
  reactionSpaceId,
}: UseLoadReactionPackArg) {
  useEffect(() => {
    if (!reactionSpaceId) {
      return;
    }
    getReactionSpaceDetail({ reactionSpaceId }).then(
      loadReactionPackFromReactionSpace
    );
  }, [reactionSpaceId]);

  const reactionSpaceListener = useCallback(
    (event) => {
      return loadReactionPackFromReactionSpace(event.message);
    },
    [reactionSpaceId]
  );

  useEffect(() => {
    if (!reactionSpaceId) {
      return;
    }
    addReactionSpaceEventListener(
      { event: ReactionSpaceEvent.UPDATE_REACTION_SPACE, reactionSpaceId },
      reactionSpaceListener
    );
    return () => {
      removeReactionSpaceEventListener(
        { event: ReactionSpaceEvent.UPDATE_REACTION_SPACE, reactionSpaceId },
        reactionSpaceListener
      );
    };
  }, [reactionSpaceId]);
}