1import React, { useState, useReducer, useEffect } from "react";
  2import { useTranslation } from "react-i18next";
  3import AppBar from "@material-ui/core/AppBar";
  4import TextField from "../components/TextField";
  5import Toolbar from "@material-ui/core/Toolbar";
  6import Container from "@material-ui/core/Container";
  7import Typography from "@material-ui/core/Typography";
  8import IconButton from "@material-ui/core/IconButton";
  9import Icon from "@material-ui/core/Icon";
 10import { makeStyles } from "@material-ui/core/styles";
 11import Layout from "../layouts/Default";
 12import EventMenu from "../containers/EventMenu";
 13import EventDetails from "../containers/EventDetails";
 14import { useEvent, EventProvider } from "../contexts/Event";
 15import CarColumns from "../containers/CarColumns";
 16import { useToast } from "../contexts/Toast";
 17
 18const Event = () => {
 19  const { t } = useTranslation();
 20  const { addToast } = useToast();
 21  const [anchorEl, setAnchorEl] = useState(null);
 22  const [detailsOpen, toggleDetails] = useReducer((i) => !i, false);
 23  const classes = useStyles({ detailsOpen });
 24  const {
 25    event,
 26    isEditing,
 27    setIsEditing,
 28    editingEvent,
 29    setEditingEvent,
 30    updateEvent,
 31  } = useEvent();
 32
 33  useEffect(() => {
 34    if (!detailsOpen) setIsEditing(false);
 35  }, [detailsOpen]);
 36
 37  const onEventSave = async (e) => {
 38    try {
 39      await updateEvent();
 40      setIsEditing(false);
 41    } catch (error) {
 42      console.error(error);
 43      addToast(t("event.errors.cant_update"));
 44    }
 45  };
 46
 47  if (!event) return <div>{t("generic.loading")}</div>;
 48
 49  return (
 50    <Layout>
 51      <AppBar
 52        position="static"
 53        className={classes.appbar}
 54        id={isEditing ? "EditEvent" : detailsOpen ? "Details" : "Menu"}
 55      >
 56        <Toolbar>
 57          {isEditing ? (
 58            <TextField
 59              light
 60              value={editingEvent.name ?? event.name}
 61              onChange={(e) =>
 62                setEditingEvent({ ...editingEvent, name: e.target.value })
 63              }
 64              id="EditEventName"
 65              name="name"
 66            />
 67          ) : (
 68            <Typography
 69              variant="h6"
 70              className={classes.name}
 71              id="MenuHeaderTitle"
 72            >
 73              {event.name}
 74            </Typography>
 75          )}
 76          {!detailsOpen && (
 77            <IconButton
 78              edge="end"
 79              id="MenuMoreInfo"
 80              onClick={(e) => setAnchorEl(e.currentTarget)}
 81            >
 82              <Icon className={classes.barIcon}>more_vert</Icon>
 83            </IconButton>
 84          )}
 85          {detailsOpen && !isEditing && (
 86            <IconButton
 87              edge="end"
 88              id="DetailsEditBtn"
 89              onClick={(e) => setIsEditing(true)}
 90            >
 91              <Icon className={classes.barIcon}>edit</Icon>
 92            </IconButton>
 93          )}
 94          {detailsOpen && isEditing && (
 95            <IconButton edge="end" id="EditEventSubmit" onClick={onEventSave}>
 96              <Icon className={classes.barIcon}>done</Icon>
 97            </IconButton>
 98          )}
 99          <EventMenu
100            anchorEl={anchorEl}
101            setAnchorEl={setAnchorEl}
102            actions={[
103              {
104                label: detailsOpen
105                  ? t("event.actions.hide_details")
106                  : t("event.actions.show_details"),
107                onClick: toggleDetails,
108                id: "DetailsTab",
109              },
110              {
111                label: t("event.actions.add_car"),
112                onClick: () => {},
113                id: "NewCarTab",
114              },
115              {
116                label: t("event.actions.invite"),
117                onClick: () => {},
118                id: "InviteTab",
119              },
120            ]}
121          />
122        </Toolbar>
123        <Container className={classes.container} maxWidth="sm">
124          <EventDetails toggleDetails={toggleDetails} />
125        </Container>
126      </AppBar>
127      <CarColumns cars={event.cars} />
128    </Layout>
129  );
130};
131
132const useStyles = makeStyles((theme) => ({
133  container: { padding: theme.spacing(2) },
134  appbar: ({ detailsOpen }) => ({
135    transition: "height 0.3s ease",
136    overflow: "hidden",
137    height: detailsOpen ? "100vh" : theme.mixins.toolbar.minHeight,
138  }),
139  name: {
140    flexGrow: 1,
141  },
142  barIcon: {
143    color: "white",
144  },
145}));
146
147export default (props) => (
148  <EventProvider {...props}>
149    <Event {...props} />
150  </EventProvider>
151);