'use strict';

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

var React = require('react');
var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-21ae158b.js');
var reactDom = require('react-dom');
var ui_SortByRow = require('./SortByRow.js');
var index = require('../index-1b3c69da.js');
var ui_Label = require('../index-2bfd366f.js');
require('../uuid-dee74248.js');
require('../utils/message/getOutgoingMessageState.js');
require('prop-types');
require('../stringSet-7aebf034.js');

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

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

// padding to handle height of last item in message-list
const HEIGHT_PADDING = 60;
class MenuItems$1 extends React__default["default"].Component {
  constructor(props) {
    super(props);
    _rollupPluginBabelHelpers._defineProperty(this, "menuRef", /*#__PURE__*/React__default["default"].createRef());
    _rollupPluginBabelHelpers._defineProperty(this, "setupEvents", () => {
      const {
        closeDropdown
      } = this.props;
      const {
        menuRef
      } = this;
      const handleClickOutside = event => {
        var _menuRef$current, _menuRef$current$cont;
        if (menuRef !== null && menuRef !== void 0 && menuRef.current && !(menuRef !== null && menuRef !== void 0 && (_menuRef$current = menuRef.current) !== null && _menuRef$current !== void 0 && (_menuRef$current$cont = _menuRef$current.contains) !== null && _menuRef$current$cont !== void 0 && _menuRef$current$cont.call(_menuRef$current, event.target))) {
          closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
        }
      };
      this.setState({
        handleClickOutside
      });
      document.addEventListener('mousedown', handleClickOutside);
    });
    _rollupPluginBabelHelpers._defineProperty(this, "cleanUpEvents", () => {
      const {
        handleClickOutside
      } = this.state;
      document.removeEventListener('mousedown', handleClickOutside);
    });
    _rollupPluginBabelHelpers._defineProperty(this, "getMenuPosition", () => {
      var _parentRef$current, _parentRef$current$ge;
      const {
        parentRef,
        openLeft
      } = this.props;
      const parentRect = parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : (_parentRef$current$ge = _parentRef$current.getBoundingClientRect) === null || _parentRef$current$ge === void 0 ? void 0 : _parentRef$current$ge.call(_parentRef$current);
      const x = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.x) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.left) || 0;
      const y = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.y) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.top) || 0;
      const menuStyle = {
        top: y,
        left: x
      };
      if (!this.menuRef.current) return menuStyle;
      const {
        innerWidth,
        innerHeight
      } = window;
      const rect = this.menuRef.current.getBoundingClientRect();
      if (y + rect.height + HEIGHT_PADDING > innerHeight) {
        menuStyle.top -= rect.height;
      }
      if (x + rect.width > innerWidth && !openLeft) {
        menuStyle.left -= rect.width;
      }
      if (menuStyle.top < 0) {
        menuStyle.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;
      }
      menuStyle.top += 32;
      if (openLeft) {
        const padding = Number.isNaN(rect.width - 30) ? 108 // default
        : rect.width - 30;
        menuStyle.left -= padding;
      }
      // warning: this section has to be executed after the openLeft is calculated
      // menu is outside viewport
      if (menuStyle.left < 0) {
        menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;
      }
      this.setState({
        menuStyle
      });
      return menuStyle;
    });
    this.state = {
      menuStyle: {},
      handleClickOutside: () => {/* noop */}
    };
  }
  componentDidMount() {
    this.setupEvents();
    this.getMenuPosition();
  }
  componentWillUnmount() {
    this.cleanUpEvents();
  }
  render() {
    var _this$props;
    const {
      menuStyle
    } = this.state;
    const {
      children,
      style,
      className = ''
    } = this.props;
    return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement("div", {
      className: (_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.className
    }, /*#__PURE__*/React__default["default"].createElement("div", {
      className: "sendbird-dropdown__menu-backdrop"
    }), /*#__PURE__*/React__default["default"].createElement("ul", {
      className: `${className} sendbird-dropdown__menu`,
      ref: this.menuRef,
      style: _rollupPluginBabelHelpers._objectSpread2({
        display: 'inline-block',
        position: 'fixed',
        left: `${Math.round(menuStyle.left)}px`,
        top: `${Math.round(menuStyle.top)}px`
      }, style)
    }, children)), document.getElementById('sendbird-dropdown-portal'));
  }
}

const defaultParentRect = {
  x: 0,
  y: 0,
  left: 0,
  top: 0,
  height: 0
};
const EmojiListItems$1 = _ref => {
  let {
    children,
    parentRef,
    parentContainRef,
    spaceFromTrigger = {
      x: 0,
      y: 0
    },
    closeDropdown
  } = _ref;
  const [reactionStyle, setReactionStyle] = React.useState({
    left: 0,
    top: 0
  });
  const reactionRef = React.useRef(null);

  /* showParent & hideParent */
  React.useEffect(() => {
    if (parentContainRef && parentContainRef !== null && parentContainRef !== void 0 && parentContainRef.current) {
      parentContainRef.current.classList.add('sendbird-reactions--pressed');
    }
    return () => {
      if (parentContainRef && parentContainRef !== null && parentContainRef !== void 0 && parentContainRef.current) {
        parentContainRef.current.classList.remove('sendbird-reactions--pressed');
      }
    };
  }, []);

  /* setupEvents & cleanupEvents */
  React.useEffect(() => {
    const handleClickOutSide = event => {
      var _reactionRef$current, _reactionRef$current$;
      if (reactionRef !== null && reactionRef !== void 0 && reactionRef.current && !(reactionRef !== null && reactionRef !== void 0 && (_reactionRef$current = reactionRef.current) !== null && _reactionRef$current !== void 0 && (_reactionRef$current$ = _reactionRef$current.contains) !== null && _reactionRef$current$ !== void 0 && _reactionRef$current$.call(_reactionRef$current, event.target))) {
        closeDropdown();
      }
    };
    document.addEventListener('mousedown', handleClickOutSide);
    return () => {
      document.removeEventListener('mousedown', handleClickOutSide);
    };
  }, []);

  /* getBarPosition */
  React.useEffect(() => {
    var _parentRef$current$ge, _parentRef$current;
    const spaceFromTriggerX = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.x) || 0;
    const spaceFromTriggerY = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.y) || 0;
    const parentRect = (_parentRef$current$ge = parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.getBoundingClientRect()) !== null && _parentRef$current$ge !== void 0 ? _parentRef$current$ge : defaultParentRect;
    const x = parentRect.x || parentRect.left;
    const y = parentRect.y || parentRect.top;
    const reactionStyle = {
      top: y,
      left: x
    };
    if (!(reactionRef !== null && reactionRef !== void 0 && reactionRef.current)) {
      setReactionStyle(reactionStyle);
    } else {
      var _reactionRef$current2;
      const rect = reactionRef === null || reactionRef === void 0 ? void 0 : (_reactionRef$current2 = reactionRef.current) === null || _reactionRef$current2 === void 0 ? void 0 : _reactionRef$current2.getBoundingClientRect();
      if (reactionStyle.top < rect.height) {
        reactionStyle.top += parentRect.height;
        reactionStyle.top += spaceFromTriggerY;
      } else {
        reactionStyle.top -= rect.height;
        reactionStyle.top -= spaceFromTriggerY;
      }
      reactionStyle.left -= rect.width / 2;
      reactionStyle.left += parentRect.height / 2 - 2;
      reactionStyle.left += spaceFromTriggerX;
      const maximumLeft = window.innerWidth - rect.width;
      if (maximumLeft < reactionStyle.left) {
        reactionStyle.left = maximumLeft;
      }
      if (reactionStyle.left < 0) {
        reactionStyle.left = 0;
      }
      setReactionStyle(reactionStyle);
    }
  }, []);
  const rootElement = document.getElementById('sendbird-emoji-list-portal');
  if (rootElement) {
    return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
      className: "sendbird-dropdown__menu-backdrop"
    }), /*#__PURE__*/React__default["default"].createElement("ul", {
      className: "sendbird-dropdown__reaction-bar",
      ref: reactionRef,
      style: {
        display: 'inline-block',
        position: 'fixed',
        left: `${Math.round(reactionStyle.left)}px`,
        top: `${Math.round(reactionStyle.top)}px`
      }
    }, /*#__PURE__*/React__default["default"].createElement(ui_SortByRow, {
      className: "sendbird-dropdown__reaction-bar__row",
      maxItemCount: 8,
      itemWidth: 44,
      itemHeight: 40
    }, children))), rootElement);
  }
  return null;
};

const ENTER_KEY = 13;
const MenuItems = MenuItems$1;
const EmojiListItems = EmojiListItems$1;
const MenuItem = _ref => {
  let {
    className = '',
    children,
    onClick,
    disable = false,
    dataSbId = ''
  } = _ref;
  const handleClickEvent = e => {
    if (!disable && onClick) {
      onClick === null || onClick === void 0 ? void 0 : onClick(e);
    }
  };
  return /*#__PURE__*/React__default["default"].createElement("li", {
    className: index.getClassName([className, 'sendbird-dropdown__menu-item', disable ? 'disable' : '']),
    role: "menuitem",
    "aria-disabled": disable ? true : false,
    onClick: handleClickEvent,
    onKeyPress: e => {
      if (e.keyCode === ENTER_KEY) handleClickEvent(e);
    },
    tabIndex: 0,
    "data-sb-id": dataSbId
  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
    className: "sendbird-dropdown__menu-item__text",
    type: ui_Label.LabelTypography.SUBTITLE_2,
    color: disable ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_1
  }, children));
};
const MenuRoot = () => /*#__PURE__*/React__default["default"].createElement("div", {
  id: "sendbird-dropdown-portal",
  className: "sendbird-dropdown-portal"
});

// For the test environment
const EmojiReactionListRoot = () => /*#__PURE__*/React__default["default"].createElement("div", {
  id: "sendbird-emoji-list-portal"
});
function ContextMenu(_ref2) {
  let {
    menuTrigger,
    menuItems,
    isOpen
  } = _ref2;
  const [showMenu, setShowMenu] = React.useState(false);
  return /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-context-menu",
    style: {
      display: 'inline'
    }
  }, menuTrigger === null || menuTrigger === void 0 ? void 0 : menuTrigger(() => setShowMenu(!showMenu)), (showMenu || isOpen) && menuItems(() => setShowMenu(false)));
}

exports.EmojiListItems = EmojiListItems;
exports.EmojiReactionListRoot = EmojiReactionListRoot;
exports.MenuItem = MenuItem;
exports.MenuItems = MenuItems;
exports.MenuRoot = MenuRoot;
exports["default"] = ContextMenu;
//# sourceMappingURL=ContextMenu.js.map
