import React, { useState, useContext, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Avatar, Menu, MenuItem, Button, Typography } from '@mui/material';
import { UserContext } from '../contexts/UserContext';
import { ThemeContext } from '../contexts/ThemeContext';

const UserSettings = () => {
  const { user, setUser } = useContext(UserContext);
  const { themeName, changeTheme } = useContext(ThemeContext);
  const navigate = useNavigate();
  const [anchorEl, setAnchorEl] = useState(null);
  const [themeMenuAnchorEl, setThemeMenuAnchorEl] = useState(null);

  useEffect(() => {
    const storedUser = localStorage.getItem('user');
    if (storedUser) {
      try {
        setUser(JSON.parse(storedUser));
      } catch (error) {
        console.error("Failed to parse user from localStorage", error);
      }
    }
  }, [setUser]);

  const handleMenu = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleThemeMenu = (event) => {
    setThemeMenuAnchorEl(event.currentTarget);
  };

  const handleThemeMenuClose = () => {
    setThemeMenuAnchorEl(null);
  };

  const handleLogout = () => {
    localStorage.removeItem('user');
    localStorage.removeItem('guilds');
    setUser(null);
    navigate('/');
  };

  const handleThemeChange = (name) => {
    changeTheme(name);
    handleThemeMenuClose();
  };

  if (!user) {
    return null;
  }

  return (
    <div>
      <Button onClick={handleMenu}>
        <Avatar sx={{ width: 48, height: 48 }} src={`https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`} />
      </Button>
      <Menu
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right',
        }}
        keepMounted
        transformOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem disabled>
          <Typography>{user.username}</Typography>
        </MenuItem>
        <MenuItem onClick={handleThemeMenu}>Themes</MenuItem>
        <MenuItem onClick={handleLogout}>Logout</MenuItem>
      </Menu>
      <Menu
        anchorEl={themeMenuAnchorEl}
        open={Boolean(themeMenuAnchorEl)}
        onClose={handleThemeMenuClose}
        anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'left',
        }}
        transformOrigin={{
            vertical: 'top',
            horizontal: 'right',
        }}
      >
        <MenuItem onClick={() => handleThemeChange('light')} disabled={themeName === 'light'}>Light</MenuItem>
        <MenuItem onClick={() => handleThemeChange('dark')} disabled={themeName === 'dark'}>Dark</MenuItem>
        <MenuItem onClick={() => handleThemeChange('discord')} disabled={themeName === 'discord'}>Discord</MenuItem>
      </Menu>
    </div>
  );
};

export default UserSettings;