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  Car as CarType,
 16  EditComponentPassengerPassengerInput as PassengerInput,
 17} from '../../generated/graphql';
 18
 19interface Props {
 20  car: CarType;
 21}
 22
 23const Car = (props: Props) => {
 24  const {car} = props;
 25  const classes = useStyles();
 26  const {t} = useTranslation();
 27  const event = useEventStore(s => s.event);
 28  const addToast = useToastStore(s => s.addToast);
 29  const [isEditing, toggleEditing] = useReducer(i => !i, false);
 30  const [updateEvent] = useUpdateEventMutation();
 31  const [updateCar] = useUpdateCarMutation();
 32  const {addToEvent} = useAddToEvents();
 33
 34  if (!car) return null;
 35
 36  const addPassenger = async (passenger: PassengerInput) => {
 37    try {
 38      const existingPassengers =
 39        car.passengers?.map(({__typename, ...item}) => item) || [];
 40      const passengers = [...existingPassengers, passenger];
 41      await updateCar({
 42        variables: {
 43          id: car.id,
 44          carUpdate: {
 45            passengers,
 46          },
 47        },
 48      });
 49      addToEvent(event.id);
 50    } catch (error) {
 51      console.error(error);
 52    }
 53  };
 54
 55  const removePassenger = async (passengerId: string) => {
 56    if (car?.passengers) {
 57      try {
 58        const {id, ...removedPassenger} =
 59          car.passengers?.find(item => item.id === passengerId) || {};
 60        const existingPassengers =
 61          car.passengers?.map(({__typename, ...item}) => item) || [];
 62        const waitingList = [...event.waitingList, removedPassenger].map(
 63          ({__typename, ...item}) => item
 64        );
 65        const passengers = existingPassengers.filter(
 66          item => item.id !== passengerId
 67        );
 68        await updateEvent({
 69          variables: {
 70            uuid: event.uuid,
 71            eventUpdate: {
 72              waitingList,
 73            },
 74          },
 75        });
 76        await updateCar({
 77          variables: {
 78            id: car.id,
 79            carUpdate: {
 80              passengers,
 81            },
 82          },
 83          refetchQueries: ['eventByUUID'],
 84        });
 85      } catch (error) {
 86        console.error(error);
 87        addToast(t('car.errors.cant_remove_passenger'));
 88      }
 89    }
 90  };
 91
 92  return (
 93    <Paper className={classes.root}>
 94      {isEditing ? (
 95        <HeaderEditing car={car} toggleEditing={toggleEditing} />
 96      ) : (
 97        <Header car={car} toggleEditing={toggleEditing} />
 98      )}
 99      <Divider />
100      {!isEditing && (
101        <PassengersList
102          passengers={car.passengers}
103          places={car.seats}
104          addPassenger={addPassenger}
105          onClick={removePassenger}
106          icon="close"
107          isCar
108        />
109      )}
110    </Paper>
111  );
112};
113
114const useStyles = makeStyles(theme => ({
115  root: {
116    position: 'relative',
117  },
118}));
119
120export default Car;