1import {useMemo, useReducer} from 'react';
 2import Divider from '@mui/material/Divider';
 3import Paper from '@mui/material/Paper';
 4import Button from '@mui/material/Button';
 5import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 6import {useTheme} from '@mui/styles';
 7import {useTranslation} from 'react-i18next';
 8import HeaderEditing from './HeaderEditing';
 9import Header from './Header';
10import useActions from './useActions';
11import PassengersList from '../PassengersList';
12import AddPassengerButtons from '../AddPassengerButtons';
13import useProfile from '../../hooks/useProfile';
14import useMapStore from '../../stores/useMapStore';
15import {Travel as TravelType} from '../../generated/graphql';
16
17interface Props {
18  travel: TravelType & {id: string};
19  getAddPassengerFunction: (addSelf: boolean) => () => void;
20}
21
22const Travel = (props: Props) => {
23  const {travel} = props;
24
25  const {t} = useTranslation();
26  const theme = useTheme();
27  const [isEditing, toggleEditing] = useReducer(i => !i, false);
28  const actions = useActions({travel});
29  const {userId, connected} = useProfile();
30  const {focusedTravel} = useMapStore();
31  const focused = focusedTravel === travel.id;
32
33  if (!travel) return null;
34  const disableNewPassengers = travel.passengers.data?.length >= travel.seats;
35
36  const registered = useMemo(() => {
37    if (!connected) return false;
38    const isInTravel = travel.passengers?.data.some(
39      passenger => passenger.attributes.user?.data?.id === `${userId}`
40    );
41
42    return isInTravel;
43  }, [travel, userId]);
44
45  return (
46    <Paper
47      sx={{
48        position: 'relative',
49        boxShadow: focused
50          ? `0px 0px 5px 2px ${theme.palette.primary.main}`
51          : 'none',
52          scrollMarginTop: theme.spacing(2)
53      }}
54      id={travel.id}
55    >
56      {isEditing ? (
57        <HeaderEditing travel={travel} toggleEditing={toggleEditing} />
58      ) : (
59        <Header travel={travel} toggleEditing={toggleEditing} />
60      )}
61      {!isEditing && (
62        <>
63          <Divider />
64          <AddPassengerButtons
65            getOnClickFunction={props.getAddPassengerFunction}
66            canAddSelf={connected}
67            registered={registered}
68            variant="travel"
69            disabled={disableNewPassengers}
70          />
71          {travel.passengers.data.length > 0 && <Divider />}
72          <PassengersList
73            passengers={travel.passengers.data}
74            onClick={actions.sendPassengerToWaitingList}
75            isTravel
76            Button={({onClick}: {onClick: () => void}) => (
77              <ListItemSecondaryAction>
78                <Button
79                  color="primary"
80                  onClick={onClick}
81                  tabIndex={-1}
82                >
83                  {t`travel.passengers.remove`}
84                </Button>
85              </ListItemSecondaryAction>
86            )}
87          />
88        </>
89      )}
90    </Paper>
91  );
92};
93
94export default Travel;