1import Box from '@mui/material/Box';
  2import Typography from '@mui/material/Typography';
  3import List from '@mui/material/List';
  4import Button from '@mui/material/Button';
  5import Paper from '@mui/material/Paper';
  6import Container from '@mui/material/Container';
  7import {useTranslation} from 'react-i18next';
  8import {useRouter} from 'next/router';
  9import ShareEvent from '../ShareEvent';
 10import useToastStore from '../../stores/useToastStore';
 11import useEventStore from '../../stores/useEventStore';
 12import usePassengersActions from '../../hooks/usePassengersActions';
 13import AvailableTravel from './AvailableTravel';
 14import {TravelEntity} from '../../generated/graphql';
 15
 16const AssignPassenger = () => {
 17  const {t} = useTranslation();
 18  const {addToast, clearToast} = useToastStore(({addToast, clearToast}) => ({
 19    addToast,
 20    clearToast,
 21  }));
 22  const event = useEventStore(s => s.event);
 23
 24  const router = useRouter();
 25  const {
 26    query: {passengerId},
 27  } = router;
 28  const {updatePassenger} = usePassengersActions();
 29
 30  if (!event) return null;
 31
 32  const {travels, name, waitingPassengers, uuid} = event;
 33
 34  const availableTravels = travels?.data?.filter(
 35    ({attributes}) =>
 36      attributes.passengers &&
 37      attributes?.seats > attributes.passengers.data.length
 38  );
 39  const passenger = waitingPassengers.data?.find(
 40    waitingPassenger => waitingPassenger.id === passengerId
 41  );
 42
 43  const assign = async (travel: TravelEntity) => {
 44    try {
 45      await updatePassenger(passengerId as string, {
 46        travel: travel.id,
 47      });
 48      addToast(
 49        t('passenger.success.added_to_car', {
 50          name: passenger.attributes.name,
 51        }),
 52        <Button
 53          size="small"
 54          color="primary"
 55          variant="contained"
 56          onClick={() => {
 57            router.push(`/e/${uuid}`);
 58            clearToast();
 59          }}
 60        >
 61          {t('passenger.success.goToTravels')}
 62        </Button>
 63      );
 64    } catch (error) {
 65      console.error(error);
 66      addToast(t('passenger.errors.cant_select_travel'));
 67    }
 68  };
 69
 70  return (
 71    <Container maxWidth="sm" sx={{mt: 7, mx: 0, p: 4}}>
 72      <Paper sx={{width: '480px', maxWidth: '100%', position: 'relative'}}>
 73        <div>
 74          {availableTravels.length === 0 && (
 75            <Box sx={{p: 2, textAlign: 'center'}}>
 76              <Typography variant="h4">
 77                {t('passenger.assign.no_travel.title')}
 78              </Typography>
 79              <Typography sx={{py: 2}}>
 80                {t('passenger.assign.no_travel.desc', {
 81                  name: passenger?.attributes?.name,
 82                })}
 83              </Typography>
 84              <ShareEvent title={`Caroster ${name}`} />
 85            </Box>
 86          )}
 87          {availableTravels.length > 0 && (
 88            <>
 89              <Typography
 90                sx={{p: 2}}
 91                variant="h4"
 92              >{t`passenger.assign.availableCars`}</Typography>
 93              <List disablePadding>
 94                {availableTravels.map((travel, index) => {
 95                  return (
 96                    <AvailableTravel
 97                      key={index}
 98                      travel={travel}
 99                      assign={assign}
100                    />
101                  );
102                })}
103              </List>
104            </>
105          )}
106        </div>
107      </Paper>
108    </Container>
109  );
110};
111
112export default AssignPassenger;