'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var React = require('react');
var classNames = require('clsx');
var Button = require('@prom-ui/core/Button');
var Icon = require('@prom-ui/core/Icon');
var Overlay = require('@prom-ui/core/Overlay');
var Tooltip = require('@prom-ui/core/Tooltip');
var useMedia = require('@prom-ui/core/useMedia');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

function _interopNamespaceCompat(e) {
    if (e && typeof e === 'object' && 'default' in e) return e;
    var n = Object.create(null);
    if (e) {
        Object.keys(e).forEach(function (k) {
            if (k !== 'default') {
                var d = Object.getOwnPropertyDescriptor(e, k);
                Object.defineProperty(n, k, d.get ? d : {
                    enumerable: true,
                    get: function () { return e[k]; }
                });
            }
        });
    }
    n.default = e;
    return Object.freeze(n);
}

var _defineProperty__default = /*#__PURE__*/_interopDefaultCompat(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultCompat(_slicedToArray);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultCompat(_objectWithoutProperties);
var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);

var css = {"buttonContent":"ContextMenu__buttonContent___k6I7C","buttonIcon":"ContextMenu__buttonIcon___AMl7D","buttonText":"ContextMenu__buttonText___1HzQ4","list":"ContextMenu__list___O4D4q","listItem":"ContextMenu__listItem___LNQ-G","buttonContentColor_red-900":"ContextMenu__buttonContentColor_red-900___A2TgC"};

var _excluded = ["children", "items", "onOpen", "onClose", "isRenderPortal", "placement"];
var ContextMenu = function ContextMenu(_ref) {
  var children = _ref.children,
    items = _ref.items,
    onOpen = _ref.onOpen,
    onClose = _ref.onClose,
    _ref$isRenderPortal = _ref.isRenderPortal,
    isRenderPortal = _ref$isRenderPortal === void 0 ? true : _ref$isRenderPortal,
    _ref$placement = _ref.placement,
    placement = _ref$placement === void 0 ? 'bottom-end' : _ref$placement,
    props = _objectWithoutProperties__default.default(_ref, _excluded);
  var _React$useState = React__namespace.useState(false),
    _React$useState2 = _slicedToArray__default.default(_React$useState, 2),
    isOpen = _React$useState2[0],
    setOpen = _React$useState2[1];
  var isMinWidthMedium = useMedia.useMedia({
    minWidth: 'medium'
  });
  var handleOnOpen = function handleOnOpen() {
    if (onOpen) {
      onOpen();
    }
    setOpen(true);
  };
  var handleOnClose = function handleOnClose() {
    if (onClose) {
      onClose();
    }
    setOpen(false);
  };
  var handleOnTooltipVisibleChange = function handleOnTooltipVisibleChange(visible) {
    if (isOpen) {
      if (!visible) {
        handleOnClose();
      }
    } else {
      if (visible) {
        handleOnOpen();
      }
    }
  };
  var content = /*#__PURE__*/React__namespace.createElement("ul", {
    className: css.list,
    "data-qaid": props['data-qaid'] || 'context_menu',
    "data-testid": props['data-testid'] || 'context_menu'
  }, items.map(function (_ref2, index) {
    var icon = _ref2.icon,
      _onClick = _ref2.onClick,
      _ref2$isCloseOnClick = _ref2.isCloseOnClick,
      isCloseOnClick = _ref2$isCloseOnClick === void 0 ? true : _ref2$isCloseOnClick,
      color = _ref2.color,
      children = _ref2.children;
    return /*#__PURE__*/React__namespace.createElement("li", {
      key: index,
      className: css.listItem,
      "data-qaid": "context_menu_item",
      "data-testid": "context_menu_item"
    }, /*#__PURE__*/React__namespace.createElement(Button.Button, {
      type: "button",
      "button-theme": "white",
      "button-width": "1-1",
      "button-round": "none",
      "button-padding": "xs m",
      "button-blackhole": ['border-none', 'awesome-content'],
      "button-weight": "normal",
      "data-qaid": "context_menu_button",
      "data-testid": "context_menu_button",
      onClick: function onClick(e) {
        if (isCloseOnClick) {
          handleOnClose();
        }
        if (_onClick) {
          _onClick(e);
        }
      }
    }, /*#__PURE__*/React__namespace.createElement("div", {
      className: classNames__default.default(css.buttonContent, _defineProperty__default.default({}, css["buttonContentColor_".concat(color)], Boolean(color)))
    }, !!icon && /*#__PURE__*/React__namespace.createElement(Icon.Icon, {
      className: css.buttonIcon,
      "icon-as": icon,
      style: {
        width: 24,
        height: 24
      },
      "data-qaid": "context_menu_button_icon",
      "data-testid": "context_menu_button_icon"
    }), /*#__PURE__*/React__namespace.createElement("div", {
      className: css.buttonText,
      "data-qaid": "context_menu_button_text",
      "data-testid": "context_menu_button_text"
    }, children))));
  }));
  if (isMinWidthMedium) {
    return /*#__PURE__*/React__namespace.createElement(Tooltip.Tooltip, {
      isRenderPortal: isRenderPortal,
      trigger: "click",
      placement: placement,
      isShowArrow: false,
      content: content,
      isVisible: isOpen,
      padding: "0",
      onVisibleChange: handleOnTooltipVisibleChange
    }, children);
  } else {
    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.cloneElement(children, {
      onClick: handleOnOpen
    }), /*#__PURE__*/React__namespace.createElement(Overlay.Overlay, {
      isRenderPortal: isRenderPortal,
      isOpen: isOpen,
      onClose: handleOnClose,
      header: null,
      padding: "0"
    }, content));
  }
};
ContextMenu.displayName = 'ContextMenu';

exports.ContextMenu = ContextMenu;

require('./style.development.css');
