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 { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
import React, { useCallback, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { ArrowDown, ArrowUp } from "@nutui/icons-react-taro";
import { View } from "@tarojs/components";
import { MenuItem } from "../menuitem/menuitem";
import { ComponentDefaults } from "../../utils/typings";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    activeColor: '',
    closeOnOverlayClick: true,
    scrollFixed: false,
    lockScroll: true,
    overlay: true,
    icon: null,
    onOpen: function(index, from) {},
    onClose: function(index, from) {}
});
export var Menu = function(props) {
    var _ref = _object_spread({}, defaultProps, props), className = _ref.className, icon = _ref.icon, scrollFixed = _ref.scrollFixed, lockScroll = _ref.lockScroll, overlay = _ref.overlay, closeOnOverlayClick = _ref.closeOnOverlayClick, children = _ref.children, activeColor = _ref.activeColor, onClose = _ref.onClose, onOpen = _ref.onOpen, rest = _object_without_properties(_ref, [
        "className",
        "icon",
        "scrollFixed",
        "lockScroll",
        "overlay",
        "closeOnOverlayClick",
        "children",
        "activeColor",
        "onClose",
        "onOpen"
    ]);
    var menuRef = useRef(null);
    var _useState = _sliced_to_array(useState([]), 2), showMenuItem = _useState[0], setShowMenuItem = _useState[1];
    var _useState1 = _sliced_to_array(useState([]), 2), menuItemTitle = _useState1[0], setMenuItemTitle = _useState1[1];
    var _useState2 = _sliced_to_array(useState(false), 2), isScrollFixed = _useState2[0], setIsScrollFixed = _useState2[1];
    var cls = classNames("nut-menu", className, {
        'scroll-fixed': isScrollFixed
    });
    var getScrollTop = function(el) {
        return Math.max(0, el === window ? window.scrollY : el.scrollTop);
    };
    var onScroll = useCallback(function() {
        var scrollTop = getScrollTop(window);
        var isFixed = scrollTop > (typeof scrollFixed === 'boolean' ? 30 : Number(scrollFixed));
        setIsScrollFixed(isFixed);
    }, [
        scrollFixed
    ]);
    useEffect(function() {
        if (scrollFixed) {
            window.addEventListener('scroll', onScroll);
        }
        return function() {
            return window.removeEventListener('scroll', onScroll);
        };
    }, [
        scrollFixed,
        onScroll
    ]);
    var toggleMenuItem = function(index) {
        var from = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'NORMAL';
        showMenuItem[index] = !showMenuItem[index];
        if (showMenuItem[index]) {
            onOpen && onOpen(index, from);
        } else {
            onClose && onClose(index, from);
        }
        var temp = showMenuItem.map(function(i, idx) {
            return idx === index ? i : false;
        });
        setShowMenuItem(_to_consumable_array(temp));
    };
    var hideMenuItem = function(index) {
        var from = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'NORMAL';
        showMenuItem[index] = false;
        setShowMenuItem(_to_consumable_array(showMenuItem));
        onClose && onClose(index, from);
    };
    var updateTitle = function(text, index) {
        menuItemTitle[index] = text;
        setMenuItemTitle(_to_consumable_array(menuItemTitle));
    };
    var cloneChildren = function() {
        return React.Children.map(children, function(child, index) {
            return /*#__PURE__*/ React.cloneElement(child, _object_spread_props(_object_spread({}, child.props), {
                show: showMenuItem[index],
                index: index,
                activeColor: activeColor,
                parent: {
                    closeOnOverlayClick: closeOnOverlayClick,
                    overlay: overlay,
                    lockScroll: lockScroll,
                    toggleMenuItem: toggleMenuItem,
                    updateTitle: updateTitle,
                    hideMenuItem: hideMenuItem,
                    menuRef: menuRef
                }
            }));
        });
    };
    var menuTitle = function() {
        return React.Children.map(children, function(child, index) {
            if (/*#__PURE__*/ React.isValidElement(child)) {
                var _child_props = child.props, title = _child_props.title, titleIcon = _child_props.titleIcon, options = _child_props.options, value = _child_props.value, defaultValue = _child_props.defaultValue, disabled = _child_props.disabled, direction = _child_props.direction;
                var selected = options === null || options === void 0 ? void 0 : options.filter(function(option) {
                    return option.value === (value !== undefined ? value : defaultValue);
                });
                var finallyTitle = function() {
                    if (title) return title;
                    if (menuItemTitle && menuItemTitle[index]) return menuItemTitle[index];
                    if (selected && selected.length && selected[0].text) return selected[0].text;
                    return '';
                };
                var finallyIcon = function() {
                    if (titleIcon) return titleIcon;
                    if (icon) return icon;
                    return direction === 'up' ? /*#__PURE__*/ React.createElement(ArrowUp, {
                        className: "nut-menu-title-icon"
                    }) : /*#__PURE__*/ React.createElement(ArrowDown, {
                        className: "nut-menu-title-icon"
                    });
                };
                return /*#__PURE__*/ React.createElement(View, {
                    className: classNames('nut-menu-title ', "nut-menu-title-".concat(index), {
                        active: showMenuItem[index],
                        disabled: disabled
                    }, className),
                    style: {
                        color: showMenuItem[index] ? activeColor : ''
                    },
                    key: index,
                    onClick: function() {
                        if ((!options || !options.length) && !child.props.children) return;
                        !disabled && toggleMenuItem(index);
                    }
                }, /*#__PURE__*/ React.createElement(View, {
                    className: "nut-menu-title-text"
                }, finallyTitle()), finallyIcon());
            }
            return null;
        });
    };
    return /*#__PURE__*/ React.createElement(View, _object_spread_props(_object_spread({}, rest), {
        className: cls,
        ref: menuRef
    }), /*#__PURE__*/ React.createElement(View, {
        className: classNames('nut-menu-bar', {
            opened: showMenuItem.includes(true)
        })
    }, menuTitle()), cloneChildren());
};
Menu.displayName = 'NutMenu';
Menu.Item = MenuItem;
