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