"use strict";

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

var _icons = require("@react-vant/icons");

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

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

var _cell = _interopRequireDefault(require("../cell"));

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

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

var _useSsrCompat2 = _interopRequireDefault(require("../hooks/use-ssr-compat"));

var _popup = _interopRequireDefault(require("../popup"));

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

var _renderToContainer = require("../utils/dom/renderToContainer");

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

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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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 inheritPropsKey = ['overlay', 'overlayClass', 'overlayStyle', 'disabled', 'placeholder', 'onOpen', 'onClosed', 'onOpened', 'teleport', 'closeOnClickOverlay'];

function inheritProps(parentProps, props) {
  return _extends({}, parentProps, props);
}

var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var _parent$value;

  var _useSetState = (0, _hooks.useSetState)({
    transition: true,
    showWrapper: false
  }),
      state = _useSetState[0],
      setState = _useSetState[1];

  var _useSsrCompat = (0, _useSsrCompat2.default)(),
      ssrCompatRender = _useSsrCompat[0];

  var _useContext = (0, _react.useContext)(_ConfigProviderContext.default),
      prefixCls = _useContext.prefixCls,
      createNamespace = _useContext.createNamespace;

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

  var parent = (0, _react.useContext)(_DropdownMenuContext.default);
  var currentValue = (_parent$value = parent.value) == null ? void 0 : _parent$value[props.name];

  var onClosed = function onClosed() {
    var _ref, _props$onClosed;

    setState({
      showWrapper: false
    });
    (_ref = (_props$onClosed = props.onClosed) != null ? _props$onClosed : parent.props.onClosed) == null ? void 0 : _ref();
  };

  var onClickWrapper = function onClickWrapper(event) {
    // prevent being identified as clicking outside and closed when using teleport
    if (props.teleport) {
      event.stopPropagation();
    }
  };

  var onClose = function onClose() {
    var _ref2, _props$onClose;

    parent.close();
    (_ref2 = (_props$onClose = props.onClose) != null ? _props$onClose : parent.props.onClose) == null ? void 0 : _ref2();
  };

  var toggle = function toggle(show, options) {
    if (show === void 0) {
      show = !props.showPopup;
    }

    if (options === void 0) {
      options = {};
    }

    if (show === props.showPopup) {
      return;
    }

    var newState = {};
    newState.transition = !options.immediate;

    if (show) {
      newState.showWrapper = true;
    } else {
      onClose();
    }

    setState(newState);
  };

  var renderTitle = function renderTitle(itemValue) {
    if (props.title) {
      return props.title;
    }

    var match = props.options.find(function (option) {
      return option.value === itemValue;
    });
    return match ? match.text : props.placeholder;
  };

  var renderOption = function renderOption(option) {
    var activeColor = parent.props.activeColor;
    var active = option.value === currentValue;

    var onClick = function onClick() {
      if (option.value !== currentValue) {
        var _parent$onChange;

        parent.onChange((_parent$onChange = {}, _parent$onChange[props.name] = option.value, _parent$onChange));
      }

      onClose();
    };

    return /*#__PURE__*/_react.default.createElement(_cell.default, {
      clickable: true,
      key: option.value,
      icon: option.icon,
      title: option.text,
      className: (0, _clsx.default)(bem('option', {
        active: active
      })),
      style: {
        color: active ? activeColor : ''
      },
      onClick: onClick
    }, active && /*#__PURE__*/_react.default.createElement(_icons.Success, {
      className: (0, _clsx.default)(bem('icon')),
      color: activeColor
    }));
  };

  var renderContent = function renderContent() {
    var _props$options;

    var offset = props.offset;
    var _parent$props = parent.props,
        zIndex = _parent$props.zIndex,
        overlayStyle = _parent$props.overlayStyle,
        duration = _parent$props.duration,
        direction = _parent$props.direction;
    var style = (0, _utils.getZIndexStyle)(zIndex);

    if (direction === 'down') {
      style.top = offset + "px";
    } else {
      style.bottom = offset + "px";
    }

    var attrs = (0, _utils.pick)(inheritProps(parent.props, props), inheritPropsKey);
    return /*#__PURE__*/_react.default.createElement("div", {
      style: _extends({}, style, {
        display: state.showWrapper ? 'block' : 'none'
      }),
      className: (0, _clsx.default)(bem([direction])),
      onClick: onClickWrapper
    }, /*#__PURE__*/_react.default.createElement(_popup.default, _extends({}, attrs, {
      teleport: null,
      visible: props.showPopup,
      className: (0, _clsx.default)(bem('content')),
      position: direction === 'down' ? 'top' : 'bottom',
      duration: state.transition ? +duration : 0,
      overlayStyle: _extends({
        position: 'absolute'
      }, overlayStyle),
      onClose: onClose,
      onClosed: onClosed
    }), (_props$options = props.options) == null ? void 0 : _props$options.map(renderOption), props.children));
  };

  (0, _react.useImperativeHandle)(ref, function () {
    return {
      toggle: toggle,
      renderTitle: renderTitle,
      state: state,
      titleClass: props.titleClass,
      disabled: props.disabled,
      name: props.name,
      options: props.options
    };
  });
  if (props.teleport) return ssrCompatRender(function () {
    return (0, _renderToContainer.renderToContainer)(props.teleport, renderContent());
  });
  return renderContent();
});
DropdownMenuItem.defaultProps = {
  placeholder: '请选择',
  options: []
};
var _default = DropdownMenuItem;
exports.default = _default;