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