import PropTypes from 'prop-types'
import {styled} from '@mui/material/styles'
import LightModeIcon from '@mui/icons-material/LightMode'
import DarkModeIcon from '@mui/icons-material/DarkMode'
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: '60px',
    zIndex: 1,
    cursor: 'pointer'
  },
  [`& .${classes.switchFixed}`]: {
    position: 'fixed',
    right: '0.5em',
    top: '68px',
    zIndex: 9990,
    cursor: 'pointer'
  }
})

export default function SwitchTheme({switchFixed, mode, setMode}) {
  const handleClick = seletedMode => {
    localStorage.setItem('oki-theme', seletedMode)
    setMode(seletedMode)
  }

  return (
    <StyledBox>
      <div className={switchFixed ? classes.switchFixed : classes.switch} >
        {mode === 'dark' ? (
          <LightModeIcon onClick={() => handleClick('light')} />
        ) : (
          <DarkModeIcon onClick={() => handleClick('dark')} />
        )}
      </div>
    </StyledBox>
  )
}

SwitchTheme.propTypes = {
  switchFixed: PropTypes.bool.isRequired,
  mode: PropTypes.oneOf(['light', 'dark']),
  setMode: PropTypes.func.isRequired
}