/**
 * Central z-index management for consistent stacking order
 * Higher numbers appear on top of lower numbers
 */

export const zIndexLayers = {
  // Base layer: Regular content
  base: {
    content: 'auto',
    inputElements: 1,
  },

  // Fixed UI elements
  fixed: {
    appBar: 10,
    sideMenu: 10,
    mobileNav: 250,
  },

  // Overlay backdrops (semi-transparent backgrounds)
  backdrop: {
    dropdown: 1999,  // Below modals but above fixed elements
    modal: 2999,     // Below dropdowns on modals
    contextMenu: 3999, // Below critical overlays
  },

  // Interactive overlays
  overlay: {
    dropdown: 2000,     // Dropdowns and select menus
    modal: 3000,        // Modal dialogs
    contextMenu: 4000,  // Context menus and tooltips
    toast: 5000,        // Toast notifications (highest priority)
  },

  // Special cases for nested elements
  modalDropdown: 3500,    // Dropdowns inside modals
  wysiwygMenus: 4500,     // Editor formatting menus
} as const;

// Helper function to get z-index value
export function getZIndex(category: keyof typeof zIndexLayers, subcategory?: string): number | string {
  const categoryObj = zIndexLayers[category];
  if (typeof categoryObj === 'object' && subcategory) {
    return categoryObj[subcategory as keyof typeof categoryObj] || 'auto';
  }
  return typeof categoryObj === 'number' ? categoryObj : 'auto';
}

// Z-index assignments for components
export const componentZIndex = {
  'dees-modal': zIndexLayers.overlay.modal,
  'dees-windowlayer': zIndexLayers.overlay.dropdown,
  'dees-contextmenu': zIndexLayers.overlay.contextMenu,
  'dees-toast': zIndexLayers.overlay.toast,
  'dees-appui-mainmenu': zIndexLayers.fixed.appBar,
  'dees-mobilenavigation': zIndexLayers.fixed.mobileNav,
  'dees-slash-menu': zIndexLayers.wysiwygMenus,
  'dees-formatting-menu': zIndexLayers.wysiwygMenus,
} as const;