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            id: event.id,
 71            eventUpdate: {
 72              waitingList,
 73            },
 74          },
 75        });
 76        await updateCar({
 77          variables: {
 78            id: car.id,
 79            carUpdate: {
 80              passengers,
 81            },
 82          },
 83        });
 84      } catch (error) {
 85        console.error(error);
 86        addToast(t('car.errors.cant_remove_passenger'));
 87      }
 88    }
 89  };
 90
 91  return (
 92    <Paper className={classes.root}>
 93      {isEditing ? (
 94        <HeaderEditing car={car} toggleEditing={toggleEditing} />
 95      ) : (
 96        <Header car={car} toggleEditing={toggleEditing} />
 97      )}
 98      <Divider />
 99      {!isEditing && (
100        <PassengersList
101          passengers={car.passengers}
102          places={car.seats}
103          addPassenger={addPassenger}
104          onClick={removePassenger}
105          icon="close"
106        />
107      )}
108    </Paper>
109  );
110};
111
112const useStyles = makeStyles(theme => ({
113  root: {
114    position: 'relative',
115  },
116}));
117
118export default Car;