"use strict";

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _clsx = _interopRequireDefault(require("clsx"));

var _utils = require("../utils");

var _useEventListener = _interopRequireDefault(require("../hooks/use-event-listener"));

var _useScrollParent = _interopRequireDefault(require("../hooks/use-scroll-parent"));

var _useRect = require("../hooks/use-rect");

var _useRefs2 = _interopRequireDefault(require("../hooks/use-refs"));

var _DropdownMenuContext = _interopRequireDefault(require("./DropdownMenuContext"));

var _hooks = require("../hooks");

var _useClickAway = _interopRequireDefault(require("../hooks/use-click-away"));

var _ConfigProviderContext = _interopRequireDefault(require("../config-provider/ConfigProviderContext"));

var _useMergedState2 = _interopRequireDefault(require("../hooks/use-merged-state"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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 DropdownMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var _useContext = (0, _react.useContext)(_ConfigProviderContext.default),
      prefixCls = _useContext.prefixCls,
      createNamespace = _useContext.createNamespace;

  var _createNamespace = createNamespace('dropdown-menu', prefixCls),
      bem = _createNamespace[0];

  var _useMergedState = (0, _useMergedState2.default)({
    value: props.value,
    defaultValue: props.defaultValue
  }),
      _useMergedState$ = _useMergedState[0],
      innerValue = _useMergedState$ === void 0 ? {} : _useMergedState$,
      setInnerValue = _useMergedState[1];

  var _useRefs = (0, _useRefs2.default)(),
      childrenRefs = _useRefs[0],
      setChildrenRefs = _useRefs[1];

  var _useState = (0, _react.useState)(null),
      showPopupIndex = _useState[0],
      setShowPopupIndex = _useState[1];

  var showPopupIndexRef = (0, _react.useRef)();
  var root = (0, _react.useRef)();
  var barRef = (0, _react.useRef)();
  var offset = (0, _react.useRef)(0);
  var isToggleEvent = (0, _react.useRef)(false);
  var rect = (0, _react.useRef)({
    bottom: 0,
    top: 0
  });
  var innerEffect = (0, _react.useRef)(false);
  var opened = (0, _react.useMemo)(function () {
    return showPopupIndex !== null;
  }, [showPopupIndex]);

  var barStyle = function barStyle() {
    if (opened && (0, _utils.isDef)(props.zIndex)) {
      return {
        zIndex: +props.zIndex + 1
      };
    }

    return {};
  };

  var updateShowPopupIndex = function updateShowPopupIndex(current) {
    showPopupIndexRef.current = current;
    setShowPopupIndex(current);
  };

  var closeAll = function closeAll() {
    childrenRefs.forEach(function (item) {
      item.toggle(false);
    });
    updateShowPopupIndex(null);
  };

  var onClickAway = function onClickAway() {
    if (props.closeOnClickOutside && !isToggleEvent.current) {
      closeAll();
    } else {
      isToggleEvent.current = false;
    }
  };

  var updateOffset = function updateOffset() {
    if (barRef.current) {
      rect.current = (0, _useRect.getRect)(barRef.current);

      if (props.direction === 'down') {
        offset.current = rect.current.bottom;
      } else {
        offset.current = window.innerHeight - rect.current.top;
      }
    }
  };

  var onScroll = function onScroll() {
    if (opened) {
      updateOffset();
    }
  };

  var showItem = function showItem(index) {
    var item = childrenRefs[index];
    isToggleEvent.current = true;
    updateOffset();
    updateShowPopupIndex(index);
    item.toggle(true);
  };

  var toggleItem = function toggleItem(active) {
    childrenRefs.forEach(function (item, index) {
      if (index === active) {
        if (active === showPopupIndexRef.current) {
          updateShowPopupIndex(null);
          item.toggle();
          return;
        }

        showItem(active);
      }
    });
  };

  var close = function close() {
    updateShowPopupIndex(null);
  };

  var renderTitle = function renderTitle(item, index) {
    var showPopup = showPopupIndex === index;
    var titleClass = item.titleClass;
    var disabled = props.disabled || item.disabled;
    return /*#__PURE__*/_react.default.createElement("div", {
      key: index,
      role: "button",
      tabIndex: disabled ? -1 : 0,
      className: (0, _clsx.default)(bem('item', {
        disabled: disabled
      })),
      onClick: function onClick() {
        if (!disabled) {
          toggleItem(index);
        }
      }
    }, /*#__PURE__*/_react.default.createElement("span", {
      className: (0, _clsx.default)(bem('title', {
        down: showPopup === (props.direction === 'down'),
        active: showPopup
      }), titleClass),
      style: {
        color: showPopup ? props.activeColor : ''
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "rv-ellipsis"
    }, item.renderTitle(innerValue[item.name]))));
  };

  (0, _hooks.useUpdateEffect)(function () {
    if (innerEffect.current) {
      innerEffect.current = false;
      return;
    }

    if (!props.value) {
      setInnerValue(undefined);
      return;
    }

    setInnerValue(props.value);
  }, [props.value]);
  (0, _react.useEffect)(function () {
    if (barRef.current) {
      updateOffset();
    }
  }, [barRef.current]);

  var onInnerChange = function onInnerChange(v) {
    innerEffect.current = true;

    var newValue = _extends({}, innerValue, v);

    setInnerValue(newValue);
    if (props.onChange) props.onChange(newValue);
  };

  var scrollParent = (0, _useScrollParent.default)(root);
  (0, _useEventListener.default)('scroll', onScroll, {
    target: scrollParent
  });
  (0, _useClickAway.default)(root, onClickAway);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      toggleItem: toggleItem,
      showItem: showItem,
      close: closeAll
    };
  });
  return /*#__PURE__*/_react.default.createElement(_DropdownMenuContext.default.Provider, {
    value: {
      props: props,
      value: innerValue,
      onChange: onInnerChange,
      close: close
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: root,
    className: (0, _clsx.default)(bem(), props.className),
    style: _extends({}, props.style)
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: barRef,
    style: barStyle(),
    className: (0, _clsx.default)(bem('bar', {
      opened: opened
    }))
  }, childrenRefs.map(renderTitle)), _react.Children.toArray(props.children).filter(Boolean).map(function (child, index) {
    return /*#__PURE__*/(0, _react.cloneElement)(child, {
      ref: setChildrenRefs(index),
      offset: offset.current,
      showPopup: showPopupIndex === index
    });
  })));
});
DropdownMenu.defaultProps = {
  duration: 200,
  overlay: true,
  closeOnClickOutside: true,
  closeOnClickOverlay: true,
  direction: 'down',
  defaultValue: {}
};
var _default = DropdownMenu;
exports.default = _default;