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  toggleNewPassenger: () => void;
16}
17
18const Travel = (props: Props) => {
19  const {travel} = props;
20  const classes = useStyles();
21  const [isEditing, toggleEditing] = useReducer(i => !i, false);
22  const actions = useActions({travel});
23
24  if (!travel) return null;
25
26  return (
27    <Paper className={classes.root}>
28      {isEditing ? (
29        <HeaderEditing travel={travel} toggleEditing={toggleEditing} />
30      ) : (
31        <Header travel={travel} toggleEditing={toggleEditing} />
32      )}
33      <Divider />
34      <AddPassengerButtons toggleNewPassenger={props.toggleNewPassenger} />
35      <Divider />
36      {!isEditing && (
37        <PassengersList
38          passengers={travel.passengers}
39          places={travel?.vehicle?.seats}
40          addPassenger={actions.addPassenger}
41          onClick={actions.removePassenger}
42          isVehicle
43          Button={({onClick}: {onClick: () => void}) => (
44            <ClearButton icon="close" onClick={onClick} tabIndex={-1} />
45          )}
46          isTravel
47        />
48      )}
49    </Paper>
50  );
51};
52
53const useStyles = makeStyles(theme => ({
54  root: {
55    position: 'relative',
56  },
57}));
58
59export default Travel;