import { useUpdateTheme } from "../pages/_app"; import { useContext, useState } from 'react'; import { ThemeContext, DefaultTheme } from "styled-components"; import { darkTheme, lightTheme } from './themes'; import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownOptions } from "./styles/themedropdown/desktop"; import { ThemeDropDownMobile, ThemeDropDownButtonMobile, ThemeDropDownOptionMobile, ThemeDropDownOptionsMobile } from "./styles/themedropdown/mobile"; import Themes from '../public/data/themes.json'; export const StyleSelector = ({ mobile }: { mobile: number }) => { const themes: DefaultTheme[] = Themes.themes; const updateTheme = useUpdateTheme(); const currentTheme = useContext(ThemeContext); const [selectedTheme, setSelectedTheme] = useState(themes[currentTheme.themeId]); if(currentTheme !== selectedTheme) { setSelectedTheme(currentTheme); } const updateThemeWithStorage = (newTheme: DefaultTheme) => { if (newTheme.themeId === lightTheme.themeId) { updateLightTheme(newTheme); } else { setSelectedTheme(newTheme); localStorage.setItem("theme", newTheme.themeId.toString()); updateTheme(newTheme); } } const updateLightTheme = (newTheme: DefaultTheme) => { if (confirm("Really switch to Light Mode?")) { setSelectedTheme(newTheme); localStorage.setItem("theme", newTheme.themeId.toString()); updateTheme(newTheme) } } const [visible, setVisible] = useState(true); //DEBUG set to false const [buttonFocus, setButtonFocus] = useState(visible); function handleBlur(event:any) { if (!event.currentTarget.contains(event.relatedTarget)) { setButtonFocus(false); setVisible(false); } } let themeselector: JSX.Element; if(mobile) { themeselector = ( handleBlur(event)}> setButtonFocus(true)} onClick={() => setVisible(visible => !visible)}> {selectedTheme.themeName} {themes.map((theme) => ( updateThemeWithStorage(theme)}> {theme.themeName} ))} ); } else { themeselector = ( handleBlur(event)}> setButtonFocus(true)} onClick={() => setVisible(visible => !visible)}>{selectedTheme.themeName} {themes.map((theme) => ( updateThemeWithStorage(theme)}> {theme.themeName} ))} ); } return themeselector; } export const StyleSelectorPlaceholder = () => { return ( ) } export function getTheme(themeId: number, themes: DefaultTheme[]): DefaultTheme { let retTheme: DefaultTheme = darkTheme; themes.forEach((theme) => { if (theme.themeId === themeId) { retTheme = theme}; }) return retTheme; } export default StyleSelector;