import * as React from 'react';
import { ReactElement, ReactNode } from 'react';
import {
    Box,
    List,
    MenuItem,
    ListItemIcon,
    Typography,
    Collapse,
    Tooltip,
} from '@mui/material';
import { useTranslate, useSidebarState } from 'react-admin';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';

const SubMenu = (props) => {
    const { handleToggle, isOpen, name, icon, children, dense, isSelected = false } = props;
    const translate = useTranslate();
    const [sidebarIsOpen] = useSidebarState();

    const header = (
        <MenuItem 
            dense={dense} 
            onClick={handleToggle} 
            sx={{ 
                display: 'flex', 
                alignItems: 'center', 
                justifyContent: 'space-between',
                backgroundColor: isSelected ? 'rgba(25, 118, 210, 0.08) !important' : 'transparent',
                color: isSelected ? '#1976d2 !important' : 'text.secondary',
                '&:hover': {
                    backgroundColor: isSelected ? 'rgba(25, 118, 210, 0.12) !important' : 'rgba(0, 0, 0, 0.04)',
                },
                borderLeft: 'none',
                borderRadius: '4px',
                margin: '2px 6px',
                width: 'calc(100% - 16px)',
                transition: 'all 0.2s ease-in-out',
                boxSizing: 'border-box',
                minHeight: '40px',
                padding: '8px 12px',
                
                // 确保内容区域完全左对齐
                '& .MuiMenuItem-root': {
                    justifyContent: 'flex-start',
                }
            }}
        >
            <Box sx={{ 
                display: 'flex', 
                alignItems: 'center', 
                flex: 1,
                justifyContent: 'flex-start',
                minWidth: 0,
                // 确保图标和文字紧密对齐
                gap: '8px',
            }}>
                <ListItemIcon sx={{ 
                    minWidth: '32px !important', // 稍微减小图标区域宽度
                    color: isSelected ? '#1976d2 !important' : 'text.secondary',
                    display: 'flex', 
                    alignItems: 'center',
                    justifyContent: 'flex-start',
                    margin: 0, // 移除margin
                    flexShrink: 0,
                }}>
                    {icon}
                </ListItemIcon>
                {sidebarIsOpen && (
                    <Typography 
                        variant="inherit" 
                        sx={{ 
                            color: isSelected ? '#1976d2 !important' : 'text.secondary',
                            fontWeight: isSelected ? 600 : 400,
                            flex: 1,
                            minWidth: 0,
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            textAlign: 'left',
                            lineHeight: '1.5',
                        }}
                    >
                        {translate(name)}
                    </Typography>
                )}
            </Box>
            
            {/* 箭头图标 */}
            {sidebarIsOpen && (
                <Box sx={{ 
                    display: 'flex', 
                    alignItems: 'center', 
                    minWidth: '20px',
                    justifyContent: 'flex-end',
                    flexShrink: 0,
                    marginLeft: '8px',
                }}>
                    {isOpen ? 
                        <KeyboardArrowDownIcon fontSize="small" sx={{color: isSelected ? '#1976d2 !important' : 'text.secondary'}} /> : 
                        <KeyboardArrowRightIcon fontSize="small" sx={{color: isSelected ? '#1976d2 !important' : 'text.secondary'}} />
                    }
                </Box>
            )}
        </MenuItem>
    );

    return (
        <Box sx={{ width: '100%' }}>
            {sidebarIsOpen || isOpen ? (
                header
            ) : (
                <Tooltip title={translate(name)} placement="right">
                    {header}
                </Tooltip>
            )}
            <Collapse in={isOpen} timeout="auto" unmountOnExit>
                <List
                    dense={dense}
                    component="div"
                    disablePadding
                    sx={{
                        paddingLeft: 2,
                        '& .MuiMenuItem-root': {
                            paddingLeft: 3,
                        },
                    }}
                >
                    {children}
                </List>
            </Collapse>
        </Box>
    );
};

export default SubMenu;