/**
 * amis-ui v6.14.0-beta.1
 * Copyright 2018-2025 fex
 */

import { __read, __assign } from 'tslib';
import React__default from 'react';
import { themeable } from 'amis-core';
import Collapse from '../Collapse.js';
import CollapseGroup from '../CollapseGroup.js';
import SearchBox from '../SearchBox.js';
import TooltipWrapper from '../TooltipWrapper.js';
import { Icon } from '../icons.js';

function FuncList(props) {
    var _a;
    var title = props.title, className = props.className, cx = props.classnames, bodyClassName = props.bodyClassName, descClassName = props.descClassName, mobileUI = props.mobileUI;
    var _b = __read(React__default.useState(''), 2), term = _b[0], setTerm = _b[1];
    var _c = __read(React__default.useState(props.data), 2), filteredFuncs = _c[0], setFiteredFuncs = _c[1];
    var _d = __read(React__default.useState(null), 2), activeFunc = _d[0], setActiveFunc = _d[1];
    var onSearch = React__default.useCallback(function (term) {
        term = term.trim();
        var filtered = props.data
            .map(function (item) {
            return __assign(__assign({}, item), { items: term
                    ? item.items.filter(function (item) { return ~item.name.indexOf(term.toUpperCase()); })
                    : item.items });
        })
            .filter(function (item) { return item.items.length; });
        setFiteredFuncs(filtered);
    }, [props.data]);
    React__default.useEffect(function () {
        onSearch(term);
    }, [props.data]);
    return (React__default.createElement("div", { className: cx('FormulaEditor-panel', 'left', className) },
        React__default.createElement("div", { className: cx('FormulaEditor-FuncList', (activeFunc === null || activeFunc === void 0 ? void 0 : activeFunc.name) ? 'withDoc' : '') },
            React__default.createElement("div", { className: cx('FormulaEditor-panel-header') }, title),
            React__default.createElement("div", { className: cx('FormulaEditor-panel-body') },
                React__default.createElement("div", { className: cx('FormulaEditor-FuncList-searchBox') },
                    React__default.createElement(SearchBox, { value: term, onChange: setTerm, mini: false, onSearch: onSearch, mobileUI: mobileUI })),
                React__default.createElement("div", { className: cx('FormulaEditor-FuncList-body', bodyClassName) },
                    React__default.createElement(CollapseGroup, { className: cx('FormulaEditor-FuncList-collapseGroup'), defaultActiveKey: (_a = filteredFuncs[0]) === null || _a === void 0 ? void 0 : _a.groupName, expandIcon: React__default.createElement(Icon, { cx: cx, icon: "fa fa-chevron-right FormulaEditor-FuncList-expandIcon", className: "Icon" }), accordion: true }, filteredFuncs.map(function (item) { return (React__default.createElement(Collapse, { className: cx('FormulaEditor-FuncList-collapse'), headingClassName: cx('FormulaEditor-FuncList-groupTitle'), bodyClassName: cx('FormulaEditor-FuncList-groupBody'), propKey: item.groupName, header: item.groupName, key: item.groupName }, item.items.map(function (item) { return (React__default.createElement("div", { className: cx('FormulaEditor-FuncList-item', {
                            'is-active': item.name === (activeFunc === null || activeFunc === void 0 ? void 0 : activeFunc.name)
                        }), onMouseEnter: function () { return setActiveFunc(item); }, onClick: function () { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, item); }, key: item.name }, item.name)); }))); }))))),
        (activeFunc === null || activeFunc === void 0 ? void 0 : activeFunc.name) ? (React__default.createElement("div", { className: cx('FormulaEditor-FuncDoc') },
            React__default.createElement("div", { className: cx('FormulaEditor-panel-header') }, (activeFunc === null || activeFunc === void 0 ? void 0 : activeFunc.name) || ''),
            React__default.createElement("div", { className: cx('FormulaEditor-panel-body') },
                React__default.createElement("div", { className: cx('FormulaEditor-FuncList-doc', descClassName) }, activeFunc ? (React__default.createElement(React__default.Fragment, null,
                    Array.isArray(activeFunc.params) ? (React__default.createElement("pre", null,
                        React__default.createElement(TooltipWrapper, { placement: "top", tooltip: {
                                children: function () { return (React__default.createElement("table", { className: cx('FormulaEditor-FuncList-doc-example', 'Table-table') },
                                    React__default.createElement("thead", null,
                                        React__default.createElement("tr", null, ['参数名称', '类型', '描述'].map(function (name, index) { return (React__default.createElement("th", { key: index }, name)); }))),
                                    React__default.createElement("tbody", null, activeFunc.params.map(function (param, index) { return (React__default.createElement("tr", { key: index },
                                        React__default.createElement("td", null, param.name),
                                        React__default.createElement("td", null, param.type),
                                        React__default.createElement("td", null, param.description))); })))); }
                            }, trigger: "hover" },
                            React__default.createElement("code", null, activeFunc.example)))) : null,
                    React__default.createElement("div", { className: cx('FormulaEditor-FuncList-doc-desc') }, activeFunc.description))) : null)))) : null));
}
var FuncList$1 = themeable(FuncList);

export { FuncList, FuncList$1 as default };
