import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import React__default, { Fragment } from 'react';
import _pt from 'prop-types';
import { MdArrowForward, MdClose } from 'react-icons/md';
import { Button } from '../Button/Button.esm.js';
import { Link } from '../Link/Link.esm.js';
import { getNotificationVariantStyles, iconByTone } from './Notification.helpers.esm.js';

var NotificationContext = React__default.createContext({
  onDismiss: function onDismiss() {
    return undefined;
  },
  variant: undefined,
  tone: undefined
});

var baseCss = function baseCss(theme) {
  return {
    color: theme.colors.grey[90],
    display: "flex",
    alignItems: "flex-start",
    justifyContent: "space-between",
    flexWrap: "nowrap",
    width: "100%",
    fontSize: theme.fontSizes[1],
    lineHeight: theme.lineHeights["default"]
  };
};

function Notification(_ref) {
  var children = _ref.children,
      _ref$tone = _ref.tone,
      tone = _ref$tone === void 0 ? "BRAND" : _ref$tone,
      _ref$variant = _ref.variant,
      variant = _ref$variant === void 0 ? "PRIMARY" : _ref$variant,
      content = _ref.content,
      _ref$contentAs = _ref.contentAs,
      contentAs = _ref$contentAs === void 0 ? "span" : _ref$contentAs,
      linkUrl = _ref.linkUrl,
      linkText = _ref.linkText,
      onLinkClick = _ref.onLinkClick,
      _ref$isOpened = _ref.isOpened,
      isOpened = _ref$isOpened === void 0 ? true : _ref$isOpened,
      onDismissButtonClick = _ref.onDismissButtonClick,
      _ref$showDismissButto = _ref.showDismissButton,
      showDismissButton = _ref$showDismissButto === void 0 ? !!onDismissButtonClick : _ref$showDismissButto,
      dismissButtonLabel = _ref.dismissButtonLabel,
      CustomIcon = _ref.Icon,
      rest = _objectWithoutProperties(_ref, ["children", "tone", "variant", "content", "contentAs", "linkUrl", "linkText", "onLinkClick", "isOpened", "onDismissButtonClick", "showDismissButton", "dismissButtonLabel", "Icon"]);

  if (!isOpened) {
    return null;
  }

  var PresetIcon = content && iconByTone[tone];
  var Icon = CustomIcon || PresetIcon;
  return jsx(NotificationContext.Provider, {
    value: {
      onDismiss: onDismissButtonClick,
      variant: variant,
      tone: tone
    }
  }, jsx("div", _extends({
    css: function css(theme) {
      return [variant === "PRIMARY" && theme.cardStyles.frame, baseCss(theme), getNotificationVariantStyles(variant, tone)(theme)];
    }
  }, rest), content && jsx(NotificationContent, {
    as: contentAs,
    css: function css(theme) {
      return [linkUrl && linkText && {
        marginRight: theme.space[5]
      }];
    }
  }, Icon && jsx(Icon, {
    css: function css(theme) {
      return [{
        marginRight: theme.space[4],
        fontSize: theme.fontSizes[4],
        color: theme.tones[tone].medium,
        flexShrink: 0,
        width: "auto",
        height: "1em"
      }, variant === "SOLID" && {
        color: theme.tones[tone].mediumInverted ? theme.tones[tone].mediumInverted : theme.colors.whiteFade[90]
      }];
    }
  }), content), linkUrl && linkText && jsx(Link, {
    to: linkUrl,
    onClick: onLinkClick,
    css: function css(theme) {
      return {
        // to push <Link> to the right also when there's a
        // <NotificationDismissButton>
        marginLeft: "auto",
        color: variant === "SOLID" ? theme.colors.white : null,
        ":hover": {
          color: variant === "SOLID" ? theme.colors.whiteFade[80] : null
        }
      };
    }
  }, linkText && jsx(Fragment, null, linkText, " ", jsx(MdArrowForward, null))), showDismissButton && jsx(NotificationDismissButton, {
    label: dismissButtonLabel
  }), children));
}
Notification.propTypes = {
  children: _pt.node,
  variant: _pt.oneOf(["PRIMARY", "SECONDARY", "SOLID"]),
  tone: _pt.oneOf(["BRAND", "SUCCESS", "DANGER", "WARNING", "NEUTRAL"]),
  content: _pt.node,
  linkUrl: _pt.string,
  linkText: _pt.node,
  onLinkClick: _pt.func,
  isOpened: _pt.bool,
  onDismissButtonClick: _pt.func,
  showDismissButton: _pt.bool,
  dismissButtonLabel: _pt.string,
  Icon: _pt.elementType
};

function NotificationContent(_ref2) {
  var _ref2$as = _ref2.as,
      Component = _ref2$as === void 0 ? "span" : _ref2$as,
      rest = _objectWithoutProperties(_ref2, ["as"]);

  return jsx(Component, _extends({
    css: {
      display: "flex",
      alignItems: "flex-start"
    }
  }, rest));
}

NotificationContent.propTypes = {
  as: _pt.oneOf(["span", "div"])
};

function NotificationDismissButton(_ref3) {
  var _ref3$label = _ref3.label,
      label = _ref3$label === void 0 ? "Close" : _ref3$label;

  var _useNotificationConte = useNotificationContext(),
      onDismiss = _useNotificationConte.onDismiss,
      variant = _useNotificationConte.variant,
      tone = _useNotificationConte.tone;

  return jsx(Button, {
    css: function css(theme) {
      return [{
        padding: "0",
        minHeight: "auto",
        color: theme.colors.grey[40],
        width: theme.space[5],
        marginLeft: theme.space[5],
        fontSize: theme.fontSizes[4]
      }, variant === "SOLID" && {
        color: theme.colors.whiteFade[60],
        ":hover": {
          background: "transparent",
          color: theme.colors.white
        }
      }, variant === "SOLID" && tone === "WARNING" && {
        color: theme.colors.blackFade[60],
        ":hover": {
          color: theme.colors.black
        }
      }];
    },
    type: "button",
    onClick: onDismiss,
    variant: "GHOST",
    "aria-label": label
  }, jsx(MdClose, null));
}

function useNotificationContext() {
  var context = React__default.useContext(NotificationContext);

  if (!context) {
    throw new Error("Notification compound components cannot be rendered outside the main component");
  }

  return context;
}

Notification.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Notification",
  "props": {
    "tone": {
      "defaultValue": {
        "value": "`BRAND`",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "union",
        "raw": "`BRAND`\n| `SUCCESS`\n| `DANGER`\n| `WARNING`\n| `NEUTRAL`",
        "elements": [{
          "name": "literal",
          "value": "undefined"
        }, {
          "name": "literal",
          "value": "undefined"
        }, {
          "name": "literal",
          "value": "undefined"
        }, {
          "name": "literal",
          "value": "undefined"
        }, {
          "name": "literal",
          "value": "undefined"
        }]
      },
      "description": ""
    },
    "variant": {
      "defaultValue": {
        "value": "`PRIMARY`",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "union",
        "raw": "`PRIMARY` | `SECONDARY` | `SOLID`",
        "elements": [{
          "name": "literal",
          "value": "undefined"
        }, {
          "name": "literal",
          "value": "undefined"
        }, {
          "name": "literal",
          "value": "undefined"
        }]
      },
      "description": ""
    },
    "contentAs": {
      "defaultValue": {
        "value": "`span`",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "intersection[\"as\"]",
        "raw": "NotificationContentProps[\"as\"]"
      },
      "description": ""
    },
    "isOpened": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "boolean"
      },
      "description": ""
    },
    "showDismissButton": {
      "defaultValue": {
        "value": "!!onDismissButtonClick",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "boolean"
      },
      "description": ""
    },
    "children": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "content": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "linkUrl": {
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "linkText": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "onLinkClick": {
      "required": false,
      "tsType": {
        "name": "ReactMouseEventHandler",
        "raw": "React.MouseEventHandler<HTMLAnchorElement>",
        "elements": [{
          "name": "HTMLAnchorElement"
        }]
      },
      "description": ""
    },
    "onDismissButtonClick": {
      "required": false,
      "tsType": {
        "name": "signature",
        "type": "function",
        "raw": "() => void",
        "signature": {
          "arguments": [],
          "return": {
            "name": "void"
          }
        }
      },
      "description": ""
    },
    "dismissButtonLabel": {
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "Icon": {
      "required": false,
      "tsType": {
        "name": "ReactComponentType",
        "raw": "React.ComponentType<any>",
        "elements": [{
          "name": "any"
        }]
      },
      "description": ""
    }
  }
};

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

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