import { reaction } from 'mobx';
import { useEffect } from 'react';

import { useFocusedObject } from '@/app/(root)/create/v2/useFocusedObject';

import { useStores } from '../app/(root)/AppProviders';

/**
 * Syncs playbar queue state with FocusedObjectPanel.
 * When queue button is clicked, opens queue in the focused object panel.
 * Preserves previous focused object (e.g., clip) when queue is toggled.
 * Must be called in the same component that calls useFocusedObject().
 */
export function useQueueFocusSync(
  focusedObjectContext: ReturnType<typeof useFocusedObject>
) {
  const { playbar } = useStores();
  const { setFocusedObject } = focusedObjectContext;

  useEffect(() => {
    // Sync initial state if queue is already open when component mounts
    if (playbar.showSongQueue === true) {
      const currentFocusedObject = focusedObjectContext.focusedObject;
      // If queue is already open, preserve its previous state; otherwise store current state
      if (currentFocusedObject?.type !== 'queue') {
        setFocusedObject({
          type: 'queue',
          previous: currentFocusedObject,
        });
      }
    }

    // Set up reaction to track future changes
    const disposer = reaction(
      () => playbar.showSongQueue,
      (showSongQueue) => {
        if (showSongQueue === true) {
          const currentFocusedObject = focusedObjectContext.focusedObject;
          // Open queue, storing what was open before (if not already queue)
          setFocusedObject({
            type: 'queue',
            previous:
              currentFocusedObject?.type !== 'queue'
                ? currentFocusedObject
                : undefined,
          });
        } else if (showSongQueue === false) {
          const currentFocusedObject = focusedObjectContext.focusedObject;
          // Restore previous focused object from queue state
          if (currentFocusedObject?.type === 'queue') {
            setFocusedObject(currentFocusedObject.previous);
          }
        }
      }
    );

    return disposer;
  }, [playbar, setFocusedObject, focusedObjectContext]);
}