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 PassengersList from '../PassengersList';
 6import AddPassengerButtons from '../AddPassengerButtons';
 7import HeaderEditing from './HeaderEditing';
 8import Header from './Header';
 9import useActions from './useActions';
10import {Travel as TravelType} from '../../generated/graphql';
11import ClearButton from '../ClearButton';
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
27  return (
28    <Paper className={classes.root}>
29      {isEditing ? (
30        <HeaderEditing travel={travel} toggleEditing={toggleEditing} />
31      ) : (
32        <Header travel={travel} toggleEditing={toggleEditing} />
33      )}
34      <Divider />
35      <AddPassengerButtons
36        getOnClickFunction={props.getAddPassengerFunction}
37        canAddSelf={props.canAddSelf}
38        variant="travel"
39      />
40      <Divider />
41      {!isEditing && (
42        <PassengersList
43          passengers={travel.passengers}
44          places={travel?.vehicle?.seats}
45          onClick={actions.sendPassengerToWaitingList}
46          isVehicle
47          Button={({onClick}: {onClick: () => void}) => (
48            <ClearButton icon="close" onClick={onClick} tabIndex={-1} />
49          )}
50          isTravel
51        />
52      )}
53    </Paper>
54  );
55};
56
57const useStyles = makeStyles(theme => ({
58  root: {
59    position: 'relative',
60  },
61}));
62
63export default Travel;