import React , { PropsWithChildren , useState , useCallback , useRef , useEffect } from "react" ; import { useClientEffect } from "../utils/hookts" ; import style from "./Theme.module.scss" ; import cs from "classnames" ; interface ISettingsProperties { darkTheme : boolean ; spaceBetweenCards : number ; displayPricesCard : boolean ; displayBurntCard : boolean ; displayInfosGenerativeCard : boolean ; displayInfosGentkCard : boolean ; borderWidthCards : number ; shadowCards : number ; hoverEffectCard : boolean ; } export interface ISettingsContext extends ISettingsProperties { update : ( key : keyof ISettingsProperties , value : any ) => void ; } const defaultProperties = { darkTheme : false , spaceBetweenCards : 30 , borderWidthCards : 3 , shadowCards : 19 , displayInfosGenerativeCard : true , displayInfosGentkCard : true , displayPricesCard : false , displayBurntCard : false , hoverEffectCard : true , } ; const defaultCtx = { ... defaultProperties , update : ( ) => { } } ; export const SettingsContext = React . createContext < ISettingsContext > ( defaultCtx ) ; export function SettingsProvider ( { children } ) { const [ context , setContext ] = useState < ISettingsContext > ( defaultCtx ) ; const ref = useRef < ISettingsContext > ( context ) ; const updateContext = ( ctx ) => { setContext ( ctx ) ; ref . current = ctx ; } ; const update = ( key , value ) => { const newContext = { ... ref . current , [ key ] : value } ; updateContext ( newContext ) ; localStorage . setItem ( "settings" , JSON . stringify ( newContext ) ) ; } ; useClientEffect ( ( ) => { const fromStorage = localStorage . getItem ( "settings" ) ; const values = fromStorage ? JSON . parse ( fromStorage ) : defaultProperties ; updateContext ( { ... defaultProperties , ... values , update } ) ; } , [ ] ) ; useEffect ( ( ) => { const root = document . documentElement ; root . style . setProperty ( "--cards-border-width" , `${ context . borderWidthCards }px` ) ; root . style . setProperty ( "--cards-shadow" , `${ context . shadowCards }px` ) ; root . style . setProperty ( "--cards-gap" , `${ context . spaceBetweenCards }px` ) ; } , [ context ] ) ; return ( < SettingsContext . Provider value = { context } > < div className = { cs ( style . root_wrapper , { "dark" : context . darkTheme } ) } > { children } < /div> < /SettingsContext.Provider>); }