import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { keyframes, jsx } from '@emotion/core';
import _pt from 'prop-types';
import { MdClose, MdDone, MdWarning } from 'react-icons/md';
import ThemeProvider from '../ThemeProvider/ThemeProvider.esm.js';
import Alert from '../../../node_modules/@reach/alert/dist/alert.esm.esm.js';

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  100% {\n     transform: perspective(1000px) rotateX(0);\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var toastEntryAnimation = keyframes(_templateObject());
var MIN_HEIGHT = "3rem";

var toastCss = function toastCss(theme) {
  return {
    alignItems: "center",
    animation: "".concat(toastEntryAnimation, " 0.5s 0.25s ease forwards"),
    background: theme.colors.grey[90],
    borderLeft: "8px solid ".concat(theme.colors.green[50]),
    borderRadius: "".concat(theme.radii[2], " ").concat(theme.radii[2], " 0 0"),
    color: theme.colors.green[5],
    display: "flex",
    fontSize: theme.fontSizes[1],
    minHeight: MIN_HEIGHT,
    maxWidth: "calc(100% - (".concat(theme.space[7], " * 2))"),
    paddingLeft: theme.space[4],
    transform: "perspective(1000px) rotateX(90deg)",
    transformOrigin: "bottom center",
    svg: {
      height: "auto",
      width: "calc(".concat(MIN_HEIGHT, " * 0.4)")
    },
    "&:not(:first-of-type)": {
      borderRadius: theme.radii[2],
      marginBottom: theme.space[1]
    }
  };
};

var messageCss = function messageCss(theme) {
  return {
    lineHeight: theme.lineHeights.solid,
    margin: "0 ".concat(theme.space[2], " 0 ").concat(theme.space[3])
  };
};

var statusCss = function statusCss(theme) {
  return {
    display: "flex",
    alignItems: "center",
    color: theme.colors.green[50]
  };
};

var closeButtonCss = function closeButtonCss(theme) {
  return {
    display: "flex",
    alignItems: "center",
    background: "none",
    border: "none",
    color: theme.colors.grey[40],
    cursor: "pointer",
    height: MIN_HEIGHT,
    justifyContent: "center",
    width: MIN_HEIGHT
  };
};

function getToastColorByTone(theme, tone) {
  if (tone === "SUCCESS") {
    return theme.colors.green[50];
  }

  if (tone === "DANGER") {
    return theme.colors.red[60];
  }

  throw new Error("Unknown \"tone\" for Toast component: ".concat(tone));
}

var ToastIconByTone = {
  SUCCESS: MdDone,
  DANGER: MdWarning
};
var Toast = function Toast(_ref) {
  var message = _ref.message,
      tone = _ref.tone,
      closeButtonLabel = _ref.closeButtonLabel,
      onClose = _ref.onClose;
  var IconComponent = ToastIconByTone[tone];

  var finalToastCss = function finalToastCss(theme) {
    return [toastCss(theme), {
      borderLeftColor: getToastColorByTone(theme, tone)
    }];
  };

  var finalStatusCss = function finalStatusCss(theme) {
    return [statusCss(theme), {
      color: getToastColorByTone(theme, tone)
    }];
  };

  return jsx(Alert, {
    css: finalToastCss,
    "data-testid": "toast",
    type: tone === "DANGER" ? "assertive" : "polite"
  }, jsx(ThemeProvider, null, jsx("span", {
    css: finalStatusCss
  }, jsx(IconComponent, null)), jsx("div", {
    css: messageCss
  }, message), jsx("button", {
    css: closeButtonCss,
    type: "button",
    onClick: onClose,
    "aria-label": closeButtonLabel
  }, jsx(MdClose, null))));
};
Toast.propTypes = {
  message: _pt.node.isRequired,
  onClose: _pt.func.isRequired,
  closeButtonLabel: _pt.string.isRequired
};
Toast.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Toast"
};

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

export { Toast };
//# sourceMappingURL=Toast.esm.js.map
