1import React, {useMemo} from 'react';
 2import Slide from '@material-ui/core/Slide';
 3import Dialog from '@material-ui/core/Dialog';
 4import AppBar from '@material-ui/core/AppBar';
 5import Toolbar from '@material-ui/core/Toolbar';
 6import ListItemText from '@material-ui/core/ListItemText';
 7import ListItem from '@material-ui/core/ListItem';
 8import List from '@material-ui/core/List';
 9import Divider from '@material-ui/core/Divider';
10import IconButton from '@material-ui/core/IconButton';
11import Icon from '@material-ui/core/Icon';
12import {makeStyles} from '@material-ui/core/styles';
13import {useTranslation} from 'react-i18next';
14import {useStrapi} from 'strapi-react-context';
15import {useEvent} from '../../contexts/Event';
16
17const sortCars = (a, b) => {
18  const dateA = new Date(a.departure).getTime();
19  const dateB = new Date(b.departure).getTime();
20  if (dateA === dateB) return new Date(a.createdAt) - new Date(b.createdAt);
21  else return dateA - dateB;
22};
23
24const Transition = React.forwardRef(function Transition(props, ref) {
25  return <Slide direction="up" ref={ref} {...props} />;
26});
27
28const CarDialog = ({open, onClose, onSelect}) => {
29  const classes = useStyles();
30  const {t} = useTranslation();
31  const strapi = useStrapi();
32  const {event} = useEvent();
33
34  const cars = useMemo(
35    () =>
36      strapi.stores.cars
37        ?.filter(car => car?.event?.id === event?.id)
38        .sort(sortCars),
39    [strapi.stores.cars, event]
40  );
41
42  return (
43    <Dialog
44      fullScreen
45      open={open}
46      onClose={onClose}
47      TransitionComponent={Transition}
48    >
49      <AppBar>
50        <Toolbar>
51          <IconButton onClick={onClose} color="inherit">
52            <Icon>arrow_back_ios</Icon>
53          </IconButton>
54        </Toolbar>
55      </AppBar>
56      <div className={classes.offset}>
57        <List>
58          {cars?.map(car => (
59            <>
60              <ListItem
61                button
62                disabled={car.passengers?.length === car.seats}
63                onClick={() => onSelect(car)}
64              >
65                <ListItemText
66                  primary={car.name}
67                  secondary={t('passenger.creation.seats', {
68                    seats: `${car.passengers?.length} / ${car.seats}`,
69                  })}
70                />
71              </ListItem>
72              <Divider />
73            </>
74          ))}
75        </List>
76      </div>
77    </Dialog>
78  );
79};
80
81const useStyles = makeStyles(theme => ({
82  offset: {
83    paddingTop: theme.spacing(7),
84  },
85}));
86
87export default CarDialog;