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';
 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?: VehicleFieldsFragment;
 27  }) => void;
 28  vehicles: Array<VehicleFieldsFragment>;
 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((vehicle, index, {length}) => (
 58              <Fragment key={index}>
 59                <VehicleItem
 60                  vehicle={vehicle}
 61                  select={() => {
 62                    toggleNewTravel({vehicle, opened: true});
 63                    toggle();
 64                  }}
 65                />
 66                {index + 1 < length && <Divider />}
 67              </Fragment>
 68            ))}
 69          </List>
 70        )) || (
 71          <Container className={classes.empty}>
 72            <Typography>{t('travel.vehicle.empty')}</Typography>
 73          </Container>
 74        )}
 75      </DialogContent>
 76      <DialogActions className={classes.actions}>
 77        <Button
 78          className={classes.new}
 79          color="primary"
 80          fullWidth
 81          variant="outlined"
 82          onClick={() => {
 83            toggleNewTravel({opened: true});
 84            toggle();
 85          }}
 86        >
 87          {t('travel.vehicle.add')}
 88        </Button>
 89      </DialogActions>
 90    </Dialog>
 91  );
 92};
 93
 94const Transition = forwardRef(function Transition(props, ref) {
 95  return <Slide direction="up" ref={ref} {...props} />;
 96});
 97
 98const useStyles = makeStyles(theme => ({
 99  actions: {
100    justifyContent: 'center',
101  },
102  content: {
103    padding: 0,
104  },
105  new: {
106    maxWidth: '300px',
107  },
108  empty: {
109    padding: theme.spacing(2, 3),
110  },
111  closeIcon: {
112    position: 'absolute',
113    top: theme.spacing(2),
114    right: theme.spacing(2),
115    cursor: 'pointer',
116    padding: theme.spacing(0.5),
117    width: theme.spacing(4),
118    height: theme.spacing(4),
119  },
120}));
121
122export default VehicleChoiceDialog;