import React, { Fragment, useEffect, useMemo } from 'react';
import { Box, Divider, List, ListItem, ListItemButton, ListItemText, useTheme, ListItemIcon, Tooltip, Container } from '@mui/material';
import { ActiveMenu, useLayoutStore } from '../store/layout';
import { activeMenuList } from '../modules/MenuList';
import { amber } from '@mui/material/colors';
import { SquareMenu } from 'lucide-react';

export type LeftProps = {
  children?: React.ReactNode;
};
export const Left = ({ children }: LeftProps) => {
  const { setActiveMenu, init, showLabel, setShowLabel } = useLayoutStore();
  const theme = useTheme();
  useEffect(() => {
    init();
  }, []);
  let list = useMemo(() => {
    const _activeMenuList = [
      {
        label: '资源管理器',
        value: 'menu',
        icon: <SquareMenu />,
        hasDivider: true,
      },
      ...activeMenuList,
    ];
    return _activeMenuList;
  }, [activeMenuList]);

  return (
    <Box sx={{ height: '100%', display: 'flex', backgroundColor: amber[50] }}>
      <Box component='nav' sx={{ flexShrink: { sm: 0 } }}>
        <Box
          sx={{
            flexShrink: 0,
            '& .MuiDrawer-paper': { boxSizing: 'border-box' },
            height: '100%',
          }}>
          <Box
            sx={{
              textAlign: 'center',
              borderRight: 1,
              borderColor: theme.palette.divider,
              display: 'flex',
              height: '100%',
              flexDirection: 'column',
            }}>
            <List sx={{ flexGrow: 1, height: '100%' }} key={list.length}>
              {list.map((item) => (
                <Fragment key={item.value}>
                  <ListItem disablePadding>
                    <ListItemButton
                      sx={{
                        '&:hover': {
                          backgroundColor: theme.palette.primary.main,
                          color: 'white',
                        },
                        color: theme.palette.primary.main,
                        width: showLabel ? '240px' : '56px',
                        minHeight: '48px',
                      }}
                      onClick={() => {
                        if (item.value === 'menu') {
                          // 打开资源管理器
                          setShowLabel(!showLabel);
                        } else {
                          setActiveMenu(item.value as ActiveMenu);
                        }
                      }}>
                      <ListItemIcon sx={{ color: 'inherit' }}>
                        {!showLabel ? (
                          <Tooltip placement='right' title={item.label}>
                            {item.icon}
                          </Tooltip>
                        ) : (
                          item.icon
                        )}
                      </ListItemIcon>
                      {showLabel && <ListItemText primary={item.label} />}
                    </ListItemButton>
                  </ListItem>
                  {item.hasDivider && <Divider />}
                </Fragment>
              ))}
            </List>
          </Box>
        </Box>
      </Box>
      <Box sx={{ flexGrow: 1, height: '100%', overflow: 'hidden' }}>
        <Container sx={{ width: '100%', height: '100%' }}>{children}</Container>
      </Box>
    </Box>
  );
};
