import React from 'react';
import ReactDOM from 'react-dom';
import { a as _objectSpread2, c as _slicedToArray, h as _classCallCheck, _ as _defineProperty, e as _extends$2 } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Provider from '../theme/provider.js';
import '../index-930c2100.js';
import '../hooks/useActivify.js';
import './tooltip.js';
import '../key_codes-a5a2b85e.js';
import '../index-6b96e57a.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import '../style-inject.es-1f59c1d0.js';
import Icon from '../ui/icon.js';
import '../info-fc9c81b4.js';
import '../close-cd95ea58.js';
import '../close-v2-118f2b87.js';
import '../file_placeholder-51e080e8.js';
import '../arrow-e522a0cc.js';
import '../tick-ee41abaf.js';
import '../angle-down-4038e060.js';
import '../checkmark-b6f07b8e.js';
import '../search-da5a95f5.js';
import './withTooltip.js';
import Text from '../ui/text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import Box from '../ui/box.js';

var CONSTANTS = {
  PARENT_DOM_ID: "h-notifications",
  CLOSE_ICON_CLASS: "h-notif-close",
  // Defined to dismiss notifications and not style
  TYPES: {
    SUCCESS: "success",
    WARNING: "warning",
    ERROR: "error",
    DEFAULT: "default"
  },
  POSITIONS: {
    TOP_LEFT: "top-left",
    TOP_CENTER: "top-center",
    TOP_RIGHT: "top-right",
    BOTTOM_LEFT: "bottom-left",
    BOTTOM_CENTER: "bottom-center",
    BOTTOM_RIGHT: "bottom-right"
  },
  TIMEOUT: 2500,
  // Default timeout to dismiss a notification
  DEFAULT_POSITION: 15,
  DEFAULT_TRANSFORM: 20
};

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var CloseIcon = (({
  styles = {},
  ...props
}) => React.createElement("svg", _extends({
  width: "29",
  height: "28",
  viewBox: "0 0 29 28",
  fill: "none",
  xmlns: "http://www.w3.org/2000/svg"
}, props), React.createElement("path", {
  fillRule: "evenodd",
  clipRule: "evenodd",
  d: "M20.813 9.1a.99.99 0 10-1.4-1.4l-4.9 4.9-4.9-4.9a.99.99 0 10-1.4 1.4l4.9 4.9-4.9 4.9a.99.99 0 101.4 1.4l4.9-4.9 4.9 4.9a.99.99 0 101.4-1.4l-4.9-4.9 4.9-4.9z",
  fill: "#595959"
})));

function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
var SuccessIcon = (({
  styles = {},
  ...props
}) => React.createElement("svg", _extends$1({
  width: "42",
  height: "42",
  viewBox: "0 0 42 42",
  fill: "none",
  xmlns: "http://www.w3.org/2000/svg"
}, props), React.createElement("circle", {
  cx: "21",
  cy: "21",
  r: "21",
  fill: "#CEFBE0"
}), React.createElement("circle", {
  cx: "21",
  cy: "21",
  r: "16",
  fill: "#0DB350",
  fillOpacity: ".4"
}), React.createElement("path", {
  d: "M18.5 24.5L15 21l-1.167 1.166 4.667 4.667 10-10-1.167-1.167-8.833 8.833z",
  fill: "#0DB350"
})));

/* eslint-disable no-bitwise */

var DEFAULT = {
  POSITION: CONSTANTS.DEFAULT_POSITION,
  TRANSFORM: CONSTANTS.DEFAULT_TRANSFORM
};
/**
 * Exports border color based on type of notification
 * @param {*} type type of notification (success/warning/error/default)
 * @param {*} colors colors from Haptik's Design System
 */

var getBorderColor = function getBorderColor(type, colors) {
  if (type === CONSTANTS.TYPES.DEFAULT) {
    return colors.blue.haptik;
  }

  if (type === CONSTANTS.TYPES.SUCCESS) {
    return colors.green.haptik;
  }

  if (type === CONSTANTS.TYPES.WARNING) {
    return colors.yellow.haptik;
  }

  if (type === CONSTANTS.TYPES.ERROR) {
    return colors.red.haptik;
  }

  return colors.blue.haptik;
};
/**
 * Displays notification container based on position specified
 * @param {*} position position of notification (top-left/top-center/top-right/same for bottom)
 * @param {*} offset offset adjustment for container
 * @returns
 */

var getPositionStyles = function getPositionStyles(position, offset, active) {
  var positionStyle = {};

  switch (position) {
    case CONSTANTS.POSITIONS.TOP_LEFT:
      {
        positionStyle.top = offset && offset.top ? DEFAULT.POSITION + offset.top : DEFAULT.POSITION;
        positionStyle.left = offset && offset.left ? DEFAULT.POSITION + offset.left : DEFAULT.POSITION;
        positionStyle.transform = "translateX(".concat(active ? 0 : "-".concat(DEFAULT.TRANSFORM, "px"), ")");
        break;
      }

    case CONSTANTS.POSITIONS.TOP_CENTER:
      {
        positionStyle.top = offset && offset.top ? DEFAULT.POSITION + offset.top : DEFAULT.POSITION;
        positionStyle.left = offset && offset.left ? offset.left : 0;
        positionStyle.right = 0;
        positionStyle.margin = "0 auto";
        positionStyle.transform = "translateY(".concat(active ? 0 : "-".concat(DEFAULT.TRANSFORM, "px"), ")");
        break;
      }

    case CONSTANTS.POSITIONS.TOP_RIGHT:
      {
        positionStyle.top = offset && offset.top ? DEFAULT.POSITION + offset.top : DEFAULT.POSITION;
        positionStyle.right = offset && offset.left ? DEFAULT.POSITION + offset.left : DEFAULT.POSITION;
        positionStyle.transform = "translateX(".concat(active ? 0 : "".concat(DEFAULT.TRANSFORM, "px"), ")");
        break;
      }

    case CONSTANTS.POSITIONS.BOTTOM_LEFT:
      {
        positionStyle.bottom = offset && offset.top ? DEFAULT.POSITION + offset.top : DEFAULT.POSITION;
        positionStyle.left = offset && offset.left ? DEFAULT.POSITION + offset.left : DEFAULT.POSITION;
        positionStyle.transform = "translateX(".concat(active ? 0 : "-".concat(DEFAULT.TRANSFORM, "px"), ")");
        break;
      }

    case CONSTANTS.POSITIONS.BOTTOM_CENTER:
      {
        positionStyle.bottom = offset && offset.top ? DEFAULT.POSITION + offset.top : DEFAULT.POSITION;
        positionStyle.left = offset && offset.left ? offset.left : 0;
        positionStyle.right = 0;
        positionStyle.marginLeft = "auto";
        positionStyle.marginRight = "auto";
        positionStyle.transform = "translateY(".concat(active ? 0 : "".concat(DEFAULT.TRANSFORM, "px"), ")");
        break;
      }

    case CONSTANTS.POSITIONS.BOTTOM_RIGHT:
      {
        positionStyle.bottom = offset && offset.top ? DEFAULT.POSITION + offset.top : DEFAULT.POSITION;
        positionStyle.right = offset && offset.left ? DEFAULT.POSITION + offset.left : DEFAULT.POSITION;
        positionStyle.transform = "translateX(".concat(active ? 0 : "".concat(DEFAULT.TRANSFORM, "px"), ")");
        break;
      }

    default:
      {
        positionStyle.top = DEFAULT.POSITION;
        positionStyle.left = DEFAULT.POSITION;
        break;
      }
  }

  return positionStyle;
};

var notificationContainerStyles = function notificationContainerStyles(props) {
  var theme = props.theme,
      type = props.type,
      position = props.position,
      offset = props.offset,
      active = props.active;
  return _objectSpread2({
    position: "fixed",
    width: "fit-content",
    alignItems: "center",
    minWidth: 300,
    maxWidth: 500,
    transition: "all 0.3s ease",
    background: theme.colors.grey.pastel,
    boxShadow: "0px 1px 13px 0px #00000026",
    border: "1px solid ".concat(getBorderColor(type, theme.colors)),
    borderRadius: theme.radii.sm,
    marginBottom: theme.space.lg
  }, getPositionStyles(position, offset, active), {
    opacity: active ? 1 : 0,
    zIndex: 9999999999
  });
};

var NotifyWrapper = styled(Box)(notificationContainerStyles); // #endregion
// #region Icons within Notification container

var notificationIconStyles = function notificationIconStyles(props) {
  var variant = props.variant,
      theme = props.theme;

  if (variant === "dismiss") {
    return {
      position: "absolute",
      cursor: "pointer",
      top: 8,
      right: 8
    };
  }

  return {
    cursor: "default",
    width: 42,
    height: 42,
    margin: "0 ".concat(theme.space.sm, "px")
  };
};

var NotificationIcon = styled(Icon)(notificationIconStyles); // #endregion

var Notification = function Notification(props) {
  var TIMEOUT = CONSTANTS.TIMEOUT,
      POSITIONS = CONSTANTS.POSITIONS,
      CLOSE_ICON_CLASS = CONSTANTS.CLOSE_ICON_CLASS;

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      active = _React$useState2[0],
      setActive = _React$useState2[1];

  var title = props.title,
      message = props.message,
      children = props.children,
      type = props.type,
      closeable = props.closeable,
      _props$position = props.position,
      position = _props$position === void 0 ? POSITIONS.BOTTOM_CENTER : _props$position,
      offset = props.offset,
      onDestroy = props.onDestroy,
      _props$autoDismiss = props.autoDismiss,
      autoDismiss = _props$autoDismiss === void 0 ? true : _props$autoDismiss;

  var getIcon = function getIcon() {
    var icon = null;

    if (type === "success") {
      icon = SuccessIcon;
    }

    return React.createElement(NotificationIcon, {
      src: icon
    });
  };

  var dismissHandler = function dismissHandler() {
    setActive(false);

    if (onDestroy) {
      setTimeout(function () {
        onDestroy();
      }, 100);
    }
  };

  var handleDismiss = function handleDismiss() {
    setTimeout(function () {
      dismissHandler();
    }, TIMEOUT + 300);
  };

  React.useEffect(function () {
    setTimeout(function () {
      return setActive(true);
    }, 10);

    if (autoDismiss && !closeable) {
      handleDismiss();
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, []);
  return React.createElement(Provider, null, React.createElement(NotifyWrapper, {
    active: active,
    type: type,
    position: position,
    offset: offset,
    childrenPresent: children,
    "data-testid": "notification"
  }, getIcon(), React.createElement(Box, {
    flexDirection: "column"
  }, React.createElement(Box, {
    className: CLOSE_ICON_CLASS,
    onClick: dismissHandler,
    style: {
      padding: "0",
      display: closeable ? "block" : "none"
    }
  }, React.createElement(NotificationIcon, {
    src: CloseIcon,
    variant: "dismiss"
  })), React.createElement(Text, {
    style: {
      paddingRight: 15
    },
    variant: "h3.semi-bold"
  }, title), message && React.createElement(Text, {
    variant: "body.md",
    style: {
      lineHeight: 1.3
    }
  }, message), children && React.createElement(Box, {
    padding: "10px 0"
  }, children))));
};

Notification.propTypes = {
  title: PropTypes.string,
  message: PropTypes.string,
  type: PropTypes.string,
  children: PropTypes.node,
  closeable: PropTypes.bool,
  autoDismiss: PropTypes.bool,
  position: PropTypes.string,
  onDestroy: PropTypes.func,
  offset: PropTypes.shape({
    top: PropTypes.number,
    left: PropTypes.number
  })
};
Notification.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Notification",
  "props": {
    "title": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "message": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "type": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "children": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    },
    "closeable": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "autoDismiss": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "position": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "onDestroy": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "offset": {
      "type": {
        "name": "shape",
        "value": {
          "top": {
            "name": "number",
            "required": false
          },
          "left": {
            "name": "number",
            "required": false
          }
        }
      },
      "required": false,
      "description": ""
    }
  }
};

var wrapper = document.getElementById(CONSTANTS.PARENT_DOM_ID);

var destroyDOM = function destroyDOM() {
  var closeDOM = document.querySelectorAll(".".concat(CONSTANTS.CLOSE_ICON_CLASS));

  if (closeDOM && closeDOM.length > 0) {
    closeDOM.forEach(function (item) {
      item.click();
    });
  } // Wait for exit animation to complete


  setTimeout(function () {
    wrapper.innerHTML = "";
  }, 50);
}; // Use ReactDOM to render a notification


var Notify = function Notify() {
  _classCallCheck(this, Notify);

  _defineProperty(this, "send", function (config) {
    var autoDismiss = config.autoDismiss !== undefined ? config.autoDismiss : true;

    if (!wrapper) {
      wrapper = document.createElement("div");
      wrapper.id = CONSTANTS.PARENT_DOM_ID;
      document.body.appendChild(wrapper);
    }

    destroyDOM(); // Wait till DOM is empty

    setTimeout(function () {
      var el = document.createElement("div");
      wrapper.appendChild(el);

      var destroy = function destroy() {
        ReactDOM.unmountComponentAtNode(el);
        el.remove();
      };

      ReactDOM.render(React.createElement(Notification, _extends$2({}, config, {
        onDestroy: autoDismiss || config.closeable ? destroy : null
      })), el);
    }, 60);
  });

  _defineProperty(this, "destroyAll", function () {
    destroyDOM();
  });
};

var Notify$1 = new Notify();

export default Notify$1;
