import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useEffect, useMemo, useRef, useState } from "react";
import classNames from "classnames";
import { createPortal } from "react-dom";
import { ArrowRadius } from "@nutui/icons-react";
import Popup from "../popup/index";
import { getRect } from "../../hooks/use-client-rect";
import { ComponentDefaults } from "../../utils/typings";
import useClickAway from "../../hooks/use-click-away";
import { canUseDom } from "../../utils/can-use-dom";
import { getAllScrollableParents } from "../../utils/get-scroll-parent";
import { useRtl } from "../configprovider";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    list: [],
    theme: 'light',
    location: 'bottom',
    visible: false,
    offset: [
        0,
        8
    ],
    arrowOffset: 0,
    targetId: '',
    showArrow: true,
    closeOnOutsideClick: true,
    closeOnActionClick: true,
    overlay: false,
    onClick: function() {},
    onOpen: function() {},
    onClose: function() {}
});
var classPrefix = "nut-popover";
export var Popover = function(props) {
    var rtl = useRtl();
    var _ref = _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 = _object_without_properties(_ref, [
        "children",
        "list",
        "theme",
        "location",
        "visible",
        "offset",
        "arrowOffset",
        "targetId",
        "overlay",
        "closeOnOutsideClick",
        "closeOnActionClick",
        "className",
        "showArrow",
        "style",
        "onClick",
        "onOpen",
        "onClose",
        "onSelect"
    ]);
    var popoverRef = useRef(null);
    var popoverContentRef = useRef(null);
    var _useState = _sliced_to_array(useState(false), 2), showPopup = _useState[0], setShowPopup = _useState[1];
    var _useState1 = _sliced_to_array(useState(), 2), rootPosition = _useState1[0], setRootPosition = _useState1[1];
    useEffect(function() {
        setShowPopup(visible);
        if (visible) {
            setTimeout(function() {
                getContentWidth();
            }, 0);
        }
    }, [
        visible,
        location
    ]);
    var update = useRef(function(e) {
        getContentWidth();
    });
    useEffect(function() {
        if (visible) {
            scrollableParents.forEach(function(parent) {
                parent.addEventListener('scroll', update.current, {
                    passive: true
                });
            });
        } else {
            scrollableParents.forEach(function(parent) {
                return parent.removeEventListener('scroll', update.current);
            });
        }
    }, [
        visible
    ]);
    var element = null;
    var targetSet = [];
    if (canUseDom && targetId) {
        element = document.querySelector("#".concat(targetId));
        targetSet = [
            element,
            popoverContentRef.current
        ];
    } else {
        targetSet = [
            popoverRef.current,
            popoverContentRef.current
        ];
    }
    useClickAway(function() {
        onClick === null || onClick === void 0 ? void 0 : onClick();
        onClose === null || onClose === void 0 ? void 0 : onClose();
    }, targetSet, 'touchstart', true, visible, closeOnOutsideClick);
    var scrollableParents = useMemo(function() {
        return getAllScrollableParents(element || popoverRef.current);
    }, [
        element,
        popoverRef.current
    ]);
    var getContentWidth = function() {
        var rect = getRect(targetId ? document.querySelector("#".concat(targetId)) : popoverRef.current);
        setRootPosition({
            width: rect.width,
            height: rect.height,
            left: rtl ? rect.right : rect.left,
            top: rect.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop),
            right: rtl ? rect.left : rect.right
        });
    };
    var _obj;
    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix), true), _define_property(_obj, "".concat(classPrefix, "-").concat(theme), theme === 'dark'), _obj), className);
    var popoverArrow = function() {
        var prefixCls = 'nut-popover-arrow';
        return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(location.split('-')[0], " ").concat(prefixCls, "-").concat(location);
    };
    var getRootPosition = function() {
        var _popoverContentRef_current, _popoverContentRef_current1;
        var styles = {};
        if (!rootPosition) return {};
        var contentWidth = (_popoverContentRef_current = popoverContentRef.current) === null || _popoverContentRef_current === void 0 ? void 0 : _popoverContentRef_current.clientWidth;
        var contentHeight = (_popoverContentRef_current1 = popoverContentRef.current) === null || _popoverContentRef_current1 === void 0 ? void 0 : _popoverContentRef_current1.clientHeight;
        var width = rootPosition.width, height = rootPosition.height, left = rootPosition.left, top = rootPosition.top, right = rootPosition.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 : -(contentHeight + cross);
                styles.top = "".concat(top + h, "px");
                if (!skew) {
                    styles[dir] = "".concat(-(contentWidth - width) / 2 + rootPosition[dir] + parallel, "px");
                }
                if (skew === 'start') {
                    styles.left = "".concat(left + parallel, "px");
                }
                if (skew === 'end') {
                    styles.left = "".concat(right + parallel, "px");
                }
            }
            if ([
                'left',
                'right'
            ].includes(direction)) {
                var contentW = direction === 'left' ? -(contentWidth + cross) : width + cross;
                styles.left = "".concat(left + contentW, "px");
                if (!skew) {
                    styles.top = "".concat(top - contentHeight / 2 + height / 2 - 4 + parallel, "px");
                }
                if (skew === 'start') {
                    styles.top = "".concat(top + parallel, "px");
                }
                if (skew === 'end') {
                    styles.top = "".concat(top + height + parallel, "px");
                }
            }
        }
        return styles;
    };
    var arrowStyle = function() {
        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 === 'start') {
                    styles[dir] = "".concat(base + arrowOffset, "px");
                }
                if (skew === 'end') {
                    styles[dir2] = "".concat(base - arrowOffset, "px");
                }
            }
            if ([
                'left',
                'right'
            ].includes(direction)) {
                if (!skew) {
                    styles.top = "calc(50% - ".concat(arrowOffset, "px)");
                }
                if (skew === 'start') {
                    styles.top = "".concat(base - arrowOffset, "px");
                }
                if (skew === 'end') {
                    styles.bottom = "".concat(base + arrowOffset, "px");
                }
            }
        }
        return styles;
    };
    var handleSelect = function(item, index) {
        if (!item.disabled) {
            onSelect && onSelect(item, index);
        }
        if (closeOnActionClick) {
            onClick && onClick();
            onClose && onClose();
        }
    };
    return /*#__PURE__*/ React.createElement(React.Fragment, null, !targetId && /*#__PURE__*/ React.createElement("div", {
        className: "nut-popover-wrapper",
        ref: popoverRef,
        onClick: function() {
            onClick && onClick();
            if (!visible) {
                onOpen && onOpen();
            } else {
                onClose && onClose();
            }
        },
        style: style
    }, Array.isArray(children) ? children[0] : children), /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement("div", {
        className: classes,
        style: getRootPosition()
    }, /*#__PURE__*/ React.createElement(Popup, _object_spread({
        className: "nut-popover-content nut-popover-content-".concat(location),
        visible: showPopup,
        overlay: overlay,
        position: "none",
        lockScroll: false
    }, rest), /*#__PURE__*/ React.createElement("div", {
        className: "nut-popover-content-group",
        ref: popoverContentRef
    }, showArrow && /*#__PURE__*/ React.createElement("div", {
        className: popoverArrow(),
        style: arrowStyle()
    }, /*#__PURE__*/ React.createElement(ArrowRadius, {
        width: 8,
        height: 4
    })), Array.isArray(children) ? children[1] : null, list.map(function(item, index) {
        return /*#__PURE__*/ React.createElement("div", {
            className: classNames({
                'nut-popover-menu-item': true,
                'nut-popover-menu-disabled': item.disabled
            }, item.className),
            key: item.key || index,
            onClick: function() {
                return handleSelect(item, index);
            }
        }, item.icon && /*#__PURE__*/ React.createElement("div", {
            className: "nut-popover-menu-item-icon"
        }, item.icon), /*#__PURE__*/ React.createElement("div", {
            className: "nut-popover-menu-item-name"
        }, item.name), item.action && item.action.icon && /*#__PURE__*/ React.createElement("div", {
            className: "nut-popover-menu-item-action-icon",
            onClick: function(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));
    })))), document.body));
};
Popover.displayName = 'NutPopover';
