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