From d1dc7ceca7285b835d4641b9561d4d04a17ef30a Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Sun, 18 Dec 2022 00:40:24 +0100
Subject: [PATCH] Updated Theme Selector for use with dynamic themes

---
 components/themeselector.tsx | 54 ++++++++++--------------------------
 1 file changed, 15 insertions(+), 39 deletions(-)

diff --git a/components/themeselector.tsx b/components/themeselector.tsx
index 8db0066..f395038 100644
--- a/components/themeselector.tsx
+++ b/components/themeselector.tsx
@@ -1,17 +1,12 @@
 import { useUpdateTheme } from "../pages/_app";
-import { Fragment, useContext, useState } from 'react';
+import { useContext, useState } from 'react';
 import { ThemeContext, DefaultTheme } from "styled-components";
-import { darkTheme, amoledTheme, lightTheme, amoled2Theme } from './themes';
+import { darkTheme, lightTheme } from './themes';
 import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownOptions } from "./styles/themedropdown";
-
-const themes = [
-  lightTheme,
-  darkTheme,
-  amoledTheme,
-  amoled2Theme,
-]
+import Themes from '../public/data/themes.json';
 
 export const StyleSelector = () => {
+  const themes = Themes.themes;
   const updateTheme = useUpdateTheme();
   const currentTheme = useContext(ThemeContext);
   const [selectedTheme, setSelectedTheme] = useState(themes[currentTheme.themeId]);
@@ -21,7 +16,6 @@ export const StyleSelector = () => {
   }
 
   const updateThemeWithStorage = (newTheme: DefaultTheme) => {
-
     if (newTheme.themeId === lightTheme.themeId) {
       updateLightTheme(newTheme);
     }
@@ -38,27 +32,22 @@ export const StyleSelector = () => {
       localStorage.setItem("theme", newTheme.themeId.toString());
       updateTheme(newTheme)
     } 
-    else {
-
-    }
   }
 
-  const [test, setTest] = useState(false);
+  const [visible, setVisible] = useState(false);
 
   function  handleBlur(event:any) {
-    console.log(event)
     if (!event.currentTarget.contains(event.relatedTarget)) {
-      setTest(false);
+      setVisible(false);
     }
   }
 
   return (
-
     <ThemeDropDown onBlur={(event) => handleBlur(event)}>
-      <ThemeDropDownButton show={test} onClick={() => setTest(test => !test)}>{selectedTheme.themeName}</ThemeDropDownButton>
-      <ThemeDropDownOptions id="themesDropdown" show={test}>
+      <ThemeDropDownButton show={+visible} onClick={() => setVisible(visible => !visible)}>{selectedTheme.themeName}</ThemeDropDownButton>
+      <ThemeDropDownOptions id="themesDropdown" show={+visible}>
         {themes.map((theme) => (
-          <ThemeDropDownOption active={theme === selectedTheme} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}>
+          <ThemeDropDownOption active={theme.themeId === selectedTheme.themeId ? 1 : 0} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}>
             {theme.themeName}
           </ThemeDropDownOption>
         ))}
@@ -73,27 +62,14 @@ export const StyleSelectorPlaceholder = () => {
   )
 }
 
-export function getTheme(themeId: number): DefaultTheme {
-  let theme: DefaultTheme;
+export function getTheme(themeId: number, themes: DefaultTheme[]): DefaultTheme {
+  let retTheme: DefaultTheme = darkTheme;
 
-  switch (themeId) {
-    case 0:
-      theme = lightTheme;
-      break;
-    case 1:
-      theme = darkTheme;
-      break;
-    case 2:
-      theme = amoledTheme;
-      break;
-    case 3:
-      theme = amoled2Theme;
-      break;
-    default:
-      theme = darkTheme
-  }
+  themes.forEach((theme) => {
+    if (theme.themeId === themeId) { retTheme = theme};
+  })
 
-  return theme;
+  return retTheme;
 }
 
 export default StyleSelector;
\ No newline at end of file