import React from 'react';
import 'react-dom';
import '../_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import { K as KEY_CODES, P as Portal } from '../key_codes-ff72266d.js';
import useActivify from '../hooks/useActivify.js';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';

var css_248z = ".Toast_toastWrapper__t4lIU {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100%;\n  z-index: 1000000009;\n  overflow: hidden; }\n  .Toast_toastWrapper__t4lIU * {\n    -webkit-font-smoothing: antialiased; }\n\n.Toast_toastOverlay__1Ag-l {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #000;\n  opacity: 0;\n  transition: 0.2s linear; }\n  .Toast_toastOverlay__1Ag-l.Toast_toastActive__19SQV {\n    opacity: 0.4 !important; }\n\n.Toast_toast__3QiJA {\n  opacity: 0;\n  position: absolute;\n  z-index: 2;\n  background-color: #fff;\n  outline: none;\n  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2);\n  box-sizing: border-box;\n  transition: 0.5s cubic-bezier(0.175, 0.5, 0.12, 1);\n  transform: translate3d(-50%, 0, 0);\n  bottom: 32px;\n  left: 50%;\n  min-width: 40vw;\n  border-radius: 5px; }\n  .Toast_toast__3QiJA * {\n    font-family: 'Roboto', sans-serif; }\n  .Toast_toast__3QiJA.Toast_toastActive__19SQV {\n    opacity: 1 !important;\n    transform: translate3d(-50%, -50%, 0) !important; }\n";
var styles = {"toastWrapper":"Toast_toastWrapper__t4lIU","toastOverlay":"Toast_toastOverlay__1Ag-l","toastActive":"Toast_toastActive__19SQV","toast":"Toast_toast__3QiJA"};
styleInject(css_248z);

function Toast(_ref) {
  var onClose = _ref.onClose,
    onEnter = _ref.onEnter,
    className = _ref.className,
    children = _ref.children,
    propActive = _ref.active;
  var _useActivify = useActivify(propActive),
    visible = _useActivify.visible,
    enabled = _useActivify.enabled;
  var handleKeyUp = React.useCallback(function (e) {
    if (e.keyCode === KEY_CODES.ESC) onClose();else if (e.keyCode === KEY_CODES.ENTER) onEnter();
  });
  React.useEffect(function () {
    document.addEventListener("keyup", handleKeyUp);
    return function () {
      document.removeEventListener("keyup", handleKeyUp);
    };
  });
  if (!enabled) return null;
  var activeClassName = visible ? styles.toastActive : "";
  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.toastWrapper)
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.toastOverlay, " ").concat(activeClassName),
    onClick: onClose
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.toast, " ").concat(activeClassName, " ").concat(className)
  }, children)));
}
Toast.propTypes = {
  children: PropTypes.node,
  onClose: PropTypes.func,
  onEnter: PropTypes.func,
  active: PropTypes.bool,
  className: PropTypes.string
};
Toast.defaultProps = {
  onClose: function onClose() {},
  onEnter: function onEnter() {},
  active: false,
  className: "",
  children: null
};
Toast.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Toast",
  "props": {
    "onClose": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onEnter": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "active": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "children": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    }
  }
};

export default Toast;
