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

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 }) => {
    return (
        <FooterList>
            {!collapsed && (
                <FooterListItem button>
                    <ListItemText
                        primary="Помощь"
                        primaryTypographyProps={{
                            color: 'custom.sidebarText',
                            variant: 'body2'
                        }}
                    />
                </FooterListItem>
            )}
            <FooterListItem>
                {!collapsed && (
                    <ListItemText
                        primary="Настройка"
                        primaryTypographyProps={{
                            color: 'custom.sidebarText',
                            variant: 'body2'
                        }}
                    />
                )}

                <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>
    );
};

export default SidebarFooter;