import React, {useEffect, useRef} from 'react'
import {useDispatch, useSelector} from 'react-redux'
import {settingsToggleTheme} from 'reducers/settings'
import LocalStorage from 'lib/localStorage'
import {APP_THEMES_LIGHT, APP_THEMES_DARK} from 'reducers/settings/constants'

const ThemeSwitcher = ({className = ''}) => {
  const htmlRoot = useRef()
  const dispatch = useDispatch()
  const theme = useSelector(({settings}) => settings.theme)

  useEffect(() => {
    htmlRoot.current = document.querySelector(':root')
  }, [])

  useEffect(() => {
    if (htmlRoot.current) {
      htmlRoot.current.className = theme
    }
  }, [theme])

  const handleToggleTheme = (e) => {
    e.preventDefault()

    dispatch(settingsToggleTheme())
    LocalStorage.setItem(
      'theme',
      APP_THEMES_LIGHT === theme ? APP_THEMES_DARK : APP_THEMES_LIGHT
    )
  }

  return (
    <a
      onClick={handleToggleTheme}
      href="#"
      className={className}
    >
      {theme}
    </a>
  )
}

export default ThemeSwitcher

@@ -40,16 +40,51 @@
 'react'%0A
+import PropTypes from 'prop-types'%0A
 import %7B
@@ -1018,16 +1018,77 @@
 %0A  )%0A%7D%0A%0A
+ThemeSwitcher.propTypes = %7B%0A  className: PropTypes.string%0A%7D%0A%0A
 export d

fix validation