1import {forwardRef} from 'react';
  2import moment from 'moment';
  3import Link from '@material-ui/core/Link';
  4import Typography from '@material-ui/core/Typography';
  5import Button from '@material-ui/core/Button';
  6import Slide from '@material-ui/core/Slide';
  7import Dialog from '@material-ui/core/Dialog';
  8import AppBar from '@material-ui/core/AppBar';
  9import Toolbar from '@material-ui/core/Toolbar';
 10import ListItem from '@material-ui/core/ListItem';
 11import List from '@material-ui/core/List';
 12import IconButton from '@material-ui/core/IconButton';
 13import Icon from '@material-ui/core/Icon';
 14import Box from '@material-ui/core/Box';
 15import {makeStyles} from '@material-ui/core/styles';
 16import {useTranslation} from 'react-i18next';
 17
 18const TravelDialog = ({travels, open, onClose, onSelect}) => {
 19  const classes = useStyles();
 20  const {t} = useTranslation();
 21
 22  return (
 23    <Dialog
 24      fullScreen
 25      open={open}
 26      onClose={onClose}
 27      TransitionComponent={Transition}
 28    >
 29      <AppBar>
 30        <Toolbar>
 31          <IconButton onClick={onClose} color="inherit">
 32            <Icon>arrow_back_ios</Icon>
 33          </IconButton>
 34          <Typography variant="h5">
 35            {t('passenger.creation.available_cars')}
 36          </Typography>
 37        </Toolbar>
 38      </AppBar>
 39      <div className={classes.offset}>
 40        <List disablePadding>
 41          {travels?.map((travel, i) => {
 42            const passengers = travel.passengers ? travel.passengers.length : 0;
 43            const counter = `${passengers} / ${travel?.vehicle?.seats}`;
 44            return (
 45              <ListItem
 46                key={i}
 47                divider
 48                disabled={passengers === travel.seats}
 49                className={classes.listItem}
 50              >
 51                <Box className={classes.rtlBox}>
 52                  <Box className={classes.info}>
 53                    <Typography variant="subtitle1" className={classes.date}>
 54                      {t('passenger.creation.departure')}
 55                      {moment(travel.departure).format('LLLL')}
 56                    </Typography>
 57                    <Link
 58                      target="_blank"
 59                      rel="noreferrer"
 60                      href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
 61                        travel.meeting
 62                      )}`}
 63                      onClick={e => e.preventDefault}
 64                    >
 65                      {travel.meeting}
 66                    </Link>
 67                  </Box>
 68                  <Box className={classes.info}>
 69                    <Typography variant="h6">{travel.vehicle?.name}</Typography>
 70                    <Typography variant="body2">
 71                      {t('passenger.creation.seats', {seats: counter})}
 72                    </Typography>
 73                  </Box>
 74                </Box>
 75                <Button
 76                  color="primary"
 77                  variant="contained"
 78                  onClick={() => onSelect(travel)}
 79                  className={classes.button}
 80                >
 81                  {t('passenger.creation.assign')}
 82                </Button>
 83              </ListItem>
 84            );
 85          })}
 86        </List>
 87      </div>
 88    </Dialog>
 89  );
 90};
 91
 92const Transition = forwardRef(function Transition(props, ref) {
 93  return <Slide direction="up" ref={ref} {...props} />;
 94});
 95
 96const useStyles = makeStyles(theme => ({
 97  offset: {
 98    paddingTop: theme.spacing(7),
 99  },
100  rtlBox: {
101    display: 'flex',
102    padding: 0,
103    margin: 0,
104    direction: 'rtl',
105    [theme.breakpoints.down('sm')]: {
106      display: 'block',
107      paddingBottom: theme.spacing(1),
108    },
109  },
110  info: {
111    padding: theme.spacing(0, 4, 0, 0),
112    [theme.breakpoints.down('sm')]: {
113      padding: theme.spacing(0.5, 1),
114      width: '100%',
115      textAlign: 'left',
116    },
117  },
118  listItem: {
119    display: 'flex',
120    justifyContent: 'left',
121    [theme.breakpoints.down('sm')]: {
122      display: 'block',
123      textAlign: 'center',
124    },
125  },
126  date: {
127    textTransform: 'capitalize',
128    padding: theme.spacing(0, 0, 0.5, 0),
129  },
130  button: {
131    padding: theme.spacing(1, 15),
132  },
133}));
134
135export default TravelDialog;