import { _ as _asyncToGenerator, r as regenerator } from '../index-qSfOyGhk.js';
import { _ as _extends } from '../extends-C4cduGrv.js';
import { _ as _objectWithoutProperties } from '../objectWithoutProperties-TXwlfNxG.js';
import React__default from 'react';
import PropTypes from 'prop-types';
import CloseIcon from './assets/close.js';
import SuccessIcon from './assets/success.js';
import ErrorIcon from './assets/error.js';
import InfoIcon from './assets/info.js';
import Button from '../button/index.js';
import VisuallyHidden from '@reach/visually-hidden';
import ButtonGroup from '../button/button-group.js';
import '../typeof-CgC7Bq6K.js';
import '../defineProperty-CEd-kZQW.js';
import '../ck-icon/index.js';
import 'classnames';
import '../ck-icon/assets/icon-map/index.js';
import '../icon/index.js';
import '@fortawesome/react-fontawesome';
import '../icon/icons.js';
import '../icon/library.js';
import '@fortawesome/fontawesome-svg-core';
import '@fortawesome/pro-solid-svg-icons';
import '@fortawesome/pro-light-svg-icons';
import '@fortawesome/free-brands-svg-icons';
import '../slicedToArray-BB-AwwkK.js';
import '../floating-ui.react-cWPyyUrN.js';
import '../toConsumableArray-dKQYsfpV.js';
import 'react-dom';

var _excluded = ["icon"];
var ICONS = {
  success: SuccessIcon,
  error: ErrorIcon,
  info: InfoIcon
}; // The convertkit-design build has trouble importing SVGs, so we've formatted
// the default icons as components. On the main app, it's cleaner to import an
// SVG and pass it into an <img src="" />, so we want to support both of these
// use cases. Once ck-design's build supports SVG imports, this can be removed.

var ImageOrSVG = function ImageOrSVG(_ref) {
  var icon = _ref.icon,
      rest = _objectWithoutProperties(_ref, _excluded);

  // If the icon is a React component...
  if (typeof icon === "function") {
    var _Icon = icon;
    return /*#__PURE__*/React__default.createElement(_Icon, rest);
  } else {
    // If the icon is imported...
    return /*#__PURE__*/React__default.createElement("img", _extends({
      src: icon
    }, rest));
  }
};

var getBarColor = function getBarColor(type) {
  switch (type) {
    case "success":
      return "#589D78";

    case "error":
      return "var(--yellow-500)";

    case "info":
      return "var(--blue-500)";

    case "cta":
    default:
      return "var(--gray-100)";
  }
};

var Icon = function Icon(_ref2) {
  var type = _ref2.type,
      icon = _ref2.icon;
  var barStyles = {
    backgroundColor: getBarColor(type),
    borderRadius: 6,
    top: 6,
    left: 6,
    bottom: 6,
    width: 4
  };
  var iconStyles = {
    width: 26,
    height: 26
  };
  return /*#__PURE__*/React__default.createElement("div", {
    className: "justify-center ml-6 mr-6 hidden md:flex"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "absolute inset-y-auto left-0",
    style: barStyles
  }), /*#__PURE__*/React__default.createElement(ImageOrSVG, {
    icon: icon || ICONS[type],
    alt: "",
    style: iconStyles,
    className: "ml-2"
  }));
};

var Text = function Text(_ref3) {
  var title = _ref3.title,
      text = _ref3.text;
  return /*#__PURE__*/React__default.createElement("div", null, title && /*#__PURE__*/React__default.createElement("div", {
    className: "font-semibold text-gray-900 mb-1"
  }, title), text && /*#__PURE__*/React__default.createElement("div", {
    className: "text-gray-700"
  }, text));
};

var Actions = function Actions(_ref4) {
  var actions = _ref4.actions,
      handleClose = _ref4.handleClose;
  return /*#__PURE__*/React__default.createElement("div", {
    className: "ml-4"
  }, /*#__PURE__*/React__default.createElement(ButtonGroup, null, actions.map(function (action) {
    // Closes the toast after an action button is clicked.
    var handleClick = /*#__PURE__*/function () {
      var _ref5 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
        return regenerator.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                if (action.onClick) {
                  _context.next = 2;
                  break;
                }

                return _context.abrupt("return");

              case 2:
                _context.next = 4;
                return action.onClick();

              case 4:
                handleClose();

              case 5:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));

      return function handleClick() {
        return _ref5.apply(this, arguments);
      };
    }();

    return /*#__PURE__*/React__default.createElement(Button, _extends({
      key: action.text,
      is: "primary",
      className: "whitespace-no-wrap"
    }, action, {
      onClick: handleClick
    }), action.text);
  })));
};

var Close = function Close(_ref6) {
  var handleClose = _ref6.handleClose;
  var closeStyles = {
    width: 16,
    height: 16
  };
  return /*#__PURE__*/React__default.createElement("button", {
    onClick: handleClose,
    className: "absolute top-0 right-0 p-2 block"
  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
    className: "block",
    style: closeStyles
  }), /*#__PURE__*/React__default.createElement(VisuallyHidden, null, "Close notification"));
};

function Toast(_ref7) {
  var _ref7$type = _ref7.type,
      type = _ref7$type === void 0 ? "info" : _ref7$type,
      title = _ref7.title,
      text = _ref7.text,
      icon = _ref7.icon,
      actions = _ref7.actions,
      handleClose = _ref7.handleClose,
      closable = _ref7.closable;
  return /*#__PURE__*/React__default.createElement("div", {
    role: "alert",
    className: "mx-2 mb-4"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "rounded bg-white flex items-center text-left relative shadow-lg text-sm p-3 md:pr-8 md:pl-0 md:py-6"
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: type,
    icon: icon
  }), /*#__PURE__*/React__default.createElement(Text, {
    title: title,
    text: text
  }), actions && /*#__PURE__*/React__default.createElement(Actions, {
    actions: actions,
    handleClose: handleClose
  }), closable && /*#__PURE__*/React__default.createElement(Close, {
    handleClose: handleClose
  })));
}

Toast.propTypes = {
  text: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]).isRequired,
  type: PropTypes.oneOf(["info", "success", "error", "cta"]).isRequired,
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
  actions: PropTypes.array,
  position: PropTypes.oneOf(["bottom", "top", "top-right", "bottom-right", "bottom-left", "top-left"]),
  duration: PropTypes.number,
  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
  handleClose: PropTypes.func,
  closable: PropTypes.bool
};

export { Toast as default };
