View Stacks Management

import { inject } from 'vue';

export default {
  setup() {
    const viewStacks = inject('viewStacks');
    // Use view stack methods...
  }
}

/**
 * Get the number of active view stacks
 * @returns Number of active stacks, indicates linear vs non-linear navigation
 */
size(): number;

/**
 * Get the view stack for a specific outlet
 * @param outletId - Outlet identifier
 * @returns Array of ViewItems in the stack or undefined
 */
getViewStack(outletId: number): ViewItem[] | undefined;

// Check navigation complexity
const stackCount = viewStacks.size();
if (stackCount > 1) {
  console.log('App is using non-linear navigation');
}

// Get views for specific outlet
const mainStack = viewStacks.getViewStack(0);
console.log('Main outlet has', mainStack?.length, 'views');

/**
 * Create a new view item for the navigation stack
 * @param outletId - Outlet identifier for the view
 * @param vueComponent - Vue component instance
 * @param matchedRoute - Matched route from Vue Router
 * @param routeInfo - Route information object
 * @param ionPage - Optional ion-page HTML element
 * @returns New ViewItem instance
 */
createViewItem(
  outletId: number,
  vueComponent: any,
  matchedRoute: RouteLocationMatched,
  routeInfo: RouteInfo,
  ionPage?: HTMLElement
): ViewItem;

/**
 * Add a view item to its corresponding stack
 * @param viewItem - ViewItem to add to the stack
 */
add(viewItem: ViewItem): void;

/**
 * Remove a view item from its stack
 * @param viewItem - ViewItem to remove
 * @param outletId - Optional outlet ID for the removal
 */
remove(viewItem: ViewItem, outletId?: number): void;

// Create and add a new view item
const viewItem = viewStacks.createViewItem(
  0, // main outlet
  componentInstance,
  matchedRoute,
  routeInfo
);

viewStacks.add(viewItem);

/**
 * Find view item by route information
 * @param routeInfo - Route information to search for
 * @param outletId - Optional outlet ID to limit search
 * @returns ViewItem if found, undefined otherwise
 */
findViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: number): ViewItem | undefined;

/**
 * Find view item by pathname
 * @param pathname - Route pathname to search for
 * @param outletId - Optional outlet ID to limit search
 * @returns ViewItem if found, undefined otherwise
 */
findViewItemByPathname(pathname: string, outletId?: number): ViewItem | undefined;

/**
 * Find the leaving view item based on route information
 * @param routeInfo - Route information for the leaving view
 * @param outletId - Optional outlet ID to limit search
 * @param mustBeIonRoute - Whether the view must be an Ionic route (default: true)
 * @returns ViewItem if found, undefined otherwise
 */
findLeavingViewItemByRouteInfo(
  routeInfo: RouteInfo,
  outletId?: number,
  mustBeIonRoute?: boolean
): ViewItem | undefined;

// Find view by current route
const currentView = viewStacks.findViewItemByRouteInfo(currentRouteInfo);

// Find view by pathname
const profileView = viewStacks.findViewItemByPathname('/profile');

// Find leaving view during navigation
const leavingView = viewStacks.findLeavingViewItemByRouteInfo(
  routeInfo,
  0, // main outlet
  true // must be Ionic route
);

/**
 * Get child views that should be rendered for an outlet
 * @param outletId - Outlet identifier
 * @returns Array of ViewItems that should be mounted
 */
getChildrenToRender(outletId: number): ViewItem[];

/**
 * Register an ion-page element with a view item
 * @param viewItem - ViewItem to register the page with
 * @param ionPage - HTML element representing the ion-page
 */
registerIonPage(viewItem: ViewItem, ionPage: HTMLElement): void;

/**
 * Clear all views from a specific outlet stack
 * @param outletId - Outlet identifier to clear
 */
clear(outletId: number): void;

// Get views to render in main outlet
const viewsToRender = viewStacks.getChildrenToRender(0);

// Register ion-page with view item
viewStacks.registerIonPage(viewItem, ionPageElement);

// Clear outlet when navigating away
viewStacks.clear(1); // Clear secondary outlet

/**
 * Unmount leaving views when navigating backwards
 * @param outletId - Outlet identifier
 * @param viewItem - Current view item
 * @param delta - Number of steps back (default: 1)
 */
unmountLeavingViews(outletId: number, viewItem: ViewItem, delta?: number): void;

/**
 * Mount intermediary views when navigating forward over multiple views
 * @param outletId - Outlet identifier  
 * @param viewItem - Current view item
 * @param delta - Number of steps forward (default: 1)
 */
mountIntermediaryViews(outletId: number, viewItem: ViewItem, delta?: number): void;

// Clean up when going back multiple pages
viewStacks.unmountLeavingViews(0, currentView, 2);

// Remount views when jumping forward in history
viewStacks.mountIntermediaryViews(0, currentView, 3);

// Tab 1 stack: outlet 0
// Tab 2 stack: outlet 1
// Modal stack: outlet 2

const tab1Views = viewStacks.getViewStack(0);
const tab2Views = viewStacks.getViewStack(1);
const modalViews = viewStacks.getViewStack(2);

console.log('Active stacks:', viewStacks.size()); // 3

const viewItem = viewStacks.findViewItemByPathname('/profile');
if (viewItem) {
  console.log('View mounted:', viewItem.mount);
  console.log('Is ionic route:', viewItem.ionRoute);
  console.log('Has ion-page:', !!viewItem.ionPageElement);
}

// Current stack: /home -> /list -> /detail -> /modal
// Going back to /home (delta = -3)

const currentView = viewStacks.findViewItemByPathname('/modal');
if (currentView) {
  // This will unmount /list, /detail, and /modal
  viewStacks.unmountLeavingViews(0, currentView, 3);
}