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