import React from 'react';
import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Divider } from '@mui/material';
import { Storage, TableChart, Folder } from '@mui/icons-material';
import { useAppStore } from '../store/useAppStore';

const Sidebar: React.FC = () => {
  const { activeDatabase, setActiveDatabase } = useAppStore();

  // Mock data for initial UI
  const databases = ['information_schema', 'mysql', 'performance_schema', 'sys', 'mariavel_db'];

  return (
    <Box sx={{ width: 260, borderRight: 1, borderColor: 'divider', display: 'flex', flexDirection: 'column' }}>
      <Box sx={{ p: 2 }}>
        <Typography variant="overline" sx={{ fontWeight: 700, color: 'text.secondary' }}>
          Databases
        </Typography>
      </Box>
      <List sx={{ flexGrow: 1, overflow: 'auto' }}>
        {databases.map((db) => (
          <ListItem key={db} disablePadding>
            <ListItemButton 
              selected={activeDatabase === db}
              onClick={() => setActiveDatabase(db)}
            >
              <ListItemIcon>
                <Storage color={activeDatabase === db ? 'primary' : 'inherit'} />
              </ListItemIcon>
              <ListItemText 
                primary={
                  <Typography 
                    variant="body2" 
                    sx={{ fontWeight: activeDatabase === db ? 600 : 400 }}
                  >
                    {db}
                  </Typography>
                } 
              />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
      <Divider />
      <Box sx={{ p: 2 }}>
        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
          Connected to: 127.0.0.1
        </Typography>
      </Box>
    </Box>
  );
};

export default Sidebar;
