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); }

// Components
import { Success } from '@react-vant/icons';
import clsx from 'clsx';
import React, { forwardRef, useImperativeHandle, useContext } from 'react';
import Cell from '../cell';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';
import { useSetState } from '../hooks';
import useSsrCompat from '../hooks/use-ssr-compat';
import Popup from '../popup';
import { getZIndexStyle, pick } from '../utils';
import { renderToContainer } from '../utils/dom/renderToContainer';
import DropdownMenuContext from './DropdownMenuContext';
var inheritPropsKey = ['overlay', 'overlayClass', 'overlayStyle', 'disabled', 'placeholder', 'onOpen', 'onClosed', 'onOpened', 'teleport', 'closeOnClickOverlay'];

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

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

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

  var _useSsrCompat = useSsrCompat(),
      ssrCompatRender = _useSsrCompat[0];

  var _useContext = useContext(ConfigProviderContext),
      prefixCls = _useContext.prefixCls,
      createNamespace = _useContext.createNamespace;

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

  var parent = useContext(DropdownMenuContext);
  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.createElement(Cell, {
      clickable: true,
      key: option.value,
      icon: option.icon,
      title: option.text,
      className: clsx(bem('option', {
        active: active
      })),
      style: {
        color: active ? activeColor : ''
      },
      onClick: onClick
    }, active && /*#__PURE__*/React.createElement(Success, {
      className: clsx(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 = getZIndexStyle(zIndex);

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

    var attrs = pick(inheritProps(parent.props, props), inheritPropsKey);
    return /*#__PURE__*/React.createElement("div", {
      style: _extends({}, style, {
        display: state.showWrapper ? 'block' : 'none'
      }),
      className: clsx(bem([direction])),
      onClick: onClickWrapper
    }, /*#__PURE__*/React.createElement(Popup, _extends({}, attrs, {
      teleport: null,
      visible: props.showPopup,
      className: clsx(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));
  };

  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 renderToContainer(props.teleport, renderContent());
  });
  return renderContent();
});
DropdownMenuItem.defaultProps = {
  placeholder: '请选择',
  options: []
};
export default DropdownMenuItem;