1import {forwardRef, Fragment} from 'react';
  2import {styled, useTheme} from '@mui/material/styles';
  3import Dialog from '@mui/material/Dialog';
  4import DialogActions from '@mui/material/DialogActions';
  5import DialogContent from '@mui/material/DialogContent';
  6import DialogTitle from '@mui/material/DialogTitle';
  7import Button from '@mui/material/Button';
  8import List from '@mui/material/List';
  9import Container from '@mui/material/Container';
 10import Divider from '@mui/material/Divider';
 11import Slide from '@mui/material/Slide';
 12import {useTranslation} from 'react-i18next';
 13import VehicleItem from './VehicleItem';
 14import Typography from '@mui/material/Typography';
 15import {Vehicle, VehicleEntity} from '../../generated/graphql';
 16import Icon from '@mui/material/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 theme = useTheme();
 38  const {t} = useTranslation();
 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
 51          sx={{
 52            position: 'absolute',
 53            top: theme.spacing(2),
 54            right: theme.spacing(2),
 55            cursor: 'pointer',
 56            padding: theme.spacing(0.5),
 57            width: theme.spacing(4),
 58            height: theme.spacing(4),
 59          }}
 60          onClick={toggle}
 61          aria-label="close"
 62        >
 63          close
 64        </Icon>
 65      </DialogTitle>
 66      <DialogContent dividers sx={{padding: 0}}>
 67        {(vehicles && vehicles.length != 0 && (
 68          <List>
 69            {vehicles.map(({id, attributes}, index, {length}) => (
 70              <Fragment key={index}>
 71                <VehicleItem
 72                  vehicle={{id, ...attributes}}
 73                  select={() => {
 74                    toggleNewTravel({
 75                      vehicle: {id, ...attributes},
 76                      opened: true,
 77                    });
 78                    toggle();
 79                  }}
 80                />
 81                {index + 1 < length && <Divider />}
 82              </Fragment>
 83            ))}
 84          </List>
 85        )) || (
 86          <Container sx={{padding: theme.spacing(2, 3)}}>
 87            <Typography>{t('travel.vehicle.empty')}</Typography>
 88          </Container>
 89        )}
 90      </DialogContent>
 91      <DialogActions sx={{justifyContent: 'center'}}>
 92        <Button
 93          sx={{maxWidth: '300px'}}
 94          color="primary"
 95          fullWidth
 96          variant="outlined"
 97          onClick={() => {
 98            toggleNewTravel({opened: true});
 99            toggle();
100          }}
101        >
102          {t('travel.vehicle.add')}
103        </Button>
104      </DialogActions>
105    </Dialog>
106  );
107};
108
109const Transition = forwardRef(function Transition(props, ref) {
110  return <Slide direction="up" ref={ref} {...props} />;
111});
112
113export default VehicleChoiceDialog;