import React from 'React'

import { Home } from '@styled-icons/entypo/Home'
import { SearchAlt2 as Search } from '@styled-icons/boxicons-regular/SearchAlt2'
import { UpArrowAlt as Arrow } from '@styled-icons/boxicons-regular/UpArrowAlt'
import { LightBulb as Light } from '@styled-icons/entypo/LightBulb'
import { GridHorizontal as Grid } from '@styled-icons/boxicons-regular/GridHorizontal'

import * as S from './styled'

const MenuBar = () => (
  <S.MenuBarWrapper>
    <S.MenuBarGroup>
      <S.MenuBarLink to="/" title="Go back to Home">
        <S.MenuBarItem><Home /></S.MenuBarItem>
      </S.MenuBarLink>
    </S.MenuBarGroup>

    <S.MenuBarGroup>
      <S.MenuBarItem title="Change theme"><Light /></S.MenuBarItem>
      <S.MenuBarItem title="Change visualization"><Grid /></S.MenuBarItem>
      <S.MenuBarItem title="Go to top"><Arrow /></S.MenuBarItem>
    </S.MenuBarGroup>
  </S.MenuBarWrapper>
)

export default MenuBar

@@ -9,16 +9,41 @@
 eact
+, %7B useState, useEffect %7D
  from '
-R
+r
 eact
@@ -468,10 +468,225 @@
  =%3E 
-(%0A
+%7B%0A  const %5Btheme, setTheme%5D = useState(null)%0A%0A  const isDarkMode = theme === 'dark'%0A%0A  useEffect(() =%3E %7B%0A    setTheme(window.__theme)%0A    window.__onThemeChange = () =%3E setTheme(window.__theme)%0A  %7D, %5B%5D)%0A%0A  return (%0A  
   %3CS
@@ -702,24 +702,26 @@
 rapper%3E%0A    
+ 
+ 
 %3CS.MenuBarGr
@@ -717,32 +717,34 @@
 S.MenuBarGroup%3E%0A
+  
       %3CS.MenuBar
@@ -780,32 +780,34 @@
  Home%22%3E%0A        
+ 
+ 
 %3CS.MenuBarItem%3E%3C
@@ -826,24 +826,26 @@
 enuBarItem%3E%0A
+  
       %3C/S.Me
@@ -855,24 +855,26 @@
 arLink%3E%0A    
+  
 %3C/S.MenuBarG
@@ -880,16 +880,18 @@
 Group%3E%0A%0A
+  
     %3CS.M
@@ -901,32 +901,34 @@
 BarGroup%3E%0A      
+  
 %3CS.MenuBarItem t
@@ -917,32 +917,42 @@
   %3CS.MenuBarItem
+%0A         
  title=%22Change t
@@ -960,18 +960,185 @@
 eme%22
-%3E%3CLight /%3E
+%0A          onClick=%7B() =%3E %7B%0A            window.__setPreferredTheme(isDarkMode ? 'light' : 'dark')%0A          %7D%7D%0A          className=%7Btheme%7D%0A        %3E%0A          %3CLight /%3E%0A        
 %3C/S.
@@ -1142,32 +1142,34 @@
 /S.MenuBarItem%3E%0A
+  
       %3CS.MenuBar
@@ -1225,32 +1225,34 @@
 uBarItem%3E%0A      
+ 
+ 
 %3CS.MenuBarItem t
@@ -1290,24 +1290,26 @@
 enuBarItem%3E%0A
+  
     %3C/S.Menu
@@ -1318,16 +1318,18 @@
 rGroup%3E%0A
+  
   %3C/S.Me
@@ -1342,17 +1342,21 @@
 rapper%3E%0A
-)
+  )%0A%7D
 %0A%0Aexport

add function for Dark and Light modes