import React, { useState, useEffect } 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 = () => {
  const [theme, setTheme] = useState(null)

  const isDarkMode = theme === 'dark'

  useEffect(() => {
    setTheme(window.__theme)
    window.__onThemeChange = () => setTheme(window.__theme)
  }, [])

  return (
    <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"
          onClick={() => {
            window.__setPreferredTheme(isDarkMode ? 'light' : 'dark')
          }}
          className={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

@@ -409,16 +409,86 @@
 izontal'
+%0Aimport %7B ListUl as List%7D from '@styled-icons/boxicons-regular/ListUl'
 %0A%0Aimport
@@ -583,45 +583,132 @@
 ll)%0A
-%0A  const isDarkMode = theme === 'dark
+  const %5Bdisplay, setDisplay%5D = useState(null)%0A%0A  const isDarkMode = theme === 'dark'%0A  const isListMode = display === 'list
 '%0A%0A 
@@ -755,16 +755,50 @@
 _theme)%0A
+    setDisplay(window.__display)%0A%0A
     wind
@@ -849,16 +849,82 @@
 _theme)%0A
+    window.__onDisplayChange = () =%3E setDisplay(window.__display)%0A
   %7D, %5B%5D)
@@ -1421,32 +1421,42 @@
   %3CS.MenuBarItem
+%0A         
  title=%22Change v
@@ -1472,17 +1472,183 @@
 ion%22
-%3E%3CGrid /%3E
+%0A          onClick=%7B() =%3E %7B%0A            window.__setPreferredDisplay(isListMode ? 'grid' : 'list')%0A          %7D%7D%0A        %3E%0A          %7BisListMode ? %3CGrid /%3E : %3CList /%3E%7D%0A        
 %3C/S.

add function for Grid and List modes