1import React, {useReducer} from 'react';
  2import Icon from '@material-ui/core/Icon';
  3import Fab from '@material-ui/core/Fab';
  4import {makeStyles} from '@material-ui/core/styles';
  5import {useTranslation} from 'react-i18next';
  6import {useEvent} from '../../contexts/Event';
  7import {useToast} from '../../contexts/Toast';
  8
  9const EventFab = ({toggleNewCar}) => {
 10  const {t} = useTranslation();
 11  const [open, toggleOpen] = useReducer(i => !i, false);
 12  const classes = useStyles({open});
 13  const {event} = useEvent();
 14  const {addToast} = useToast();
 15
 16  const onShare = async () => {
 17    if (!event) return null;
 18    // If navigator as share capability
 19    if (!!navigator.share) {
 20      const shareData = {
 21        title: `Caroster ${event.name}`,
 22        url: `${window.location.href}`,
 23      };
 24      return await navigator.share(shareData);
 25    }
 26    // Else copy URL in clipboard
 27    else if (!!navigator.clipboard) {
 28      await navigator.clipboard.writeText(window.location.href);
 29      addToast(t('event.actions.copied'));
 30      return true;
 31    }
 32  };
 33
 34  return (
 35    <>
 36      <div className={classes.fabContainer}>
 37        <Fab aria-label="more" onClick={toggleOpen}>
 38          <Icon>add</Icon>
 39        </Fab>
 40      </div>
 41      <div className={classes.actionContainer} onClick={toggleOpen}>
 42        <Fab
 43          color="primary"
 44          aria-label="share"
 45          variant="extended"
 46          className={classes.extendedFab}
 47          onClick={onShare}
 48        >
 49          <Icon className={classes.extendedIcon}>share</Icon>
 50          Partager
 51        </Fab>
 52        <Fab
 53          color="secondary"
 54          aria-label="add-car"
 55          variant="extended"
 56          className={classes.extendedFab}
 57          onClick={toggleNewCar}
 58        >
 59          <Icon className={classes.extendedIcon}>directions_car</Icon>
 60          Ajouter
 61        </Fab>
 62      </div>
 63    </>
 64  );
 65};
 66
 67const useStyles = makeStyles(theme => ({
 68  fabContainer: ({open}) => ({
 69    position: 'fixed',
 70    bottom: open ? '-4rem' : theme.spacing(2),
 71    right: theme.spacing(2),
 72    transition: 'all 0.3s ease',
 73    transform: open ? 'rotate(45deg)' : '',
 74    zIndex: theme.zIndex.speedDial,
 75    '& .MuiFab-root': {
 76      backgroundColor: theme.palette.accent.yellow,
 77    },
 78  }),
 79  actionContainer: ({open}) => ({
 80    position: 'fixed',
 81    bottom: open ? 0 : '-100vh',
 82    left: 0,
 83    right: 0,
 84    display: 'flex',
 85    flexDirection: 'column',
 86    justifyContent: 'flex-end',
 87    transition: 'all 0.3s ease',
 88    height: '100vh',
 89  }),
 90  extendedIcon: {
 91    marginRight: theme.spacing(2),
 92  },
 93  extendedFab: {
 94    width: '11rem',
 95    marginLeft: 'auto',
 96    marginRight: 'auto',
 97    marginBottom: theme.spacing(2),
 98  },
 99}));
100
101export default EventFab;