import React, {createContext, useState, useContext} from 'react';
import Snackbar from '@material-ui/core/Snackbar';

const ToastContext = createContext();
export default ToastContext;

export const useToast = () => useContext(ToastContext);

export const ToastProvider = ({children}) => {
  const [toasts, setToasts] = useState([]);

  const addToast = newToast => setToasts([...toasts, newToast]);

  const clearToasts = () => setToasts([]);

  const consumeToast = () => {
    const [, ...tsts] = toasts;
    setToasts(tsts);
  };

  return (
    <ToastContext.Provider value={{toasts, addToast, clearToasts}}>
      {children}
      <Snackbar
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        autoHideDuration={6000}
        open={toasts && toasts.length > 0}
        message={toasts[0]}
        onClose={consumeToast}
      />
    </ToastContext.Provider>
  );
};