1import {useState} from 'react';
  2import {
  3  Box,
  4  Button,
  5  Checkbox,
  6  FormControlLabel,
  7  Icon,
  8  List,
  9  Menu,
 10  MenuItem,
 11} from '@mui/material';
 12import theme from '../../theme';
 13import {type Moment} from 'moment';
 14
 15interface FilterByDateProps {
 16  dates: Moment[];
 17  setSelectedDates: React.Dispatch<React.SetStateAction<Moment[]>>;
 18  buttonFilterContent: string | string[];
 19}
 20
 21const FilterByDate = ({
 22  dates,
 23  setSelectedDates,
 24  buttonFilterContent,
 25}: FilterByDateProps) => {
 26  const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);
 27  const [checkedItems, setCheckedItems] = useState<boolean[]>(
 28    new Array(dates.length).fill(false)
 29  );
 30  const menuOpen = Boolean(anchorElement);
 31
 32  const handleClickListItem = (event: React.MouseEvent<HTMLElement>) =>
 33    setAnchorElement(event.currentTarget);
 34
 35  const handleCheckboxChange = (index: number) => {
 36    const newCheckedItems = [...checkedItems];
 37    newCheckedItems[index] = !checkedItems[index];
 38    setCheckedItems(newCheckedItems);
 39    const selectedDate = dates[index];
 40    setSelectedDates(prevSelectedDates => {
 41      if (checkedItems[index])
 42        return prevSelectedDates.filter(date => !date.isSame(selectedDate));
 43      else return [...prevSelectedDates, selectedDate];
 44    });
 45  };
 46
 47  return (
 48    <Box
 49      sx={{
 50        outline: 'none',
 51        '& > *': {
 52          cursor: 'default',
 53        },
 54        position: 'absolute',
 55        top: 60,
 56        zIndex: 666,
 57        [theme.breakpoints.down('sm')]: {
 58          left: 15,
 59        },
 60        [theme.breakpoints.up('sm')]: {
 61          left: 25,
 62        },
 63      }}
 64    >
 65      <List sx={{bgcolor: 'background.paper', borderRadius: 1, p: 0}}>
 66        <Button
 67          onClick={handleClickListItem}
 68          endIcon={<Icon>calendar_today_outlined</Icon>}
 69        >
 70          {buttonFilterContent}
 71        </Button>
 72      </List>
 73      <Menu
 74        anchorEl={anchorElement}
 75        open={menuOpen}
 76        onClose={() => setAnchorElement(null)}
 77        MenuListProps={{
 78          'aria-labelledby': 'lock-button',
 79          role: 'listbox',
 80        }}
 81      >
 82        {dates
 83          ?.filter(date => date.isValid())
 84          .map((date, index) => (
 85            <MenuItem key={index}>
 86              <FormControlLabel
 87                control={
 88                  <Checkbox
 89                    checked={checkedItems[index]}
 90                    onChange={() => handleCheckboxChange(index)}
 91                  />
 92                }
 93                label={date.format('dddd Do MMMM')}
 94              />
 95            </MenuItem>
 96          ))}
 97      </Menu>
 98    </Box>
 99  );
100};
101
102export default FilterByDate;