From f6f6c61fd346f126740698bdeec19c70ebe0517c Mon Sep 17 00:00:00 2001
From: martapanc <marta.panc@gmail.com>
Date: Sun, 27 Aug 2023 19:06:02 +0200
Subject: [PATCH] feat: select language wip

---
 package.json                                  |   1 -
 src/app/(public)/layout-client.tsx            |  21 ++--
 .../LanguageSwitcher/LanguageSwitcher.tsx     | 113 ++++++++++++------
 src/components/helpers/MuiThemeProvider.tsx   |  29 +++++
 src/theme/createEmotionCache.ts               |   7 ++
 src/theme/index.ts                            |  37 ++++++
 6 files changed, 163 insertions(+), 45 deletions(-)
 create mode 100644 src/components/helpers/MuiThemeProvider.tsx
 create mode 100644 src/theme/createEmotionCache.ts
 create mode 100644 src/theme/index.ts

diff --git a/package.json b/package.json
index e20e2b5..bc0fc27 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.1",
-    "@chakra-ui/react": "^2.8.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@heroicons/react": "^2.0.18",
diff --git a/src/app/(public)/layout-client.tsx b/src/app/(public)/layout-client.tsx
index 7054401..674f394 100644
--- a/src/app/(public)/layout-client.tsx
+++ b/src/app/(public)/layout-client.tsx
@@ -1,19 +1,24 @@
 'use client';
 
-import { ThemeProvider } from 'next-themes';
-import type { PropsWithChildren } from 'react';
+import {ThemeProvider as NextThemeProvider, } from 'next-themes';
+import type {PropsWithChildren} from 'react';
 
+import MuiThemeProvider from "@/components/helpers/MuiThemeProvider";
 import Footer from '@/components/layout/Footer';
 import Header from '@/components/layout/Header';
 
-export default function LayoutClient({ children }: PropsWithChildren) {
+export default function LayoutClient({children}: PropsWithChildren) {
+
   return (
-    <ThemeProvider attribute='class' defaultTheme='light' enableSystem={false}>
-      <Header />
+    <NextThemeProvider attribute='class' defaultTheme='light' enableSystem={false}>
+      <MuiThemeProvider >
+
+        <Header/>
 
-      <main id='content'>{children}</main>
+        <main id='content'>{children}</main>
 
-      <Footer />
-    </ThemeProvider>
+        <Footer/>
+      </MuiThemeProvider>
+    </NextThemeProvider>
   );
 }
diff --git a/src/components/atoms/LanguageSwitcher/LanguageSwitcher.tsx b/src/components/atoms/LanguageSwitcher/LanguageSwitcher.tsx
index 63d3732..e1a8f25 100644
--- a/src/components/atoms/LanguageSwitcher/LanguageSwitcher.tsx
+++ b/src/components/atoms/LanguageSwitcher/LanguageSwitcher.tsx
@@ -1,6 +1,6 @@
-import {InputLabel, MenuItem, SelectChangeEvent} from '@mui/material';
+import {InputLabel, MenuItem, Select, SelectChangeEvent} from '@mui/material';
 import FormControl from '@mui/material/FormControl';
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 
 import i18n from '@/app/(public)/i18n';
 import clsx from "clsx";
@@ -20,9 +20,14 @@ export interface LanguageDef {
 }
 
 const LanguageSwitcher = ({ languages } : LanguageSwitcherProps) => {
-  const { theme } = useTheme();
+  const { theme, resolvedTheme, setTheme } = useTheme();
   const isDarkMode = theme === 'dark';
 
+  const [mounted, setMounted] = useState(false);
+
+  // When mounted on client, now we can show the UI
+  useEffect(() => setMounted(true), []);
+
   const [chosenLanguage, setChosenLanguage] = useState('');
 
   const handleChange = (event: SelectChangeEvent) => {
@@ -47,48 +52,84 @@ const LanguageSwitcher = ({ languages } : LanguageSwitcherProps) => {
 
   return (
     <div className="p-2">
-      <select onChange={changeLanguage}
-        className="rounded-md border-2 dark:bg-transparent"
-      >
-        {languages.map(
-          (lang: LanguageDef) =>
-            !lang.disabled && (
-              <option
-                style={{fontSize: '14px', fontWeight: 300}}
-                key={lang.value}
-                value={lang.value}
-              >
-                {lang.label}
-              </option>
-            )
-        )}
-      </select>
-
-      {/*<FormControl sx={{m: 1, minWidth: 80, border: '2px solid white', color: isDarkMode ? 'white' : 'black'}} size='small'>*/}
-      {/*  <InputLabel id='demo-select-small-label'>{label}</InputLabel>*/}
-      {/*  <Select*/}
-      {/*    id='demo-select-small'*/}
-      {/*    labelId='demo-select-small-label'*/}
-      {/*    value={chosenLanguage}*/}
-      {/*    label={label}*/}
-      {/*    onChange={handleChange}*/}
-      {/*    style={{ fontSize: '14px' }}*/}
-      {/*  >*/}
-      {/*    {languages.map(*/}
+      {/*<Select*/}
+      {/*  labelId="demo-simple-select-helper-label"*/}
+      {/*  id="demo-simple-select-helper"*/}
+      {/*  value={theme}*/}
+      {/*  onChange={handleChange}*/}
+      {/*>*/}
+      {/*  {languages.map(*/}
       {/*      (lang: LanguageDef) =>*/}
       {/*        !lang.disabled && (*/}
-      {/*          <MenuItem*/}
-      {/*            className='font-light'*/}
+      {/*          <option*/}
+      {/*            className="option"*/}
       {/*            style={{fontSize: '14px', fontWeight: 300}}*/}
       {/*            key={lang.value}*/}
       {/*            value={lang.value}*/}
       {/*          >*/}
       {/*            {lang.label}*/}
-      {/*          </MenuItem>*/}
+      {/*          </option>*/}
       {/*        )*/}
       {/*    )}*/}
-      {/*  </Select>*/}
-      {/*</FormControl>*/}
+      {/*</Select>*/}
+
+      {/*<select onChange={changeLanguage}*/}
+      {/*  className="select rounded-md border-2 dark:bg-transparent"*/}
+      {/*>*/}
+      {/*  {languages.map(*/}
+      {/*    (lang: LanguageDef) =>*/}
+      {/*      !lang.disabled && (*/}
+      {/*        <option*/}
+      {/*          className="option"*/}
+      {/*          style={{fontSize: '14px', fontWeight: 300}}*/}
+      {/*          key={lang.value}*/}
+      {/*          value={lang.value}*/}
+      {/*        >*/}
+      {/*          {lang.label}*/}
+      {/*        </option>*/}
+      {/*      )*/}
+      {/*  )}*/}
+      {/*</select>*/}
+
+      <FormControl sx={{m: 1, minWidth: 80, fontSize: '1.5rem' }} size='small'>
+        <InputLabel id='demo-select-small-label'>{label}</InputLabel>
+        <Select
+          id='demo-select-small'
+          labelId='demo-select-small-label'
+          value={chosenLanguage}
+          label={label}
+          onChange={handleChange}
+          // style={{ fontSize: '14px' }}
+          // sx={{
+          //   '& .MuiOutlinedInput-notchedOutline': {
+          //     borderColor: isDarkMode ? 'white' : 'black'
+          //   },
+          //   '& .MuiSelect-iconOutlined': {
+          //     color: isDarkMode ? 'white' : 'black'
+          //   },
+          //   '& .MuiOutlinedInput-input': {
+          //     color: isDarkMode ? 'white' : 'black'
+          //   },
+          //   '& .css-1jy569b-MuiFormLabel-root-MuiInputLabel-root': {
+          //     color: isDarkMode ? 'white' : 'black'
+          //   }
+          // }}
+        >
+          {languages.map(
+            (lang: LanguageDef) =>
+              !lang.disabled && (
+                <MenuItem
+                  className='font-light'
+                  style={{fontSize: '14px', fontWeight: 300}}
+                  key={lang.value}
+                  value={lang.value}
+                >
+                  {lang.label}
+                </MenuItem>
+              )
+          )}
+        </Select>
+      </FormControl>
     </div>
   );
 };
diff --git a/src/components/helpers/MuiThemeProvider.tsx b/src/components/helpers/MuiThemeProvider.tsx
new file mode 100644
index 0000000..8003d9f
--- /dev/null
+++ b/src/components/helpers/MuiThemeProvider.tsx
@@ -0,0 +1,29 @@
+import { GlobalStyles } from "@mui/material";
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import { useTheme } from "next-themes";
+import { FC, useEffect, useState } from "react";
+
+import { darkTheme, globalStyles, lightTheme } from "@/theme";
+
+const MUIThemeProvider: FC<{ children: React.ReactNode }> = ({
+                                                               children,
+                                                             }) => {
+  const { resolvedTheme } = useTheme();
+  const [currentTheme, setCurrentTheme] = useState(lightTheme);
+
+  useEffect(() => {
+    resolvedTheme === "light"
+      ? setCurrentTheme(lightTheme)
+      : setCurrentTheme(darkTheme);
+  }, [resolvedTheme]);
+
+  return (
+    <ThemeProvider theme={currentTheme}>
+      <CssBaseline />
+      <GlobalStyles styles={globalStyles} />
+        {children}
+    </ThemeProvider>
+  );
+};
+
+export default MUIThemeProvider;
diff --git a/src/theme/createEmotionCache.ts b/src/theme/createEmotionCache.ts
new file mode 100644
index 0000000..97a127e
--- /dev/null
+++ b/src/theme/createEmotionCache.ts
@@ -0,0 +1,7 @@
+import createCache from "@emotion/cache";
+
+// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+export default function createEmotionCache() {
+  return createCache({ key: "css", prepend: true });
+}
diff --git a/src/theme/index.ts b/src/theme/index.ts
new file mode 100644
index 0000000..025f614
--- /dev/null
+++ b/src/theme/index.ts
@@ -0,0 +1,37 @@
+import { createTheme, css, PaletteOptions } from "@mui/material/styles";
+
+export type AllowedTheme = NonNullable<PaletteOptions["mode"]>;
+
+export const DEFAULT_THEME: AllowedTheme = "light";
+
+export const lightTheme = createTheme({
+  palette: {
+    primary: { main: "#9147FF" },
+    secondary: { main: "#2a48f3" },
+    mode: "light",
+  },
+});
+
+export const darkTheme = createTheme({
+  palette: {
+    primary: { main: "#9147FF" },
+    secondary: { main: "#2a48f3" },
+    mode: "dark",
+  },
+});
+
+export const globalStyles = css`
+  //:root {
+  //  body {
+  //    background-color: #fff;
+  //    color: #121212;
+  //  }
+  //}
+  //
+  //[data-theme="dark"] {
+  //  body {
+  //    background-color: #121212;
+  //    color: #fff;
+  //  }
+  //}
+`;