1import React, {useState, useReducer, useEffect} from 'react';
  2import {useTranslation} from 'react-i18next';
  3import AppBar from '@material-ui/core/AppBar';
  4import Toolbar from '@material-ui/core/Toolbar';
  5import Container from '@material-ui/core/Container';
  6import Typography from '@material-ui/core/Typography';
  7import IconButton from '@material-ui/core/IconButton';
  8import Icon from '@material-ui/core/Icon';
  9import {makeStyles} from '@material-ui/core/styles';
 10import Layout from '../layouts/Default';
 11import EventMenu from '../containers/EventMenu';
 12import EventDetails from '../containers/EventDetails';
 13import EventFab from '../containers/EventFab';
 14import {useEvent, EventProvider} from '../contexts/Event';
 15import CarColumns from '../containers/CarColumns';
 16import {useToast} from '../contexts/Toast';
 17import NewCarDialog from '../containers/NewCarDialog';
 18import Loading from '../pages/Loading';
 19
 20const Event = () => {
 21  const {t} = useTranslation();
 22  const {addToast} = useToast();
 23  const [anchorEl, setAnchorEl] = useState(null);
 24  const [detailsOpen, toggleDetails] = useReducer(i => !i, false);
 25  const classes = useStyles({detailsOpen});
 26  const [openNewCar, toggleNewCar] = useReducer(i => !i, false);
 27  const {event, isEditing, setIsEditing, updateEvent} = useEvent();
 28
 29  useEffect(() => {
 30    window.scrollTo(0, 0);
 31  }, []);
 32
 33  useEffect(() => {
 34    if (!detailsOpen) setIsEditing(false);
 35  }, [detailsOpen]); // eslint-disable-line react-hooks/exhaustive-deps
 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 <Loading />;
 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          <Typography
 58            variant="h6"
 59            className={classes.name}
 60            id="MenuHeaderTitle"
 61          >
 62            {event.name}
 63          </Typography>
 64          {!detailsOpen && (
 65            <IconButton
 66              edge="end"
 67              id="MenuMoreInfo"
 68              onClick={e => setAnchorEl(e.currentTarget)}
 69            >
 70              <Icon className={classes.barIcon}>more_vert</Icon>
 71            </IconButton>
 72          )}
 73          {detailsOpen && !isEditing && (
 74            <IconButton
 75              edge="end"
 76              id="DetailsEditBtn"
 77              onClick={e => setIsEditing(true)}
 78            >
 79              <Icon className={classes.barIcon}>edit</Icon>
 80            </IconButton>
 81          )}
 82          {detailsOpen && isEditing && (
 83            <IconButton edge="end" id="EditEventSubmit" onClick={onEventSave}>
 84              <Icon className={classes.barIcon}>done</Icon>
 85            </IconButton>
 86          )}
 87          <EventMenu
 88            anchorEl={anchorEl}
 89            setAnchorEl={setAnchorEl}
 90            actions={[
 91              {
 92                label: detailsOpen
 93                  ? t('event.actions.hide_details')
 94                  : t('event.actions.show_details'),
 95                onClick: toggleDetails,
 96                id: 'DetailsTab',
 97              },
 98              {
 99                label: t('event.actions.add_car'),
100                onClick: toggleNewCar,
101                id: 'NewCarTab',
102              },
103              {
104                label: t('event.actions.invite'),
105                onClick: () => {},
106                id: 'InviteTab',
107              },
108            ]}
109          />
110        </Toolbar>
111        <Container className={classes.container} maxWidth="sm">
112          <EventDetails toggleDetails={toggleDetails} />
113        </Container>
114      </AppBar>
115      <CarColumns toggleNewCar={toggleNewCar} />
116      <EventFab toggleNewCar={toggleNewCar} />
117      <NewCarDialog open={openNewCar} toggle={toggleNewCar} />
118    </Layout>
119  );
120};
121
122const useStyles = makeStyles(theme => ({
123  container: {padding: theme.spacing(2)},
124  appbar: ({detailsOpen}) => ({
125    transition: 'height 0.3s ease',
126    overflow: 'hidden',
127    height: detailsOpen ? '100vh' : theme.mixins.toolbar.minHeight,
128    zIndex: theme.zIndex.appBar,
129  }),
130  name: {
131    flexGrow: 1,
132  },
133  barIcon: {
134    color: 'white',
135  },
136}));
137
138const EventWithContext = props => (
139  <EventProvider {...props}>
140    <Event {...props} />
141  </EventProvider>
142);
143export default EventWithContext;