import React, { useState } from 'react';
import { Icon, Dropdown, Menu } from '@alicloud/console-components';
import classnames from 'classnames';
var renderItem = function (headers) {
    return Array.isArray(headers)
        ? headers.map(function (item) { return React.createElement(Menu.Item, { key: item }, item); })
        : null;
};
var Header = function (_a) {
    var header = _a.header, headers = _a.headers, onSelectHeader = _a.onSelectHeader, isSildeNav = _a.isSildeNav;
    var _b = useState('down'), direction = _b[0], setDirection = _b[1];
    var handleChangeDirection = function () {
        setDirection(direction === 'down' ? 'up' : 'down');
    };
    var handleClick = function (selectedKey) {
        handleChangeDirection();
        onSelectHeader && onSelectHeader(selectedKey);
    };
    return (React.createElement("h2", { className: "lp-menu-header" },
        React.createElement("div", { className: "header-text" }, header),
        headers && headers.length > 0 && (React.createElement("div", { className: "header-select" },
            React.createElement(Dropdown, { visible: direction === 'up', triggerType: "click", offset: isSildeNav ? [-175, 10] : [16, 10], onVisibleChange: function (visible) {
                    setDirection(visible ? 'up' : 'down');
                }, container: function (trigger) { return trigger.parentNode; }, cache: true, trigger: React.createElement("div", { className: "trigger-wrap" },
                    React.createElement(Icon, { onClick: handleChangeDirection, size: "small", type: "sort-" + direction, className: classnames({
                            'trigger-icon': true,
                            'icon-up': direction === 'up',
                        }) })) },
                React.createElement(Menu, { style: { left: 0, minWidth: '100%' }, selectedKeys: React.isValidElement(header) ? [] : header, selectMode: "single", onItemClick: handleClick }, renderItem(headers)))))));
};
export default Header;
