import { getReactionSpaceDetail } from '@livelike/javascript';
import { useEffect } from 'react';
import {
  reactionSpaceStore,
  reactionSpaceStoreActions,
} from '../store/reactionSpace';
import { useStore } from './useStore';

export type UseReactionSpaceArg = {
  targetGroupId: string;
};

export function useReactionSpace({ targetGroupId }: UseReactionSpaceArg) {
  const reactionSpaceStoreValue = useStore(reactionSpaceStore);

  useEffect(() => {
    if (reactionSpaceStoreValue[targetGroupId]) {
      return;
    }
    getReactionSpaceDetail({
      targetGroupId,
    }).then((reactionSpace) => {
      reactionSpaceStoreActions.updateReactionSpaceAction({
        targetGroupId,
        reactionSpace,
      });
    });
  }, [targetGroupId]);

  return {
    reactionSpace: reactionSpaceStoreValue[targetGroupId],
  };
}