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      }}
53      id={travel.id}
54    >
55      {isEditing ? (
56        <HeaderEditing travel={travel} toggleEditing={toggleEditing} />
57      ) : (
58        <Header travel={travel} toggleEditing={toggleEditing} />
59      )}
60      {!isEditing && (
61        <>
62          <Divider />
63          <AddPassengerButtons
64            getOnClickFunction={props.getAddPassengerFunction}
65            canAddSelf={connected}
66            registered={registered}
67            variant="travel"
68            disabled={disableNewPassengers}
69          />
70          {travel.passengers.data.length > 0 && <Divider />}
71          <PassengersList
72            passengers={travel.passengers.data}
73            onClick={actions.sendPassengerToWaitingList}
74            isTravel
75            Button={({onClick}: {onClick: () => void}) => (
76              <ListItemSecondaryAction>
77                <Button
78                  color="primary"
79                  onClick={onClick}
80                  tabIndex={-1}
81                >
82                  {t`travel.passengers.remove`}
83                </Button>
84              </ListItemSecondaryAction>
85            )}
86          />
87        </>
88      )}
89    </Paper>
90  );
91};
92
93export default Travel;