import React , { useState , useMemo , createContext , useContext } from 'react' ; import { FluentThemeProvider , lightTheme , darkTheme } from '@internal/react-components' ; import { Theme , PartialTheme } from '@fluentui/react' ; /**
 * A theme with an associated name.
 */ type NamedTheme = { /** assigned name of theme */ name : string ; /** theme used for applying to components */ theme : PartialTheme | Theme ; } ; /**
 * Collection of NamedThemes
 */ type ThemeCollection = Record < string , NamedTheme > ; const defaultThemes = { Light : { name : 'Light' , theme : lightTheme } , Dark : { name : 'Dark' , theme : darkTheme } } ; /**
 * Interface for React useContext hook containing the FluentTheme and a setter to switch themes
 */ interface SwitchableFluentThemeContext { defaultValue currentTheme : NamedTheme ; defaultValue currentRtl : boolean ; /**
     * Setter for the current theme.
     * If this the doesn't already exist in the theme context this will
     * add that theme to the store.
     */ setCurrentTheme : ( namedTheme : NamedTheme ) => void ; /**
     * Setter for the current rtl.
     */ setCurrentRtl : ( rtl : boolean ) => void ; defaultValue themeStore : ThemeCollection ; } const LOCAL_STORAGE_KEY_PREFIX = 'AzureCommunicationUI_Theme' ; /**
 * Function to get theme from LocalStorage
 */ const getThemeFromLocalStorage = ( scopeId ) : string | null => window . localStorage . getItem ( LOCAL_STORAGE_KEY_PREFIX + '_' + scopeId ) ; /**
 * Function to save theme to LocalStorage
 */ const saveThemeToLocalStorage = ( theme , scopeId ) : void => window . localStorage . setItem ( LOCAL_STORAGE_KEY_PREFIX + '_' + scopeId , theme ) ; const defaultTheme = defaultThemes . Light ; /**
 * React useContext for FluentTheme state of SwitchableFluentThemeProvider
 */ const SwitchableFluentThemeContext = createContext < SwitchableFluentThemeContext > ( { currentTheme : defaultTheme , currentRtl : false , setCurrentTheme : ( theme ) => { } , setCurrentRtl : ( rtl ) => { } , themeStore : defaultThemes } ) ; /**
 * Props for SwitchableFluentThemeProvider
 */ export interface SwitchableFluentThemeProviderProps { /** Children to be themed */ children : React . ReactNode ; /** Scope ID for context */ scopeId : string ; defaultValue themes ? : ThemeCollection ; } description param props remarks export const SwitchableFluentThemeProvider = ( props ) : JSX . Element => { const { children , scopeId } = props ; const [ themeStore , setThemeCollection ] = useState < ThemeCollection > ( props . themes ?? defaultThemes ) ; const themeFromStorage = getThemeFromLocalStorage ( scopeId ) ; const initialTheme = themeStore [ themeFromStorage || defaultTheme . name ] ?? defaultTheme ; const [ currentTheme , _setCurrentTheme ] = useState < NamedTheme > ( initialTheme ) ; const [ currentRtl , _setCurrentRtl ] = useState < boolean > ( false ) ; const state = useMemo < SwitchableFluentThemeContext > ( ( ) => ( { currentTheme , setCurrentTheme : ( namedTheme ) : void => { _setCurrentTheme ( namedTheme ) ; if ( ! themeStore [ namedTheme . name ] ) { setThemeCollection ( { ... themeStore , namedTheme } ) ; } if ( typeof Storage !== 'undefined' ) { saveThemeToLocalStorage ( namedTheme . name , scopeId ) ; } } , currentRtl , setCurrentRtl : ( rtl ) : void => { _setCurrentRtl ( rtl ) ; } , themeStore } ) , [ currentTheme , currentRtl , scopeId , themeStore ] ) ; return ( < SwitchableFluentThemeContext . Provider value = { state } > < FluentThemeProvider fluentTheme = { currentTheme . theme } rtl = { currentRtl } > { children } < /FluentThemeProvider> < /SwitchableFluentThemeContext.Provider>); } ; /**
 * React hook for programmatically accessing the switchable fluent theme.
 */ export const useSwitchableFluentTheme = ( ) : SwitchableFluentThemeContext => useContext ( SwitchableFluentThemeContext ) ;