import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import { useMemo } from 'react';
import _pt from 'prop-types';
import { animated as extendedAnimated, useSpring } from '../../../node_modules/react-spring/web.esm.js';
import { Toast } from './Toast.esm.js';
import { ToastContext } from './ToastContext.esm.js';
import { useToastActions } from './hooks.esm.js';

var ToastConsumer = ToastContext.Consumer;

var containerCss = function containerCss(theme) {
  return {
    alignItems: "center",
    bottom: 0,
    display: "flex",
    flexDirection: "column-reverse",
    left: "50%",
    position: "fixed",
    transform: "translate(-50%, 0)",
    width: "100%",
    zIndex: theme.zIndices.base,
    pointerEvents: "none",
    paddingRight: theme.space[7],
    paddingLeft: theme.space[7]
  };
};

var toastCss = function toastCss(theme) {
  return {
    pointerEvents: "auto",
    marginBottom: theme.space[1],
    "&:first-of-type": {
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0,
      marginBottom: 0
    }
  };
};

var AnimatedToast = extendedAnimated(Toast);

function ToastItem(props) {
  var styleProps = useSpring({
    from: {
      transform: "perspective(1000px) rotateX(90deg)",
      transformOrigin: "bottom center"
    },
    to: {
      transform: "perspective(1000px) rotateX(0)",
      transformOrigin: "bottom center"
    }
  });
  return jsx(AnimatedToast, _extends({
    style: styleProps
  }, props));
}

function ToastProvider(_ref) {
  var children = _ref.children,
      _ref$closeButtonLabel = _ref.closeButtonLabel,
      closeButtonLabel = _ref$closeButtonLabel === void 0 ? "Close" : _ref$closeButtonLabel;

  var _useToastActions = useToastActions(),
      toasts = _useToastActions.toasts,
      showToast = _useToastActions.showToast,
      removeToast = _useToastActions.removeToast;

  var contextValue = useMemo(function () {
    return {
      showToast: showToast
    };
  }, [showToast]);
  return jsx(ToastContext.Provider, {
    value: contextValue
  }, children, jsx("div", {
    css: containerCss
  }, toasts.map(function (toast, index) {
    return jsx(ToastItem, _extends({
      key: "toast-".concat(index) // this is probably not the best, but we can't use symbol as key :(

    }, toast, {
      onClose: function onClose() {
        return removeToast(toast.id);
      },
      closeButtonLabel: closeButtonLabel,
      css: toastCss
    }));
  })));
}
ToastProvider.propTypes = {
  children: _pt.node.isRequired,
  closeButtonLabel: _pt.string
};
ToastProvider.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ToastProvider",
  "props": {
    "closeButtonLabel": {
      "defaultValue": {
        "value": "`Close`",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "children": {
      "required": true,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Toast/ToastProvider.tsx"] = {
    name: "ToastProvider",
    docgenInfo: ToastProvider.__docgenInfo,
    path: "src/components/Toast/ToastProvider.tsx"
  };
}

export { ToastConsumer, ToastProvider };
//# sourceMappingURL=ToastProvider.esm.js.map
