import {useTheme as nextUseTheme} from "next-themes"
import { Box, IconButton, Theme, Typography } from '@mui/material';
import { useTheme } from '@mui/material/styles'
import Brightness4Icon from '@mui/icons-material/Brightness4'
import Brightness7Icon from '@mui/icons-material/Brightness7'
import { ThemeMode } from '../state/ThemeMode'
import { useGlobalState } from '../state/GlobalState'
import { useCallback, useEffect, useState } from 'react'
import { makeStyles } from '@mui/styles'

const useStyles = makeStyles((theme: Theme) => ({
  modeToggleButtonHolder: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexGrow: 1,
    color: theme.palette.text.primary,
  },
  iconButton: {
    ml: 1,
  },
}))

export const DarkModeToggle = () => {
  const [mounted, setMounted] = useState(false)
  const theme = useTheme()
  const {setTheme} = nextUseTheme()
  const classes = useStyles()
  const [preferedColorScheme, setPreferedColorScheme] = useGlobalState(
    useCallback(
      (state) => [state.preferedColorScheme, state.setPreferedColorScheme],
      [],
    ),
  )

  useEffect(() => setMounted(true), [])
  if (!mounted) return null


  const toggleColor = () => {
    const newTheme =
      preferedColorScheme === ThemeMode.LIGHT_MODE
        ? ThemeMode.DARK_MODE
        : ThemeMode.LIGHT_MODE
    setTheme(newTheme);
    setPreferedColorScheme(newTheme)
  }


  return (
    <Box className={classes.modeToggleButtonHolder} id="modeToggleButtonHolder">
      <Typography>{theme.palette.mode} toggle</Typography>
      <IconButton
        className={classes.iconButton}
        sx={{ ml: 1 }}
        onClick={toggleColor}
        color="inherit"
        id="modeToggleButton"
      >
        {theme.palette.mode === 'dark' ? (
          <Brightness7Icon />
        ) : (
          <Brightness4Icon />
        )}
      </IconButton>
    </Box>
  )
}