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      return await navigator.share({
 21        title: `Caroster ${event.name}`,
 22        url: `${window.location.href}`,
 23      });
 24    // Else copy URL in clipboard
 25    else if (!!navigator.clipboard) {
 26      await navigator.clipboard.writeText(window.location.href);
 27      addToast(t('event.actions.copied'));
 28      return true;
 29    }
 30  };
 31
 32  return (
 33    <>
 34      <div className={classes.fabContainer}>
 35        <Fab aria-label="more" onClick={toggleOpen}>
 36          <Icon>add</Icon>
 37        </Fab>
 38      </div>
 39      <div
 40        className={classes.actionContainer}
 41        onClick={toggleOpen}
 42        role="dialog"
 43      >
 44        <Fab
 45          color="primary"
 46          aria-label="share"
 47          variant="extended"
 48          className={classes.extendedFab}
 49          onClick={onShare}
 50        >
 51          <Icon className={classes.extendedIcon}>share</Icon>
 52          Partager
 53        </Fab>
 54        <Fab
 55          color="secondary"
 56          aria-label="add-car"
 57          variant="extended"
 58          className={classes.extendedFab}
 59          onClick={toggleNewCar}
 60        >
 61          <Icon className={classes.extendedIcon}>directions_car</Icon>
 62          Ajouter
 63        </Fab>
 64      </div>
 65    </>
 66  );
 67};
 68
 69const useStyles = makeStyles(theme => ({
 70  fabContainer: ({open}) => ({
 71    position: 'fixed',
 72    bottom: open ? '-4rem' : theme.spacing(2),
 73    right: theme.spacing(2),
 74    transition: 'all 0.3s ease',
 75    transform: open ? 'rotate(45deg)' : '',
 76    zIndex: theme.zIndex.speedDial,
 77    '& .MuiFab-root': {
 78      backgroundColor: theme.palette.accent.yellow,
 79    },
 80  }),
 81  actionContainer: ({open}) => ({
 82    position: 'fixed',
 83    bottom: open ? 0 : '-100vh',
 84    left: 0,
 85    right: 0,
 86    display: 'flex',
 87    flexDirection: 'column',
 88    justifyContent: 'flex-end',
 89    transition: 'all 0.3s ease',
 90    height: '100vh',
 91  }),
 92  extendedIcon: {
 93    marginRight: theme.spacing(2),
 94  },
 95  extendedFab: {
 96    width: '11rem',
 97    marginLeft: 'auto',
 98    marginRight: 'auto',
 99    marginBottom: theme.spacing(2),
100  },
101}));
102
103export default EventFab;