CedarCopilot/cedar-mail

import { useQueryClient } from '@tanstack/react-query';
import { useCallback } from 'react';

import { useCedarStore } from '@/modules/store';

/**
 * The full-calendar overlay — the week grid that `GlobalCanvas` drops over the content area
 * when `activeCanvasId === 'calendar'` (see components/ui/GlobalCanvas.tsx).
 *
 * ONE toggle behind every way in: the global ⇧Q / 0 hotkeys and the /agent home's
 * "Full calendar" pill. The pill and the key have to be the same action — a pill that opened
 * the calendar a second, subtly different way is how the two drift apart.
 *
 * `/calendar` is excluded: that route already IS the calendar, so dropping the overlay on top
 * of it would only cover it with itself.
 */
export function useCalendarCanvasOverlay() {
  const navigationPage = useCedarStore((state) => state.navigation.page);
  const isGlobalCanvasOpen = useCedarStore((state) => state.isGlobalCanvasOpen);
  const activeCanvasId = useCedarStore((state) => state.activeCanvasId);
  const openGlobalCanvas = useCedarStore((state) => state.openGlobalCanvas);
  const closeGlobalCanvas = useCedarStore((state) => state.closeGlobalCanvas);
  const queryClient = useQueryClient();

  const isCalendarCanvasOpen = isGlobalCanvasOpen && activeCanvasId === 'calendar';

  const toggleCalendarCanvas = useCallback(() => {
    if (isCalendarCanvasOpen) {
      closeGlobalCanvas();
      return;
    }
    if (navigationPage === 'calendar') return;
    // The overlay renders whatever the events cache holds, so refetch on the way in rather
    // than opening onto a stale week.
    queryClient.invalidateQueries({ queryKey: [['calendar', 'listEvents']] });
    openGlobalCanvas('calendar');
  }, [
    isCalendarCanvasOpen,
    closeGlobalCanvas,
    navigationPage,
    queryClient,
    openGlobalCanvas,
  ]);

  return { isCalendarCanvasOpen, toggleCalendarCanvas };
}