import React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Checkbox from '@mui/material/Checkbox';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

interface Department {
  id: number;
  name: string;
}

interface DepartmentFilterProps {
  departments: Department[];
  selectedDepartments: number[];
  onDepartmentToggle: (departmentId: number) => void;
  onToggleAll: (selectAll: boolean) => void;
}

const departmentFilterStyle = {
  root: (theme) => ({
    position: 'absolute',
    top: '90px',
    left: '10px',
    zIndex: 1000,
    minWidth: '280px',
    boxShadow: theme.shadows[3],
  }),
  summary: (theme) => ({
    backgroundColor: theme.palette.grey[100],
    borderBottom: '1px solid #e0e0e0',
    borderRadius: '8px',
    minHeight: 48,
  }),
  title: (theme) => ({
    fontWeight: 600,
    display: 'flex',
    alignItems: 'center',
    gap: theme.spacing(1),
  }),
  list: {
    width: '100%',
    maxHeight: '300px',
    overflow: 'auto',
    padding: 0,
  },
  listItem: {
    '&:last-of-type': { pb: 2 },
    px: 2,
    py: 0,
  },
  selectAll: (theme) => ({
    borderBottom: `1px solid ${theme.palette.divider}`,
    backgroundColor: theme.palette.grey[50],
    height: 70,
    px: 2,
  }),
  icon: {
    width: 20,
    height: 20,
  }
};

const checkedStyles = {
  '&.Mui-checked': { color: 'rgb(2,117,255)' },
  '&.MuiCheckbox-intermediate': { color: 'rgb(2,117,255)' },
};

const DepartmentFilter: React.FC<DepartmentFilterProps> = ({
  departments,
  selectedDepartments,
  onDepartmentToggle,
  onToggleAll,
}) => {
  const allSelected = departments.length > 0 && selectedDepartments.length === departments.length;
  const someSelected = selectedDepartments.length > 0 && !allSelected;

  const handleSelectAll = () => {
    onToggleAll(!allSelected);
  };

  return (
    <Accordion defaultExpanded sx={departmentFilterStyle.root}>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        sx={departmentFilterStyle.summary}
      >
        <Typography component="div" sx={departmentFilterStyle.title}>
          <img src="/icon8/BER/ber24.png" alt="Department" style={{ width: 24, height: 24 }} />
          <span>Departments</span>
        </Typography>
      </AccordionSummary>
      <AccordionDetails sx={{ padding: 0 }}>
        <List dense sx={departmentFilterStyle.list}>
          <ListItem sx={departmentFilterStyle.selectAll}>
           <ListItemButton onClick={handleSelectAll}>
             <ListItemIcon sx={{ minWidth: 36 }}>
               <Checkbox
                   edge="start"
                   checked={allSelected}
                   indeterminate={someSelected}
                   tabIndex={-1}
                   disableRipple
                   sx={checkedStyles}
               />
             </ListItemIcon>
             <ListItemText primary={allSelected ? 'Deselect All' : 'Select All'} primaryTypographyProps={{ style: { fontWeight: 600 } }} />
             <Typography variant="caption">({departments.length})</Typography>
           </ListItemButton>
          </ListItem>
          {departments.map((department) => (
            <ListItem
              key={department.id}
              sx={departmentFilterStyle.listItem}
              disablePadding={true}
            >
              <ListItemButton onClick={() => onDepartmentToggle(department.id)} sx={{ height: 44, py: 0, pl: 0, alignItems: 'center' }}>
                <ListItemIcon sx={{ minWidth: 0 }}>
                  <Checkbox
                      edge="start"
                      checked={selectedDepartments.includes(department.id)}
                      tabIndex={-1}
                      disableRipple
                      sx={checkedStyles}
                  />
                </ListItemIcon>
                <ListItemIcon sx={{ minWidth: 0 }}>
                  <img src="/icon8/BER/ber24.png" alt="" style={departmentFilterStyle.icon} />
                </ListItemIcon>
                <ListItemText primary={department.name} sx={{ pl: 1 }}/>
              </ListItemButton>
            </ListItem>
          ))}
        </List>
      </AccordionDetails>
    </Accordion>
  );
};

export default DepartmentFilter;