import React, { createContext, useState } from "react";
import { Snackbar } from "@material-ui/core";
import Alert from "@material-ui/lab/Alert";
import Slide from "@material-ui/core/Slide";

export const SnackbarContext = createContext(null);
const SnackbarContextProvider = ({ children }) => {
  const [open, setOpen] = useState(false);
  const [alert, setAlert] = useState({});

  const showToast = (message = "Default Message", type = "success") => {
    setOpen(true);
    setAlert({
      ...alert,
      message,
      type,
    });
  };

  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }

    setOpen(false);
  };

  const copy = (text, message) => {
    showToast(message, "success");
    navigator.clipboard.writeText(text);
  };
  const error = (message) => showToast(message, "error");
  const success = (message) => showToast(message, "success");
  const info = (message) => showToast(message, "info");

  const toast = {
    showToast,
    show: showToast,
    copy,
    error,
    success,
    info,
  };

  return (
    <SnackbarContext.Provider value={{ toast }}>
      {children}
      {open && (
        <Snackbar
          open={true}
          autoHideDuration={6000}
          onClose={handleClose}
          TransitionComponent={Slide}
        >
          <Alert onClose={handleClose} severity={alert.type}>
            {alert.message}
          </Alert>
        </Snackbar>
      )}
    </SnackbarContext.Provider>
  );
};

export default SnackbarContextProvider;