1import {useState} from 'react';
 2import {
 3  Button,
 4  Checkbox,
 5  FormControlLabel,
 6  Icon,
 7  Menu,
 8  MenuItem,
 9} from '@mui/material';
10import {type Moment} from 'moment';
11import useTravelsStore from '../../stores/useTravelsStore';
12
13interface FilterByDateProps {
14  dates: Moment[];
15  buttonFilterContent: string | string[];
16}
17
18const FilterByDate = ({dates, buttonFilterContent}: FilterByDateProps) => {
19  const datesFilters = useTravelsStore(s => s.datesFilter);
20  const setDatesFilter = useTravelsStore(s => s.setDatesFilter);
21  const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);
22  const [checkedItems, setCheckedItems] = useState<boolean[]>(
23    new Array(dates.length).fill(false)
24  );
25  const menuOpen = Boolean(anchorElement);
26
27  const handleClickListItem = (event: React.MouseEvent<HTMLElement>) =>
28    setAnchorElement(event.currentTarget);
29
30  const handleCheckboxChange = (index: number) => {
31    const newCheckedItems = [...checkedItems];
32    newCheckedItems[index] = !checkedItems[index];
33    setCheckedItems(newCheckedItems);
34    const selectedDate = dates[index];
35    const newDatesFilters = checkedItems[index]
36      ? datesFilters.filter(date => !date.isSame(selectedDate))
37      : [...datesFilters, selectedDate];
38    setDatesFilter(newDatesFilters);
39  };
40
41  return (
42    <>
43      <Button
44        sx={{bgcolor: 'background.paper', width: {xs: 1, sm: 'auto'}}}
45        variant="contained"
46        color="inherit"
47        onClick={handleClickListItem}
48        endIcon={<Icon>calendar_today_outlined</Icon>}
49      >
50        {buttonFilterContent}
51      </Button>
52      <Menu
53        anchorEl={anchorElement}
54        open={menuOpen}
55        onClose={() => setAnchorElement(null)}
56        MenuListProps={{
57          'aria-labelledby': 'lock-button',
58          role: 'listbox',
59        }}
60      >
61        {dates
62          ?.filter(date => date.isValid())
63          .map((date, index) => (
64            <MenuItem key={index}>
65              <FormControlLabel
66                control={
67                  <Checkbox
68                    checked={checkedItems[index]}
69                    onChange={() => handleCheckboxChange(index)}
70                  />
71                }
72                label={date.format('dddd Do MMMM')}
73              />
74            </MenuItem>
75          ))}
76      </Menu>
77    </>
78  );
79};
80
81export default FilterByDate;