1import React, {useState, useReducer, useEffect} from 'react';
  2import {useTranslation} from 'react-i18next';
  3import {useEvent, EventProvider} from '../contexts/Event';
  4import Layout from '../layouts/Default';
  5import Loading from './Loading';
  6import EventAppBar from '../containers/EventAppBar';
  7import EventFab from '../containers/EventFab';
  8import CarColumns from '../containers/CarColumns';
  9import NewCarDialog from '../containers/NewCarDialog';
 10import AddToMyEventDialog from '../containers/AddToMyEventDialog';
 11
 12const Event = () => {
 13  const {t} = useTranslation();
 14  const [isAddToMyEvent, setIsAddToMyEvent] = useState(false);
 15  const [detailsOpen, toggleDetails] = useReducer(i => !i, false);
 16  const [openNewCar, toggleNewCar] = useReducer(i => !i, false);
 17  const {event, setIsEditing} = useEvent();
 18
 19  useEffect(() => {
 20    window.scrollTo(0, 0);
 21  }, []);
 22
 23  useEffect(() => {
 24    if (!detailsOpen) setIsEditing(false);
 25  }, [detailsOpen]); // eslint-disable-line react-hooks/exhaustive-deps
 26
 27  if (!event) return <Loading />;
 28
 29  return (
 30    <Layout title={t('meta.event_title', {event})}>
 31      <EventAppBar
 32        detailsOpen={detailsOpen}
 33        toggleDetails={toggleDetails}
 34        setIsAddToMyEvent={setIsAddToMyEvent}
 35      />
 36      <CarColumns toggleNewCar={toggleNewCar} />
 37      <EventFab toggleNewCar={toggleNewCar} open={openNewCar} />
 38      <NewCarDialog open={openNewCar} toggle={toggleNewCar} />
 39      <AddToMyEventDialog
 40        open={isAddToMyEvent}
 41        onClose={() => setIsAddToMyEvent(false)}
 42        event={event}
 43      />
 44    </Layout>
 45  );
 46};
 47
 48// const EventWithContext = props => (
 49//   <EventProvider {...props}>
 50//     <Event {...props} />
 51//   </EventProvider>
 52// );
 53// export default EventWithContext;
 54
 55// <AppBar
 56// position="static"
 57// color="primary"
 58// className={classes.appbar}
 59// id={(isEditing && 'EditEvent') || (detailsOpen && 'Details') || 'Menu'}
 60// >
 61// <Toolbar>
 62//   <div className={classes.name}>
 63//     <Typography variant="h6" noWrap id="MenuHeaderTitle">
 64//       {event.name}
 65//     </Typography>
 66//     {detailsOpen && !isEditing && (
 67//       <IconButton
 68//         color="inherit"
 69//         edge="end"
 70//         id="CloseDetailsBtn"
 71//         onClick={() => setIsEditing(true)}
 72//       >
 73//         <Icon>edit</Icon>
 74//       </IconButton>
 75//     )}
 76//     {detailsOpen && isEditing && (
 77//       <IconButton
 78//         color="inherit"
 79//         edge="end"
 80//         id="EditEventSubmit"
 81//         onClick={onEventSave}
 82//       >
 83//         <Icon>done</Icon>
 84//       </IconButton>
 85//     )}
 86//   </div>
 87//   {!detailsOpen && (
 88//     <>
 89//       <IconButton
 90//         color="inherit"
 91//         edge="end"
 92//         id="ShareBtn"
 93//         onClick={onShare}
 94//         className={classes.shareIcon}
 95//       >
 96//         <Icon>share</Icon>
 97//       </IconButton>
 98//       <IconButton
 99//         color="inherit"
100//         edge="end"
101//         id="MenuMoreInfo"
102//         onClick={e => setAnchorEl(e.currentTarget)}
103//       >
104//         <Icon>more_vert</Icon>
105//       </IconButton>
106//     </>
107//   )}
108//   {detailsOpen && (
109//     <IconButton
110//       color="inherit"
111//       edge="end"
112//       id="CloseDetailsBtn"
113//       onClick={() => {
114//         setIsEditing(false);
115//         toggleDetails();
116//       }}
117//     >
118//       <Icon>close</Icon>
119//     </IconButton>
120//   )}
121//   <EventMenu
122//     anchorEl={anchorEl}
123//     setAnchorEl={setAnchorEl}
124//     actions={[
125//       {
126//         label: detailsOpen
127//           ? t('event.actions.hide_details')
128//           : t('event.actions.show_details'),
129//         onClick: toggleDetails,
130//         id: 'DetailsTab',
131//       },
132//       !token && {
133//         label: t('event.actions.add_to_my_events'),
134//         onClick: addToMyEvents,
135//         id: 'AddToMyEventsTab',
136//       },
137//       !!token && {
138//         label: t('menu.dashboard'),
139//         onClick: goToDashboard,
140//         id: 'GoToDashboardTab',
141//       },
142//       !token && {
143//         label: t('menu.login'),
144//         onClick: signIn,
145//         id: 'SignInTab',
146//       },
147//       !token && {
148//         label: t('menu.register'),
149//         onClick: signUp,
150//         id: 'SignUpTab',
151//       },
152//       !!token && {
153//         label: t('menu.profile'),
154//         onClick: goProfile,
155//         id: 'ProfileTab',
156//       },
157//       {
158//         label: t('menu.about'),
159//         onClick: goAbout,
160//         id: 'AboutTab',
161//       },
162//     ].filter(Boolean)}
163//   />
164// </Toolbar>
165// {detailsOpen && (
166//   <Container className={classes.container} maxWidth="sm">
167//     <EventDetails toggleDetails={toggleDetails} />
168//   </Container>
169// )}
170// </AppBar>
171
172// const useStyles = makeStyles(theme => ({
173//   container: {
174//     padding: theme.spacing(2),
175//   },
176//   appbar: ({detailsOpen}) => ({
177//     overflow: 'hidden',
178//     height: detailsOpen ? '100vh' : theme.mixins.toolbar.minHeight,
179//     overflowY: detailsOpen ? 'scroll' : 'hidden',
180//     transition: 'height 0.3s ease',
181//     zIndex: theme.zIndex.appBar,
182//     position: 'fixed',
183//     top: 0,
184//   }),
185//   name: {
186//     flexGrow: 1,
187//     display: 'flex',
188//     alignItems: 'center',
189//   },
190//   shareIcon: {
191//     marginRight: theme.spacing(0),
192//   },
193// }));