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

var MIN_HEIGHT = "3rem";

var toastCss = function toastCss(theme) {
  return {
    display: "flex",
    alignItems: "center",
    background: theme.colors.grey[90],
    borderLeft: "".concat(theme.space[3], " solid ").concat(theme.colors.green[50]),
    borderRadius: theme.radii[2],
    color: theme.colors.green[5],
    fontSize: theme.fontSizes[1],
    minHeight: MIN_HEIGHT,
    paddingLeft: theme.space[4]
  };
};

var iconCss = function iconCss(theme) {
  return {
    fontSize: theme.fontSizes[4]
  };
};

var messageCss = function messageCss(theme) {
  return {
    lineHeight: theme.lineHeights.solid,
    marginTop: 0,
    marginBottom: 0,
    marginRight: theme.space[2],
    marginLeft: 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,
    marginLeft: "auto"
  };
};

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

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

var ToastIconByTone = {
  SUCCESS: MdDone
};
function Toast(_ref) {
  var message = _ref.message,
      tone = _ref.tone,
      closeButtonLabel = _ref.closeButtonLabel,
      onClose = _ref.onClose,
      className = _ref.className,
      style = _ref.style;
  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: "polite",
    className: className,
    style: style
  }, jsx(ThemeProvider, null, jsx("span", {
    css: finalStatusCss
  }, jsx(IconComponent, {
    css: iconCss
  })), jsx("div", {
    css: messageCss
  }, message), jsx("button", {
    css: closeButtonCss,
    type: "button",
    onClick: onClose,
    "aria-label": closeButtonLabel
  }, jsx(MdClose, {
    css: iconCss
  }))));
}
Toast.propTypes = {
  message: _pt.node.isRequired,
  onClose: _pt.func.isRequired,
  closeButtonLabel: _pt.string.isRequired,
  className: _pt.string
};
Toast.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Toast",
  "props": {
    "message": {
      "required": true,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "onClose": {
      "required": true,
      "tsType": {
        "name": "signature",
        "type": "function",
        "raw": "() => void",
        "signature": {
          "arguments": [],
          "return": {
            "name": "void"
          }
        }
      },
      "description": ""
    },
    "closeButtonLabel": {
      "required": true,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "tone": {
      "required": true,
      "tsType": {
        "name": "ToastTone"
      },
      "description": ""
    },
    "className": {
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "style": {
      "required": false,
      "tsType": {
        "name": "ReactCSSProperties",
        "raw": "React.CSSProperties"
      },
      "description": ""
    }
  }
};

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
