1import {forwardRef, Fragment} 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 List from '@material-ui/core/List';
  9import Container from '@material-ui/core/Container';
 10import Divider from '@material-ui/core/Divider';
 11import Slide from '@material-ui/core/Slide';
 12import {useTranslation} from 'react-i18next';
 13import VehicleItem from './VehicleItem';
 14import Typography from '@material-ui/core/Typography';
 15import {VehicleFieldsFragment} from '../../generated/graphql';
 16
 17interface Props {
 18  open: boolean;
 19  toggle: () => void;
 20  toggleNewTravel: ({
 21    opened,
 22    vehicle,
 23  }: {
 24    opened: boolean;
 25    vehicle?: VehicleFieldsFragment;
 26  }) => void;
 27  vehicles: Array<VehicleFieldsFragment>;
 28}
 29
 30const VehicleChoiceDialog = ({
 31  open,
 32  toggle,
 33  toggleNewTravel,
 34  vehicles,
 35}: Props) => {
 36  const {t} = useTranslation();
 37  const classes = useStyles();
 38
 39  return (
 40    <Dialog
 41      fullWidth
 42      maxWidth="xs"
 43      open={open}
 44      onClose={toggle}
 45      TransitionComponent={Transition}
 46    >
 47      <DialogTitle>{t('travel.vehicle.title')}</DialogTitle>
 48      <DialogContent dividers className={classes.content}>
 49        {(vehicles && vehicles.length != 0 && (
 50          <List>
 51            {vehicles.map((vehicle, index, {length}) => (
 52              <Fragment key={index}>
 53                <VehicleItem
 54                  vehicle={vehicle}
 55                  select={() => {
 56                    toggleNewTravel({vehicle, opened: true});
 57                    toggle();
 58                  }}
 59                />
 60                {index + 1 < length && <Divider />}
 61              </Fragment>
 62            ))}
 63          </List>
 64        )) || (
 65          <Container className={classes.empty}>
 66            <Typography>{t('travel.vehicle.empty')}</Typography>
 67          </Container>
 68        )}
 69      </DialogContent>
 70      <DialogActions className={classes.actions}>
 71        <Button
 72          className={classes.new}
 73          color="primary"
 74          fullWidth
 75          variant="outlined"
 76          onClick={() => {
 77            toggleNewTravel({opened: true});
 78            toggle();
 79          }}
 80        >
 81          {t('travel.vehicle.add')}
 82        </Button>
 83      </DialogActions>
 84    </Dialog>
 85  );
 86};
 87
 88const Transition = forwardRef(function Transition(props, ref) {
 89  return <Slide direction="up" ref={ref} {...props} />;
 90});
 91
 92const useStyles = makeStyles(theme => ({
 93  actions: {
 94    justifyContent: 'center',
 95  },
 96  content: {
 97    padding: 0,
 98  },
 99  new: {
100    maxWidth: '300px',
101  },
102  empty: {
103    padding: theme.spacing(2, 3)
104  }
105}));
106
107export default VehicleChoiceDialog;