import { useMemo } from 'react';
import { IUserReactionCountDetail } from '@livelike/javascript';
import { UserReactionsForTargetId, userReactionStore } from '../store';
import { useReactionPacks } from './useReactionPacks';
import { useSelectedFieldStore } from './useSelectedFieldStore';

export type UserReactionState = IUserReactionCountDetail & {
  imageSrc: string;
};

export type UserReactionsForTargetIdState = {
  [key: string]: UserReactionState;
};

export type UseUserReactionsArg = {
  reactionSpaceId: string;
  targetId: string;
};

const initialUserReactionValue: UserReactionsForTargetId = {};

export function useUserReactions({
  reactionSpaceId,
  targetId,
}: UseUserReactionsArg) {
  const targetIdUserReactions = useSelectedFieldStore(
    userReactionStore,
    () =>
      userReactionStore.get()?.[reactionSpaceId]?.[targetId] ||
      initialUserReactionValue
  );

  const { reactionPacks } = useReactionPacks({ reactionSpaceId });

  const validUserReactions: UserReactionsForTargetIdState = useMemo(() => {
    if (!reactionPacks.length || !Object.keys(targetIdUserReactions).length) {
      return initialUserReactionValue as UserReactionsForTargetIdState;
    }
    return reactionPacks.reduce<UserReactionsForTargetIdState>(
      (_allReactions, pack) => {
        pack.emojis.forEach((emoji) => {
          if (targetIdUserReactions[emoji.id]) {
            _allReactions[emoji.id] = {
              ...targetIdUserReactions[emoji.id],
              imageSrc: emoji.file,
            };
          }
        });
        return _allReactions;
      },
      {}
    );
  }, [targetIdUserReactions, reactionPacks]);

  return {
    userReactions: validUserReactions,
  };
}