1import {forwardRef} from 'react';
 2import {makeStyles} from '@material-ui/core/styles';
 3import Dialog from '@material-ui/core/Dialog';
 4import DialogActions from '@material-ui/core/DialogActions';
 5import DialogContent from '@material-ui/core/DialogContent';
 6import DialogTitle from '@material-ui/core/DialogTitle';
 7import Button from '@material-ui/core/Button';
 8import Slide from '@material-ui/core/Slide';
 9import {useTranslation} from 'react-i18next';
10
11const VehicleChoiceDialog = ({open, toggle, toggleNewTravel}) => {
12  const {t} = useTranslation();
13  const classes = useStyles();
14
15  return (
16    <Dialog
17      fullWidth
18      maxWidth="sm"
19      open={open}
20      onClose={toggle}
21      TransitionComponent={Transition}
22    >
23      <DialogTitle>{t('travel.vehicle.title')}</DialogTitle>
24      <DialogContent dividers></DialogContent>
25      <DialogActions className={classes.actions}>
26        <Button
27          color="primary"
28          variant="outlined"
29          fullWidth
30          onClick={() => {
31            toggleNewTravel();
32            toggle();
33          }}
34        >
35          {t('travel.vehicle.add')}
36        </Button>
37      </DialogActions>
38    </Dialog>
39  );
40};
41
42const Transition = forwardRef(function Transition(props, ref) {
43  return <Slide direction="up" ref={ref} {...props} />;
44});
45
46const useStyles = makeStyles(theme => ({
47  actions: {
48    padding: theme.spacing(2, 3),
49  },
50}));
51
52export default VehicleChoiceDialog;