import { jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { SettingOutlined } from "@ant-design/icons";
import { Button, Dropdown } from "antd";
import { Link } from "react-router-dom";
import { useApp } from "../../application/index.mjs";
import { useCompile } from "../../schema-component/index.mjs";
import { useToken } from "../../style/index.mjs";
const SettingsCenterDropdown = ()=>{
    const compile = useCompile();
    const { token } = useToken();
    const app = useApp();
    const userSettings = app.userSettingsManager.getList();
    const settingItem = [];
    userSettings.filter((v)=>false !== v.isTopLevel).forEach((setting)=>{
        settingItem.push({
            key: 'userSetting:' + setting.name,
            icon: setting.icon,
            label: /*#__PURE__*/ jsx(Link, {
                to: setting.path,
                children: compile(setting.title)
            })
        });
    });
    settingItem.push({
        type: 'divider'
    });
    const menuItems = useMemo(()=>{
        const list = app.systemSettingsManager.getList();
        function traverse(settings) {
            return settings.filter((item)=>!item.path.includes(':')).map((item)=>{
                var _item_children;
                item.title = compile(item.title);
                item.label = /*#__PURE__*/ jsx(Link, {
                    to: item.path,
                    children: compile(item.title)
                });
                if (null == (_item_children = item.children) ? void 0 : _item_children.length) {
                    item.children = traverse(item.children);
                    item.label = compile(item.title);
                }
                return {
                    key: item.key,
                    label: item.label,
                    path: item.path,
                    children: item.children,
                    name: item.title
                };
            });
        }
        return traverse(list);
    }, [
        app.systemSettingsManager,
        compile
    ]);
    settingItem.push(...menuItems);
    return /*#__PURE__*/ jsx(Dropdown, {
        menu: {
            style: {
                maxHeight: '70vh',
                overflow: 'auto'
            },
            items: settingItem
        },
        children: /*#__PURE__*/ jsx(Button, {
            "data-testid": "plugin-settings-button",
            icon: /*#__PURE__*/ jsx(SettingOutlined, {
                style: {
                    color: token.colorTextHeaderMenu
                }
            })
        })
    });
};
export { SettingsCenterDropdown };
