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 {useTranslation} from 'react-i18next';
  6import PassengersList from '../PassengersList';
  7import HeaderEditing from './HeaderEditing';
  8import Header from './Header';
  9import useEventStore from '../../stores/useEventStore';
 10import useToastStore from '../../stores/useToastStore';
 11import useAddToEvents from '../../hooks/useAddToEvents';
 12import {
 13  useUpdateCarMutation,
 14  useUpdateEventMutation,
 15} from '../../generated/graphql';
 16
 17const Car = ({car}) => {
 18  const classes = useStyles();
 19  const {t} = useTranslation();
 20  const event = useEventStore(s => s.event);
 21  const addToast = useToastStore(s => s.addToast);
 22  const [isEditing, toggleEditing] = useReducer(i => !i, false);
 23  const [updateEvent] = useUpdateEventMutation();
 24  const [updateCar] = useUpdateCarMutation();
 25  const {addToEvent} = useAddToEvents();
 26
 27  if (!car) return null;
 28
 29  const addPassenger = async passenger => {
 30    try {
 31      await updateCar({
 32        variables: {
 33          id: car.id,
 34          carUpdate: {
 35            passengers: [...(car.passengers || []), passenger],
 36          },
 37        },
 38      });
 39      addToEvent(event.id);
 40    } catch (error) {
 41      console.error(error);
 42    }
 43  };
 44
 45  const removePassenger = async idx => {
 46    if (car?.passengers) {
 47      try {
 48        await updateEvent({
 49          variables: {
 50            id: event.id,
 51            eventUpdate: {
 52              waiting_list: [
 53                ...(event.waiting_list || []),
 54                car.passengers[idx],
 55              ],
 56            },
 57          },
 58        });
 59        await updateCar({
 60          variables: {
 61            id: car.id,
 62            carUpdate: {
 63              passengers: car.passengers.filter((_, i) => i !== idx),
 64            },
 65          },
 66        });
 67      } catch (error) {
 68        console.error(error);
 69        addToast(t('car.errors.cant_remove_passenger'));
 70      }
 71    }
 72  };
 73
 74  return (
 75    <Paper className={classes.root}>
 76      {isEditing ? (
 77        <HeaderEditing car={car} toggleEditing={toggleEditing} />
 78      ) : (
 79        <Header car={car} toggleEditing={toggleEditing} />
 80      )}
 81      <Divider />
 82      {!isEditing && (
 83        <PassengersList
 84          passengers={car.passengers}
 85          places={car.seats}
 86          addPassenger={addPassenger}
 87          onClick={removePassenger}
 88          icon="close"
 89        />
 90      )}
 91    </Paper>
 92  );
 93};
 94
 95const useStyles = makeStyles(theme => ({
 96  root: {
 97    position: 'relative',
 98  },
 99}));
100
101export default Car;