import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { createContext, useContext, useEffect, useReducer } from "react";
import { makeStyles } from "@material-ui/core/styles";
import * as colors from "@material-ui/core/colors";
import Collapse from "@material-ui/core/Collapse";
import Fade from "@material-ui/core/Fade";
import classNames from "classnames";
var useStyles = makeStyles({
  root: {
    position: "fixed",
    display: "flex",
    flexDirection: "column",
    bottom: 0,
    left: 0,
    right: 0,
    alignItems: "flex-start",
    pointerEvents: "none"
  },
  msgBox: {
    display: "flex",
    backgroundColor: colors.blue[700],
    fontSize: 12,
    color: "#fff",
    padding: 4,
    marginBottom: 4,
    boxShadow: "0px 3px 8px rgba(0,0,0,0.5)",
    "&.warning": {
      backgroundColor: colors.orange[700]
    },
    "&.error": {
      backgroundColor: colors.red[700]
    }
  }
});
var REFRESH_INTERVAL = 100;
var ToastContext = createContext({});
export var useToasts = function useToasts() {
  var _useContext = useContext(ToastContext),
      addToast = _useContext.addToast;

  return {
    addToast: addToast
  };
};
export var ToastProvider = function ToastProvider(_ref) {
  var children = _ref.children;

  var _useReducer = useReducer(function () {
    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
    var action = arguments.length > 1 ? arguments[1] : undefined;

    if (action.type === "add") {
      var fullLife = action.messageType === "info" ? 2000 : action.messageType === "warning" ? 5000 : 5000;
      return state.concat([{
        id: Math.random().toString().split(".")[1],
        message: action.message,
        type: action.messageType,
        life: fullLife,
        fullLife: fullLife
      }]);
    } else if (action.type === "tick") {
      return state.map(function (msg) {
        return _objectSpread(_objectSpread({}, msg), {}, {
          life: msg.life - REFRESH_INTERVAL
        });
      }).filter(function (msg) {
        return msg.life > 0;
      });
    }

    return state;
  }, []),
      _useReducer2 = _slicedToArray(_useReducer, 2),
      toasts = _useReducer2[0],
      changeToasts = _useReducer2[1];

  var c = useStyles();
  useEffect(function () {
    if (toasts.length === 0) return function () {};
    var interval = setInterval(function () {
      changeToasts({
        type: "tick"
      });
    }, REFRESH_INTERVAL);
    return function () {
      return clearInterval(interval);
    };
  }, [toasts]);

  var addToast = function addToast(message) {
    var messageType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "info";
    return changeToasts({
      type: "add",
      message: message,
      messageType: messageType
    });
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToastContext.Provider, {
    value: {
      toasts: toasts,
      addToast: addToast
    }
  }, children), /*#__PURE__*/React.createElement("div", {
    className: c.root
  }, toasts.map(function (msg) {
    return /*#__PURE__*/React.createElement(Collapse, {
      key: msg.id,
      in: msg.life < msg.fullLife
    }, /*#__PURE__*/React.createElement(Fade, {
      in: msg.life > 600
    }, /*#__PURE__*/React.createElement("div", {
      className: classNames(c.msgBox, msg.type)
    }, msg.message)));
  })));
};