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