1import React 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 IconButton from '@material-ui/core/IconButton';
10import Icon from '@material-ui/core/Icon';
11import {makeStyles} from '@material-ui/core/styles';
12import {useTranslation} from 'react-i18next';
13
14const Transition = React.forwardRef(function Transition(props, ref) {
15  return <Slide direction="up" ref={ref} {...props} />;
16});
17
18const CarDialog = ({cars, open, onClose, onSelect}) => {
19  const classes = useStyles();
20  const {t} = useTranslation();
21
22  return (
23    <Dialog
24      fullScreen
25      open={open}
26      onClose={onClose}
27      TransitionComponent={Transition}
28    >
29      <AppBar>
30        <Toolbar>
31          <IconButton onClick={onClose} color="inherit">
32            <Icon>arrow_back_ios</Icon>
33          </IconButton>
34        </Toolbar>
35      </AppBar>
36      <div className={classes.offset}>
37        <List disablePadding>
38          {cars?.map((car, i) => (
39            <ListItem
40              key={i}
41              button
42              divider
43              disabled={car.passengers?.length === car.seats}
44              onClick={() => onSelect(car)}
45            >
46              <ListItemText
47                primary={car.name}
48                secondary={t('passenger.creation.seats', {
49                  seats: `${car.passengers ? car.passengers.length : 0} / ${
50                    car.seats
51                  }`,
52                })}
53              />
54            </ListItem>
55          ))}
56        </List>
57      </div>
58    </Dialog>
59  );
60};
61
62const useStyles = makeStyles(theme => ({
63  offset: {
64    paddingTop: theme.spacing(7),
65  },
66}));
67
68export default CarDialog;