1import {useReducer} from 'react';
 2import {makeStyles} from '@material-ui/core/styles';
 3import Divider from '@material-ui/core/Divider';
 4import Paper from '@material-ui/core/Paper';
 5import {Travel as TravelType} from '../../generated/graphql';
 6import ClearButton from '../ClearButton';
 7import PassengersList from '../PassengersList';
 8import AddPassengerButtons from '../AddPassengerButtons';
 9import HeaderEditing from './HeaderEditing';
10import Header from './Header';
11import useActions from './useActions';
12
13interface Props {
14  travel: TravelType;
15  getAddPassengerFunction: (addSelf: boolean) => () => void;
16  canAddSelf: boolean;
17}
18
19const Travel = (props: Props) => {
20  const {travel} = props;
21  const classes = useStyles();
22  const [isEditing, toggleEditing] = useReducer(i => !i, false);
23  const actions = useActions({travel});
24
25  if (!travel) return null;
26  const disableNewPassengers =
27    travel.passengers.length >= travel.seats;
28
29  return (
30    <Paper className={classes.root}>
31      {isEditing ? (
32        <HeaderEditing travel={travel} toggleEditing={toggleEditing} />
33      ) : (
34        <Header travel={travel} toggleEditing={toggleEditing} />
35      )}
36      <Divider />
37      <AddPassengerButtons
38        getOnClickFunction={props.getAddPassengerFunction}
39        canAddSelf={props.canAddSelf}
40        variant="travel"
41        disabled={disableNewPassengers}
42      />
43      <Divider />
44      {!isEditing && (
45        <PassengersList
46          passengers={travel.passengers}
47          places={travel?.seats}
48          onClick={actions.sendPassengerToWaitingList}
49          isVehicle
50          Button={({onClick}: {onClick: () => void}) => (
51            <ClearButton icon="close" onClick={onClick} tabIndex={-1} />
52          )}
53          isTravel
54        />
55      )}
56    </Paper>
57  );
58};
59
60const useStyles = makeStyles(theme => ({
61  root: {
62    position: 'relative',
63  },
64}));
65
66export default Travel;