import React__default, { useRef, useState, useEffect } from 'react';
import { _ as __assign } from '../tslib.es6-710c6267.js';
import { createPortal } from 'react-dom';
import SortByRow from './SortByRow.js';
import { k as getClassName } from '../index-03ccaf35.js';
import { L as Label, a as LabelTypography, b as LabelColors } from '../index-ed39099a.js';
import '../uuid-60ae25c1.js';
import '../_rollupPluginBabelHelpers-3043541a.js';
import 'prop-types';
import '../stringSet-647493ce.js';

var MenuItems$1 = function MenuItems(_a) {
  var className = _a.className,
      children = _a.children,
      _b = _a.style,
      style = _b === void 0 ? {} : _b,
      parentRef = _a.parentRef,
      parentContainRef = _a.parentContainRef,
      _c = _a.openLeft,
      openLeft = _c === void 0 ? false : _c,
      closeDropdown = _a.closeDropdown;
  var menuRef = useRef(null);

  var _d = useState({
    left: 0,
    top: 0
  }),
      menuStyle = _d[0],
      setMenuStyle = _d[1];
  /* showParent & hideParent */


  useEffect(function () {
    if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
      parentContainRef.current.classList.add('sendbird-reactions--pressed');
    }

    return function () {
      if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
        parentContainRef.current.classList.remove('sendbird-reactions--pressed');
      }
    };
  }, []);
  /* setupEvents & cleanupEvents */

  useEffect(function () {
    var handleClickOutside = function handleClickOutside(event) {
      var _a, _b;

      if ((menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) && !((_b = menuRef === null || menuRef === void 0 ? void 0 : (_a = menuRef.current).contains) === null || _b === void 0 ? void 0 : _b.call(_a, event.target))) {
        closeDropdown();
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return function () {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);
  /* getMenuPosition */

  useEffect(function () {
    var _a;

    var parentRect = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
    var x = parentRect.x || parentRect.left;
    var y = parentRect.y || parentRect.top;
    var menuStyle = {
      top: y,
      left: x
    };

    if (!(menuRef === null || menuRef === void 0 ? void 0 : menuRef.current)) {
      setMenuStyle(menuStyle);
    } else {
      var innerWidth_1 = window.innerWidth,
          innerHeight_1 = window.innerHeight;
      var rect = menuRef.current.getBoundingClientRect();

      if (y + rect.height > innerHeight_1) {
        menuStyle.top -= rect.height;
      }

      if (x + rect.width > innerWidth_1 && !openLeft) {
        menuStyle.left -= rect.width;
      }

      if (menuStyle.top < 0) {
        menuStyle.top = rect.height < innerHeight_1 ? (innerHeight_1 - rect.height) / 2 : 0;
      }

      if (menuStyle.left < 0) {
        menuStyle.left = rect.width < innerWidth_1 ? (innerWidth_1 - rect.width) / 2 : 0;
      }

      menuStyle.top += 32;

      if (openLeft) {
        var padding = Number.isNaN(rect.width - 30) ? 108 // default
        : rect.width - 30;
        menuStyle.left -= padding;
      }

      setMenuStyle(menuStyle);
    }
  }, []);
  return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement("div", {
    className: Array.isArray(className) ? className.join(' ') : className
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-dropdown__menu-backdrop"
  }), /*#__PURE__*/React__default.createElement("ul", {
    className: "sendbird-dropdown__menu",
    ref: menuRef,
    style: __assign({
      display: 'inline-block',
      position: 'fixed',
      left: "".concat(Math.round(menuStyle.left), "px"),
      top: "".concat(Math.round(menuStyle.top), "px")
    }, style)
  }, children)), document.getElementById('sendbird-dropdown-portal'));
};

var EmojiListItems$1 = function EmojiListItems(_a) {
  var children = _a.children,
      parentRef = _a.parentRef,
      parentContainRef = _a.parentContainRef,
      _b = _a.spaceFromTrigger,
      spaceFromTrigger = _b === void 0 ? {
    x: 0,
    y: 0
  } : _b,
      closeDropdown = _a.closeDropdown;

  var _c = useState({
    left: 0,
    top: 0
  }),
      reactionStyle = _c[0],
      setReactionStyle = _c[1];

  var reactionRef = useRef(null);
  /* showParent & hideParent */

  useEffect(function () {
    if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
      parentContainRef.current.classList.add('sendbird-reactions--pressed');
    }

    return function () {
      if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
        parentContainRef.current.classList.remove('sendbird-reactions--pressed');
      }
    };
  }, []);
  /* setupEvents & cleanupEvents */

  useEffect(function () {
    var handleClickOutSide = function handleClickOutSide(event) {
      var _a, _b;

      if ((reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) && !((_b = (_a = reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, event.target))) {
        closeDropdown();
      }
    };

    document.addEventListener('mousedown', handleClickOutSide);
    return function () {
      document.removeEventListener('mousedown', handleClickOutSide);
    };
  }, []);
  /* getBarPosition */

  useEffect(function () {
    var _a, _b;

    var spaceFromTriggerX = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.x) || 0;
    var spaceFromTriggerY = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.y) || 0;
    var parentRect = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
    var x = parentRect.x || parentRect.left;
    var y = parentRect.y || parentRect.top;
    var reactionStyle = {
      top: y,
      left: x
    };

    if (!(reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current)) {
      setReactionStyle(reactionStyle);
    } else {
      var rect = (_b = reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) === null || _b === void 0 ? void 0 : _b.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;
      var maximumLeft = window.innerWidth - rect.width;

      if (maximumLeft < reactionStyle.left) {
        reactionStyle.left = maximumLeft;
      }

      if (reactionStyle.left < 0) {
        reactionStyle.left = 0;
      }

      setReactionStyle(reactionStyle);
    }
  }, []);
  return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-dropdown__menu-backdrop"
  }), /*#__PURE__*/React__default.createElement("ul", {
    className: "sendbird-dropdown__reaction-bar",
    ref: reactionRef,
    style: {
      display: 'inline-block',
      position: 'fixed',
      left: "".concat(Math.round(reactionStyle.left), "px"),
      top: "".concat(Math.round(reactionStyle.top), "px")
    }
  }, /*#__PURE__*/React__default.createElement(SortByRow, {
    className: "sendbird-dropdown__reaction-bar__row",
    maxItemCount: 8,
    itemWidth: 44,
    itemHeight: 40
  }, children))), document.getElementById('sendbird-emoji-list-portal'));
};

var ENTER_KEY = 13;
var MenuItems = MenuItems$1;
var EmojiListItems = EmojiListItems$1;
var MenuItem = function MenuItem(_a) {
  var _b = _a.className,
      className = _b === void 0 ? '' : _b,
      children = _a.children,
      onClick = _a.onClick,
      _c = _a.disable,
      disable = _c === void 0 ? false : _c;

  var handleClickEvent = function handleClickEvent(e) {
    if (!disable && onClick) {
      onClick === null || onClick === void 0 ? void 0 : onClick(e);
    }
  };

  return /*#__PURE__*/React__default.createElement("li", {
    className: getClassName([className, 'sendbird-dropdown__menu-item', disable ? 'disable' : '']),
    role: "menuitem",
    onClick: handleClickEvent,
    onKeyPress: function onKeyPress(e) {
      if (e.keyCode === ENTER_KEY) handleClickEvent(e);
    },
    tabIndex: 0
  }, /*#__PURE__*/React__default.createElement(Label, {
    className: "sendbird-dropdown__menu-item__text",
    type: LabelTypography.SUBTITLE_2,
    color: disable ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1
  }, children));
};
var MenuRoot = function MenuRoot() {
  return /*#__PURE__*/React__default.createElement("div", {
    id: "sendbird-dropdown-portal"
  });
};
var EmojiReactionListRoot = function EmojiReactionListRoot() {
  return /*#__PURE__*/React__default.createElement("div", {
    id: "sendbird-emoji-list-portal"
  });
};
function ContextMenu(_a) {
  var menuTrigger = _a.menuTrigger,
      menuItems = _a.menuItems;

  var _b = useState(false),
      showMenu = _b[0],
      setShowMenu = _b[1];

  return /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-context-menu"
  }, menuTrigger(function () {
    return setShowMenu(!showMenu);
  }), showMenu && menuItems(function () {
    return setShowMenu(false);
  }));
}

export { EmojiListItems, EmojiReactionListRoot, MenuItem, MenuItems, MenuRoot, ContextMenu as default };
//# sourceMappingURL=ContextMenu.js.map
