import PropTypes from 'prop-types'
import WbSunnyIcon from '@material-ui/icons/WbSunny'
import Brightness3Icon from '@material-ui/icons/Brightness3'
import {Box, makeStyles} from '@material-ui/core'

const useStyles = makeStyles({
  switch: {
    position: 'absolute',
    right: '1em',
    top: '95px',
    zIndex: 1,
    cursor: 'pointer'
  },
  switchFixed: {
    position: 'fixed',
    right: '1em',
    top: '95px',
    zIndex: 9990,
    cursor: 'pointer'
  }
})

export default function SwitchTheme({switchFixed, darkMode, setDarkMode}) {
  const classes = useStyles()
  const handleClick = () => {
    localStorage.setItem('oki-dark', !darkMode)
    setDarkMode(!darkMode)
  }

  return (
    <Box className={switchFixed ? classes.switchFixed : classes.switch}>
      {darkMode ? (
        <WbSunnyIcon onClick={handleClick} />
      ) : (
        <Brightness3Icon onClick={handleClick} />
      )}
    </Box>
  )
}

SwitchTheme.propTypes = {
  switchFixed: PropTypes.bool.isRequired,
  darkMode: PropTypes.bool.isRequired,
  setDarkMode: PropTypes.func.isRequired
}