import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback } from 'react';
import cn from 'classnames';
import Icon from '../../../icon';
import Popover from '../../../popover';
import { useEventCallbackRef } from '../../../utils/hooks/useEventCallbackRef';
import { getTabPanelStringTitle } from '../../utils';
var AnchorOperation = function (_a) {
    var tabs = _a.tabs, onChange = _a.onChange;
    var onChangeRef = useEventCallbackRef(onChange);
    var _b = useState(false), visible = _b[0], setVisible = _b[1];
    var onClick = useCallback(function (item) {
        onChangeRef.current(item);
        !item.disabled && setVisible(false);
    }, [onChangeRef]);
    return (_jsxs(Popover, __assign({ position: Popover.Position.BottomLeft, cushion: 3, visible: visible, onVisibleChange: setVisible }, { children: [_jsx(Popover.Trigger.Hover, { children: _jsx(Icon, { type: "more" }, void 0) }, void 0), _jsx(Popover.Content, { children: _jsx("div", __assign({ className: "zent-tabs-hidden-tabs", "data-zv": 'v10.0.11' }, { children: tabs.map(function (item) { return (_jsx("div", __assign({ className: cn('zent-tabs-hidden-tab', {
                            'zent-tabs-hidden-tab-disabled': item.disabled,
                        }), onClick: function () { return onClick(item); }, title: getTabPanelStringTitle(item.title), "data-zv": 'v10.0.11' }, { children: item.title }), item.key)); }) }), void 0) }, void 0)] }), void 0));
};
export default AnchorOperation;
