NeoScan_Radiologist/app/modules/Dashboard/redux/uiSlice.ts

/*
 * File: uiSlice.ts
 * Description: UI state management slice
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

// ============================================================================
// UI STATE INTERFACE
// ============================================================================

/**
 * UI State Interface
 * 
 * Purpose: Define the structure of UI state
 * 
 * Features:
 * - Loading states for different UI components
 * - Modal and overlay management
 * - Navigation state
 * - Theme and appearance settings
 * - User interaction states
 */
interface UIState {
  // Loading states
  isLoading: boolean;
  loadingMessage: string | null;
  
  // Modal states
  isModalOpen: boolean;
  modalType: string | null;
  modalData: any;
  
  // Overlay states
  isOverlayVisible: boolean;
  overlayType: string | null;
  
  // Navigation states
  currentScreen: string | null;
  navigationStack: string[];
  
  // Theme and appearance
  isDarkMode: boolean;
  fontSize: 'small' | 'medium' | 'large';
  highContrast: boolean;
  
  // User interaction states
  isRefreshing: boolean;
  isScrolling: boolean;
  lastInteraction: Date | null;
  
  // Error states
  hasError: boolean;
  errorMessage: string | null;
  errorType: 'warning' | 'error' | 'info' | null;
}

// ============================================================================
// INITIAL STATE
// ============================================================================

/**
 * Initial UI State
 * 
 * Purpose: Define the initial state for UI
 * 
 * Features:
 * - Default loading states
 * - Default modal and overlay states
 * - Default theme settings
 * - Default interaction states
 */
const initialState: UIState = {
  // Loading states
  isLoading: false,
  loadingMessage: null,
  
  // Modal states
  isModalOpen: false,
  modalType: null,
  modalData: null,
  
  // Overlay states
  isOverlayVisible: false,
  overlayType: null,
  
  // Navigation states
  currentScreen: null,
  navigationStack: [],
  
  // Theme and appearance
  isDarkMode: false,
  fontSize: 'medium',
  highContrast: false,
  
  // User interaction states
  isRefreshing: false,
  isScrolling: false,
  lastInteraction: null,
  
  // Error states
  hasError: false,
  errorMessage: null,
  errorType: null,
};

// ============================================================================
// UI SLICE
// ============================================================================

/**
 * UI Slice
 * 
 * Purpose: Redux slice for UI state management
 * 
 * Features:
 * - Loading state management
 * - Modal and overlay control
 * - Navigation state tracking
 * - Theme and appearance settings
 * - User interaction tracking
 * - Error state management
 */
const uiSlice = createSlice({
  name: 'ui',
  initialState,
  reducers: {
    /**
     * Set Loading Action
     * 
     * Purpose: Set loading state with optional message
     */
    setLoading: (state, action: PayloadAction<{ isLoading: boolean; message?: string }>) => {
      state.isLoading = action.payload.isLoading;
      state.loadingMessage = action.payload.message || null;
    },
    
    /**
     * Show Modal Action
     * 
     * Purpose: Show a modal with specific type and data
     */
    showModal: (state, action: PayloadAction<{ type: string; data?: any }>) => {
      state.isModalOpen = true;
      state.modalType = action.payload.type;
      state.modalData = action.payload.data || null;
    },
    
    /**
     * Hide Modal Action
     * 
     * Purpose: Hide the current modal
     */
    hideModal: (state) => {
      state.isModalOpen = false;
      state.modalType = null;
      state.modalData = null;
    },
    
    /**
     * Show Overlay Action
     * 
     * Purpose: Show an overlay with specific type
     */
    showOverlay: (state, action: PayloadAction<{ type: string }>) => {
      state.isOverlayVisible = true;
      state.overlayType = action.payload.type;
    },
    
    /**
     * Hide Overlay Action
     * 
     * Purpose: Hide the current overlay
     */
    hideOverlay: (state) => {
      state.isOverlayVisible = false;
      state.overlayType = null;
    },
    
    /**
     * Set Current Screen Action
     * 
     * Purpose: Set the current screen name
     */
    setCurrentScreen: (state, action: PayloadAction<string>) => {
      state.currentScreen = action.payload;
      if (!state.navigationStack.includes(action.payload)) {
        state.navigationStack.push(action.payload);
      }
    },
    
    /**
     * Clear Navigation Stack Action
     * 
     * Purpose: Clear the navigation stack
     */
    clearNavigationStack: (state) => {
      state.navigationStack = [];
    },
    
    /**
     * Toggle Dark Mode Action
     * 
     * Purpose: Toggle dark mode on/off
     */
    toggleDarkMode: (state) => {
      state.isDarkMode = !state.isDarkMode;
    },
    
    /**
     * Set Font Size Action
     * 
     * Purpose: Set the font size preference
     */
    setFontSize: (state, action: PayloadAction<'small' | 'medium' | 'large'>) => {
      state.fontSize = action.payload;
    },
    
    /**
     * Toggle High Contrast Action
     * 
     * Purpose: Toggle high contrast mode
     */
    toggleHighContrast: (state) => {
      state.highContrast = !state.highContrast;
    },
    
    /**
     * Set Refreshing Action
     * 
     * Purpose: Set refreshing state
     */
    setRefreshing: (state, action: PayloadAction<boolean>) => {
      state.isRefreshing = action.payload;
    },
    
    /**
     * Set Scrolling Action
     * 
     * Purpose: Set scrolling state
     */
    setScrolling: (state, action: PayloadAction<boolean>) => {
      state.isScrolling = action.payload;
    },
    
    /**
     * Update Last Interaction Action
     * 
     * Purpose: Update the last interaction timestamp
     */
    updateLastInteraction: (state) => {
      state.lastInteraction = new Date();
    },
    
    /**
     * Show Error Action
     * 
     * Purpose: Show an error message
     */
    showError: (state, action: PayloadAction<{ message: string; type?: 'warning' | 'error' | 'info' }>) => {
      state.hasError = true;
      state.errorMessage = action.payload.message;
      state.errorType = action.payload.type || 'error';
    },
    
    /**
     * Clear Error Action
     * 
     * Purpose: Clear the current error
     */
    clearError: (state) => {
      state.hasError = false;
      state.errorMessage = null;
      state.errorType = null;
    },
    
    /**
     * Reset UI State Action
     * 
     * Purpose: Reset UI state to initial values
     */
    resetUIState: (state) => {
      state.isLoading = false;
      state.loadingMessage = null;
      state.isModalOpen = false;
      state.modalType = null;
      state.modalData = null;
      state.isOverlayVisible = false;
      state.overlayType = null;
      state.isRefreshing = false;
      state.isScrolling = false;
      state.hasError = false;
      state.errorMessage = null;
      state.errorType = null;
    },
  },
});

// ============================================================================
// EXPORTS
// ============================================================================

export const {
  setLoading,
  showModal,
  hideModal,
  showOverlay,
  hideOverlay,
  setCurrentScreen,
  clearNavigationStack,
  toggleDarkMode,
  setFontSize,
  toggleHighContrast,
  setRefreshing,
  setScrolling,
  updateLastInteraction,
  showError,
  clearError,
  resetUIState,
} = uiSlice.actions;

export default uiSlice.reducer;

/*
 * End of File: uiSlice.ts
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */