1import moment from 'moment';
  2import { styled } from '@mui/material/styles';
  3import Link from '@mui/material/Link';
  4import Typography from '@mui/material/Typography';
  5import Button from '@mui/material/Button';
  6import Slide from '@mui/material/Slide';
  7import Dialog from '@mui/material/Dialog';
  8import AppBar from '@mui/material/AppBar';
  9import Toolbar from '@mui/material/Toolbar';
 10import ListItem from '@mui/material/ListItem';
 11import List from '@mui/material/List';
 12import IconButton from '@mui/material/IconButton';
 13import Icon from '@mui/material/Icon';
 14import Box from '@mui/material/Box';
 15import {useTranslation} from 'react-i18next';
 16import {forwardRef} from 'react';
 17import getMapsLink from '../../lib/getMapsLink';
 18import ShareEvent from '../ShareEvent';
 19import {Passenger, TravelEntity, Travel} from '../../generated/graphql';
 20
 21const PREFIX = 'TravelDialog';
 22
 23const classes = {
 24  offset: `${PREFIX}-offset`,
 25  rtlBox: `${PREFIX}-rtlBox`,
 26  info: `${PREFIX}-info`,
 27  listItem: `${PREFIX}-listItem`,
 28  date: `${PREFIX}-date`,
 29  button: `${PREFIX}-button`,
 30  noTravel: `${PREFIX}-noTravel`,
 31  noTravelImage: `${PREFIX}-noTravelImage`,
 32  share: `${PREFIX}-share`
 33};
 34
 35const StyledSlide = styled(Slide)((
 36  {
 37    theme
 38  }
 39) => ({
 40  [`& .${classes.offset}`]: {
 41    paddingTop: theme.spacing(7),
 42  },
 43
 44  [`& .${classes.rtlBox}`]: {
 45    display: 'flex',
 46    padding: 0,
 47    margin: 0,
 48    direction: 'rtl',
 49    [theme.breakpoints.down('md')]: {
 50      display: 'block',
 51      paddingBottom: theme.spacing(1),
 52    },
 53  },
 54
 55  [`& .${classes.info}`]: {
 56    padding: theme.spacing(0, 4, 0, 0),
 57    width: '350px',
 58    [theme.breakpoints.down('md')]: {
 59      padding: theme.spacing(0.5, 1),
 60      width: '100%',
 61      textAlign: 'left',
 62    },
 63  },
 64
 65  [`& .${classes.listItem}`]: {
 66    display: 'flex',
 67    justifyContent: 'left',
 68    [theme.breakpoints.down('md')]: {
 69      display: 'block',
 70      textAlign: 'center',
 71    },
 72  },
 73
 74  [`& .${classes.date}`]: {
 75    textTransform: 'capitalize',
 76    padding: theme.spacing(0, 0, 0.5, 0),
 77  },
 78
 79  [`& .${classes.button}`]: {
 80    padding: theme.spacing(1, 15),
 81    margin: theme.spacing(1),
 82  },
 83
 84  [`& .${classes.noTravel}`]: {
 85    margin: '120px auto 0 auto',
 86    width: '330px',
 87    maxWidth: '100%',
 88    textAlign: 'center',
 89  },
 90
 91  [`& .${classes.noTravelImage}`]: {
 92    width: 'calc(100% - 2px)',
 93    [theme.breakpoints.down('md')]: {
 94      width: 'calc(50% - 2px)',
 95    },
 96  },
 97
 98  [`& .${classes.share}`]: {
 99    marginTop: theme.spacing(2),
100    backgroundColor: '#fff',
101  }
102}));
103
104interface Props {
105  eventName: string;
106  travels: Array<TravelEntity>;
107  passenger: Passenger;
108  open: boolean;
109  onClose: () => void;
110  onSelect: (travel: Travel & {id: string}) => void;
111}
112
113const TravelDialog = ({
114  eventName,
115  travels,
116  passenger,
117  open,
118  onClose,
119  onSelect,
120}: Props) => {
121
122  const {t} = useTranslation();
123
124  const availableTravels = travels?.filter(
125    ({attributes}) =>
126      attributes.passengers &&
127      attributes?.seats > attributes.passengers.data.length
128  );
129
130  return (
131    <Dialog
132      fullScreen
133      open={open}
134      onClose={onClose}
135      TransitionComponent={Transition}
136    >
137      <AppBar>
138        <Toolbar>
139          <IconButton onClick={onClose} color="inherit" size="large">
140            <Icon>arrow_back_ios</Icon>
141          </IconButton>
142          <Typography variant="h5">
143            {t('passenger.creation.available_cars')}
144          </Typography>
145        </Toolbar>
146      </AppBar>
147      {(availableTravels.length === 0 && (
148        <Box className={classes.noTravel}>
149          <Typography variant="h5">
150            {t('passenger.creation.no_travel.title')}
151          </Typography>
152          <img className={classes.noTravelImage} src="/assets/car.png" />
153          <Typography>
154            {t('passenger.creation.no_travel.desc', {name: passenger?.name})}
155          </Typography>
156          <ShareEvent
157            className={classes.share}
158            title={`Caroster ${eventName}`}
159          />
160        </Box>
161      )) || (
162        <div className={classes.offset}>
163          <List disablePadding>
164            {availableTravels.map(({id, attributes}, i) => {
165              const travel = {id, ...attributes};
166              const passengersCount = travel?.passengers?.data.length || 0;
167              const counter = `${passengersCount} / ${travel?.seats || 0}`;
168              return (
169                <ListItem key={i} divider className={classes.listItem}>
170                  <Box className={classes.rtlBox}>
171                    <Box className={classes.info}>
172                      <Typography variant="subtitle1" className={classes.date}>
173                        {t('passenger.creation.departure')}
174                        {moment(travel.departure).format('LLLL')}
175                      </Typography>
176                      <Link
177                        target="_blank"
178                        rel="noreferrer"
179                        href={getMapsLink(travel.meeting)}
180                        onClick={e => e.preventDefault}
181                      >
182                        {travel.meeting}
183                      </Link>
184                    </Box>
185                    <Box className={classes.info}>
186                      <Typography variant="h6">{travel.vehicleName}</Typography>
187                      <Typography variant="body2">
188                        {t('passenger.creation.seats', {seats: counter})}
189                      </Typography>
190                    </Box>
191                  </Box>
192                  <Button
193                    color="primary"
194                    variant="contained"
195                    onClick={() => onSelect(travel)}
196                    className={classes.button}
197                  >
198                    {t('passenger.creation.assign')}
199                  </Button>
200                </ListItem>
201              );
202            })}
203          </List>
204        </div>
205      )}
206    </Dialog>
207  );
208};
209
210const Transition = forwardRef(function Transition(props, ref) {
211  return <StyledSlide direction="up" ref={ref} {...props} />;
212});
213
214export default TravelDialog;