"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Popover", {
    enumerable: true,
    get: function() {
        return Popover;
    }
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _ts_generator = require("@swc/helpers/_/_ts_generator");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _taro = require("@tarojs/taro");
var _components = require("@tarojs/components");
var _iconsreacttaro = require("@nutui/icons-react-taro");
var _index = /*#__PURE__*/ _interop_require_default._(require("../popup/index"));
var _getrect = require("../../utils/taro/get-rect");
var _typings = require("../../utils/typings");
var _index1 = require("../configprovider/index");
var _pxtransform = require("../../utils/taro/px-transform");
var _useuuid = require("../../hooks/use-uuid");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
    list: [],
    theme: 'light',
    location: 'bottom',
    visible: false,
    offset: [
        0,
        8
    ],
    arrowOffset: 0,
    targetId: '',
    showArrow: true,
    closeOnOutsideClick: true,
    closeOnActionClick: true,
    overlay: false,
    onClick: function onClick() {},
    onOpen: function onOpen() {},
    onClose: function onClose() {}
});
var classPrefix = "nut-popover";
var Popover = function Popover(props) {
    var rtl = (0, _index1.useRtl)();
    var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, list = _ref.list, theme = _ref.theme, location = _ref.location, visible = _ref.visible, offset = _ref.offset, arrowOffset = _ref.arrowOffset, targetId = _ref.targetId, overlay = _ref.overlay, closeOnOutsideClick = _ref.closeOnOutsideClick, closeOnActionClick = _ref.closeOnActionClick, className = _ref.className, showArrow = _ref.showArrow, style = _ref.style, onClick = _ref.onClick, onOpen = _ref.onOpen, onClose = _ref.onClose, onSelect = _ref.onSelect, rest = (0, _object_without_properties._)(_ref, [
        "children",
        "list",
        "theme",
        "location",
        "visible",
        "offset",
        "arrowOffset",
        "targetId",
        "overlay",
        "closeOnOutsideClick",
        "closeOnActionClick",
        "className",
        "showArrow",
        "style",
        "onClick",
        "onOpen",
        "onClose",
        "onSelect"
    ]);
    var popoverRef = (0, _react.useRef)(null);
    var popoverContentRef = (0, _react.useRef)(null);
    var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), showPopup = _useState[0], setShowPopup = _useState[1];
    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), popWidth = _useState1[0], setPopWidth = _useState1[1];
    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), popHeight = _useState2[0], setPopHeight = _useState2[1];
    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(), 2), wrapperPosition = _useState3[0], setWrapperPosition = _useState3[1];
    (0, _react.useEffect)(function() {
        setShowPopup(visible);
        if (visible) {
            getWrapperPosition();
        }
    }, [
        visible
    ]);
    var uid = (0, _useuuid.useUuid)();
    var popoverId = "popover-".concat(uid);
    var getWrapperPosition = function getWrapperPosition() {
        return (0, _async_to_generator._)(function() {
            return (0, _ts_generator._)(this, function(_state) {
                (0, _taro.nextTick)(function() {
                    return (0, _async_to_generator._)(function() {
                        var rect, _tmp, width, height, right, left, top;
                        return (0, _ts_generator._)(this, function(_state) {
                            switch(_state.label){
                                case 0:
                                    if (!targetId) return [
                                        3,
                                        2
                                    ];
                                    return [
                                        4,
                                        (0, _getrect.getRectInMultiPlatform)(document.querySelector("#".concat(targetId)), targetId)
                                    ];
                                case 1:
                                    _tmp = _state.sent();
                                    return [
                                        3,
                                        4
                                    ];
                                case 2:
                                    return [
                                        4,
                                        (0, _getrect.getRectInMultiPlatform)(popoverRef.current, popoverId)
                                    ];
                                case 3:
                                    _tmp = _state.sent();
                                    _state.label = 4;
                                case 4:
                                    rect = _tmp;
                                    width = rect.width, height = rect.height, right = rect.right, left = rect.left, top = rect.top;
                                    setWrapperPosition({
                                        width: width,
                                        height: height,
                                        left: rtl ? right : left,
                                        top: top,
                                        right: rtl ? left : right
                                    });
                                    getPopoverContentW();
                                    return [
                                        2
                                    ];
                            }
                        });
                    })();
                });
                return [
                    2
                ];
            });
        })();
    };
    var getPopoverContentW = function getPopoverContentW() {
        return (0, _async_to_generator._)(function() {
            return (0, _ts_generator._)(this, function(_state) {
                (0, _taro.nextTick)(function() {
                    return (0, _async_to_generator._)(function() {
                        var rectContent;
                        return (0, _ts_generator._)(this, function(_state) {
                            switch(_state.label){
                                case 0:
                                    return [
                                        4,
                                        (0, _getrect.getRectInMultiPlatform)(popoverContentRef.current)
                                    ];
                                case 1:
                                    rectContent = _state.sent();
                                    setPopWidth(rectContent.width);
                                    setPopHeight(rectContent.height);
                                    return [
                                        2
                                    ];
                            }
                        });
                    })();
                });
                return [
                    2
                ];
            });
        })();
    };
    var clickAway = function clickAway() {
        if (closeOnOutsideClick) {
            onClick === null || onClick === void 0 ? void 0 : onClick();
            onClose === null || onClose === void 0 ? void 0 : onClose();
        }
    };
    var classes = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-").concat(theme), theme === 'dark'), className);
    var popoverArrow = function popoverArrow() {
        var prefixCls = 'nut-popover-arrow';
        var direction = location.split('-')[0];
        return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(direction, " ").concat(prefixCls, "-").concat(location);
    };
    var getPopoverPosition = function getPopoverPosition() {
        var styles = {};
        if (!wrapperPosition) {
            styles.visibility = 'hidden';
            return styles;
        }
        var width = wrapperPosition.width, height = wrapperPosition.height, left = wrapperPosition.left, top = wrapperPosition.top, right = wrapperPosition.right;
        var direction = location.split('-')[0];
        var skew = location.split('-')[1];
        var cross = 0;
        var parallel = 0;
        if (Array.isArray(offset) && offset.length === 2) {
            var rtloffset = rtl ? -offset[0] : offset[0];
            cross += +offset[1];
            parallel += +rtloffset;
        }
        if (width) {
            var dir = rtl ? 'right' : 'left';
            if ([
                'bottom',
                'top'
            ].includes(direction)) {
                var h = direction === 'bottom' ? height + cross : -(popHeight + cross);
                styles.top = (0, _pxtransform.pxTransform)(top + h);
                if (!skew) {
                    styles[dir] = (0, _pxtransform.pxTransform)(-(popWidth - width) / 2 + wrapperPosition[dir] + parallel);
                }
                if (skew === 'left') {
                    styles.left = (0, _pxtransform.pxTransform)(left + parallel);
                }
                if (skew === 'right') {
                    styles.left = (0, _pxtransform.pxTransform)(right + parallel);
                }
            }
            if ([
                'left',
                'right'
            ].includes(direction)) {
                var contentW = direction === 'left' ? -(popWidth + cross) : width + cross;
                styles.left = (0, _pxtransform.pxTransform)(left + contentW);
                if (!skew) {
                    styles.top = (0, _pxtransform.pxTransform)(top - popHeight / 2 + height / 2 - 4 + parallel);
                }
                if (skew === 'top') {
                    styles.top = (0, _pxtransform.pxTransform)(top + parallel);
                }
                if (skew === 'bottom') {
                    styles.top = (0, _pxtransform.pxTransform)(top + height + parallel);
                }
            }
        }
        styles.visibility = popWidth === 0 ? 'hidden' : 'initial';
        return styles;
    };
    var popoverArrowStyle = function popoverArrowStyle() {
        var styles = {};
        var direction = location.split('-')[0];
        var skew = location.split('-')[1];
        var base = 16;
        if (arrowOffset !== 0) {
            var dir = rtl ? 'right' : 'left';
            var dir2 = rtl ? 'left' : 'right';
            if ([
                'bottom',
                'top'
            ].includes(direction)) {
                if (!skew) {
                    styles[dir] = "calc(50% + ".concat(arrowOffset, "px)");
                }
                if (skew === 'left') {
                    styles[dir] = "".concat(base + arrowOffset, "px");
                }
                if (skew === 'right') {
                    styles[dir2] = "".concat(base - arrowOffset, "px");
                }
            }
            if ([
                'left',
                'right'
            ].includes(direction)) {
                if (!skew) {
                    styles.top = "calc(50% - ".concat(arrowOffset, "px)");
                }
                if (skew === 'top') {
                    styles.top = "".concat(base - arrowOffset, "px");
                }
                if (skew === 'bottom') {
                    styles.bottom = "".concat(base + arrowOffset, "px");
                }
            }
        }
        return styles;
    };
    var handleSelect = function handleSelect(item, index) {
        if (!item.disabled) {
            onSelect === null || onSelect === void 0 ? void 0 : onSelect(item, index);
        }
        if (closeOnActionClick) {
            onClick === null || onClick === void 0 ? void 0 : onClick();
            onClose === null || onClose === void 0 ? void 0 : onClose();
        }
    };
    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, !targetId && /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: "nut-popover-wrapper",
        ref: popoverRef,
        id: popoverId,
        onClick: function onClick() {
            var _props_onClick;
            props === null || props === void 0 ? void 0 : (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props);
            if (!visible) {
                onOpen === null || onOpen === void 0 ? void 0 : onOpen();
            } else {
                onClose === null || onClose === void 0 ? void 0 : onClose();
            }
        },
        style: style
    }, Array.isArray(children) ? children[0] : children), /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: classes,
        style: (0, _object_spread._)({}, getPopoverPosition(), style)
    }, /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread._)({
        className: "nut-popover-content nut-popover-content-".concat(location),
        position: "none",
        overlay: overlay,
        visible: showPopup
    }, rest), /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: "nut-popover-content-group",
        ref: popoverContentRef
    }, showArrow && /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: popoverArrow(),
        style: popoverArrowStyle()
    }, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowRadius, null)), Array.isArray(children) ? children[1] : null, list.map(function(item, index) {
        var _item_action;
        return /*#__PURE__*/ _react.default.createElement(_components.View, {
            className: (0, _classnames.default)({
                'nut-popover-item': true,
                'nut-popover-item-disabled': item.disabled
            }, item.className),
            key: item.key || index,
            onClick: function onClick() {
                return handleSelect(item, index);
            }
        }, item.icon && /*#__PURE__*/ _react.default.createElement(_components.View, {
            className: "nut-popover-item-icon"
        }, item.icon), /*#__PURE__*/ _react.default.createElement(_components.Text, {
            className: "nut-popover-item-name"
        }, item.name), ((_item_action = item.action) === null || _item_action === void 0 ? void 0 : _item_action.icon) && /*#__PURE__*/ _react.default.createElement(_components.View, {
            className: "nut-popover-item-action-icon",
            onClick: function onClick(e) {
                var _item_action_onClick, _item_action;
                return (_item_action = item.action) === null || _item_action === void 0 ? void 0 : (_item_action_onClick = _item_action.onClick) === null || _item_action_onClick === void 0 ? void 0 : _item_action_onClick.call(_item_action, e);
            }
        }, item.action.icon));
    }))), showPopup && closeOnOutsideClick && /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: "nut-popover-content-bg",
        onClick: clickAway,
        onTouchMove: clickAway
    })));
};
Popover.displayName = 'NutPopover';
