import PropTypes from 'prop-types'
import {styled} from '@mui/material/styles'
import WbSunnyIcon from '@mui/icons-material/WbSunny'
import Brightness3Icon from '@mui/icons-material/Brightness3'
import {Box} from '@mui/material'

const PREFIX = 'switch-theme'

const classes = {
  switch: `${PREFIX}-switch`,
  switchFixed: `${PREFIX}-switchFixed`
}

const StyledBox = styled(Box)({
  [`& .${classes.switch}`]: {
    position: 'absolute',
    right: '1em',
    top: '200px',
    zIndex: 1,
    cursor: 'pointer'
  },
  [`& .${classes.switchFixed}`]: {
    position: 'fixed',
    right: '1em',
    top: '95px',
    zIndex: 9990,
    cursor: 'pointer'
  }
})

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

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

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