1import {
  2  Box,
  3  Button,
  4  Container,
  5  List,
  6  Paper,
  7  Typography,
  8  useMediaQuery,
  9} from '@mui/material';
 10import {
 11  PassengerInput,
 12  TravelEntity,
 13  TripAlertEntity,
 14  useCreatePassengerMutation,
 15  useEventTripAlertsQuery,
 16} from '../../generated/graphql';
 17import WaitingListItem from './WaitingListItem';
 18import {useState} from 'react';
 19import TravelSelectionModal from './TravelSelectionModal';
 20import useEventStore from '../../stores/useEventStore';
 21import useToastStore from '../../stores/useToastStore';
 22import {useTranslation} from 'next-i18next';
 23import {useRouter} from 'next/router';
 24import ListHeader from './ListHeader';
 25import theme from '../../theme';
 26
 27type Props = {};
 28
 29const TripAlertsList = (props: Props) => {
 30  const {t} = useTranslation();
 31  const router = useRouter();
 32  const mobile = useMediaQuery(theme.breakpoints.down('md'));
 33  const [focusAlert, setFocusAlert] = useState<TripAlertEntity>(null);
 34  const [createPassenger] = useCreatePassengerMutation();
 35  const event = useEventStore(s => s.event);
 36  const addToast = useToastStore(s => s.addToast);
 37  const clearToast = useToastStore(s => s.clearToast);
 38
 39  const {data} = useEventTripAlertsQuery({
 40    variables: {uuid: event?.uuid},
 41    skip: !event?.uuid,
 42  });
 43  const tripAlerts =
 44    data?.eventByUUID?.data?.attributes?.tripAlerts?.data || [];
 45
 46  const onAssign = async (travel: TravelEntity) => {
 47    try {
 48      const user = focusAlert.attributes.user.data;
 49      const passenger: PassengerInput = {
 50        email: user.attributes.email,
 51        location: focusAlert.attributes.address,
 52        travel: travel.id,
 53        user: user.id,
 54        event: event.id,
 55        name: user.attributes.firstName
 56          ? `${user.attributes.firstName} ${user.attributes.lastName}`
 57          : user.attributes.email,
 58      };
 59      await createPassenger({
 60        variables: {passenger},
 61        refetchQueries: ['eventTripAlerts'],
 62      });
 63      setFocusAlert(null);
 64      addToast(
 65        t('passenger.success.added_to_car', {
 66          name: passenger.name,
 67        }),
 68        <Button
 69          size="small"
 70          color="primary"
 71          variant="contained"
 72          onClick={() => {
 73            router.push(`/e/${event.uuid}`);
 74            clearToast();
 75          }}
 76        >
 77          {t('passenger.success.goToTravels')}
 78        </Button>
 79      );
 80    } catch (error) {
 81      console.error(error);
 82      addToast(t`passenger.errors.cant_select_travel`);
 83    }
 84  };
 85
 86  if (!tripAlerts || tripAlerts.length === 0)
 87    return (
 88      <Container maxWidth="sm" sx={{mt: 15, mx: 0, px: mobile ? 2 : 4}}>
 89        <Paper sx={{width: '480px', maxWidth: '100%'}}>
 90          <ListHeader />
 91          <Box p={2} textAlign="center">
 92            <Typography variant="caption">{t`passenger.waitingList.empty`}</Typography>
 93          </Box>
 94        </Paper>
 95      </Container>
 96    );
 97
 98  return (
 99    <Container maxWidth="sm" sx={{mt: 11, mx: 0, px: mobile ? 2 : 4}}>
100      <Paper sx={{width: '480px', maxWidth: '100%'}}>
101        <ListHeader />
102        <List>
103          {tripAlerts.map((tripAlert, idx, arr) => (
104            <WaitingListItem
105              key={tripAlert.id}
106              tripAlert={tripAlert}
107              onClick={() => setFocusAlert(tripAlert)}
108              isLast={idx === arr.length - 1}
109            />
110          ))}
111        </List>
112      </Paper>
113      <TravelSelectionModal
114        open={!!focusAlert}
115        onClose={() => setFocusAlert(null)}
116        onAssign={onAssign}
117      />
118    </Container>
119  );
120};
121
122export default TripAlertsList;