import React, { useState } from "react";
import { Brightness4, Brightness7 } from "@mui/icons-material";
import { IconButton, Tooltip } from "@mui/material";
import {
    List,
    ListItem,
    ListItemText,
    styled,
    Switch,
    Box,
    Button
} from "@mui/material";
import SettingsModal from "../SettingsModal";
import { RoleBasedRender } from "../../UI/RoleBasedRender";

const FooterList = styled(List)(({ theme }) => ({
    backgroundColor: theme.palette.custom.sidebar,
    padding: theme.spacing(1, 0),
    borderTop: `1px solid ${theme.palette.divider}`,
    marginTop: 'auto'
}));

const FooterListItem = styled(ListItem)(({ theme }) => ({
    '&:hover': {
        backgroundColor: theme.palette.custom.sidebarHover,
    },
    padding: theme.spacing(1, 2),
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center'
}));

const SidebarFooter = ({
    collapsed,
    isDarkMode,
    setIsDarkMode,
    forceRefreshMenu,
    user
}) => {
    const [settingsOpen, setSettingsOpen] = useState(false);

    const handleSettingsOpen = () => {
        setSettingsOpen(true);
    };

    const handleSettingsClose = () => {
        setSettingsOpen(false);
    };
    console.log('SidebarFooter user with role:', {
        ...user,
        hasRole: 'role' in user,
        roleValue: user?.role
    });
    return (
        <>
            <FooterList>
                {!collapsed && (
                    <FooterListItem button>
                        <ListItemText
                            primary="Помощь"
                            primaryTypographyProps={{
                                color: 'custom.sidebarText',
                                variant: 'body2'
                            }}
                        />
                    </FooterListItem>
                )}
                <FooterListItem>
                    {/* кнопка настроек */}
                    <RoleBasedRender user={user} allowedRoles={['admin']}>
                        {!collapsed && (
                            <Button
                                onClick={handleSettingsOpen}
                                sx={{
                                    color: 'custom.sidebarText',
                                    textTransform: 'none',
                                    minWidth: 0,
                                    padding: 0,
                                    marginRight: 'auto'
                                }}
                            >
                                <ListItemText
                                    primary="Настройки"
                                    primaryTypographyProps={{
                                        color: 'custom.sidebarText',
                                        variant: 'body2'
                                    }}
                                />
                            </Button>
                        )}
                    </RoleBasedRender>

                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                        <Tooltip title="Переключить тему">
                            <IconButton
                                size="small"
                                onClick={() => setIsDarkMode(!isDarkMode)}
                                sx={{ color: 'custom.sidebarText' }}
                            >
                                {isDarkMode ? <Brightness4 /> : <Brightness7 />}
                            </IconButton>
                        </Tooltip>
                        {!collapsed && (
                            <Switch
                                checked={isDarkMode}
                                onChange={() => setIsDarkMode(!isDarkMode)}
                                size="small"
                            />
                        )}
                    </Box>
                </FooterListItem>
            </FooterList>

            {/* Используем RoleBasedRender для модального окна */}
            <RoleBasedRender user={user} allowedRoles={['admin']}>
                <SettingsModal
                    open={settingsOpen}
                    onClose={handleSettingsClose}
                    onMenuUpdate={forceRefreshMenu}
                />
            </RoleBasedRender>
        </>
    );
};

export default SidebarFooter;