import {
  messageItemPopoverStore,
  messageItemPopoverStoreActions,
} from '../store';
import { PopoverDetail } from '../types';
import { useSelectedFieldStore } from './useSelectedFieldStore';

export type UseMessageItemPopoverArg = {
  messageId?: string;
};

export function useMessageItemPopover(arg: UseMessageItemPopoverArg = {}) {
  const { messageId } = arg;
  const popoverDetail = useSelectedFieldStore<
    typeof messageItemPopoverStore,
    PopoverDetail | null
  >(messageItemPopoverStore, () =>
    messageItemPopoverStore.get().messageId === messageId
      ? messageItemPopoverStore.get()
      : null
  );

  return {
    popoverDetail,
    showPopover: messageItemPopoverStoreActions.showPopover,
    hidePopover: messageItemPopoverStoreActions.hidePopover,
  };
}