import { __assign, __rest } from "tslib";
import React, { useState } from 'react';
import { Search, Dropdown, Overlay, Icon, Menu } from '@alicloud/console-components';
import SilderNav from '../silder-nav';
import classnames from 'classnames';
var Popup = Overlay.Popup;
var renderInput = function (_a) {
    var render = _a.render, popupConext = _a.popupConext, _b = _a.popOffset, popOffset = _b === void 0 ? [14, 0] : _b, input = __rest(_a, ["render", "popupConext", "popOffset"]);
    return render ? render : popupConext ? React.createElement(Popup, { offset: popOffset, trigger: React.createElement(Search, __assign({ placeholder: "search ...", className: "lp-search-input", shape: "simple" }, input)) },
        React.createElement("span", { className: "lp-overlay-search" }, popupConext)) : React.createElement(Search, __assign({ placeholder: "search ...", className: "lp-search-input", shape: "simple" }, input));
};
var TopNav = function (_a) {
    var _b = _a.home, home = _b === void 0 ? { img: "https://img.alicdn.com/tfs/TB1Cti8pGNj0u4jSZFyXXXgMVXa-210-100.png", homeUrl: "//home.console.aliyun.com" } : _b, style = _a.style, _c = _a.offset, offset = _c === void 0 ? [0, 0] : _c, icons = _a.icons, input = _a.input, nav = _a.nav, user = _a.user, _d = _a.fixedTop, fixedTop = _d === void 0 ? true : _d, sliderContext = _a.sliderContext, sliderOfferWidth = _a.sliderOfferWidth, sliderOfferHeight = _a.sliderOfferHeight, _e = _a.sliderWidth, sliderWidth = _e === void 0 ? 300 : _e;
    var left = offset[0], top = offset[1];
    var _f = useState(true), collapsed = _f[0], setCollapsed = _f[1];
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: classnames("lp-top-nav", { "absolute": !fixedTop }), style: fixedTop ? __assign({ left: left, top: top, width: "calc(100% - " + left + "px)" }, style) : style },
            React.createElement("div", { className: "top-left" },
                sliderContext ? React.createElement("div", { className: "left-more-button", onClick: function () { setCollapsed(!collapsed); } },
                    React.createElement(Icon, { type: "menu" })) : null,
                React.createElement("a", { className: "product-icon", href: home.homeUrl, target: "_self" },
                    React.createElement("img", { src: home.img }))),
            React.createElement("div", { className: "top-right" },
                input && renderInput(input),
                nav && nav.map(function (_a, index) {
                    var render = _a.render, text = _a.text, onClick = _a.onClick, onItemClick = _a.onItemClick, key = _a.key, _b = _a.menus, menus = _b === void 0 ? [] : _b;
                    return render ? React.createElement("span", { key: key ? key : index, className: "right-menu", onClick: onClick }, render) :
                        React.createElement(Dropdown, { key: key ? key : index, trigger: React.createElement("span", { className: "right-menu", onClick: onClick }, text), cache: true },
                            React.createElement(Menu, { onItemClick: onItemClick }, menus.map(function (_a) {
                                var label = _a.label, _b = _a.type, type = _b === void 0 ? "item" : _b, rest = __rest(_a, ["label", "type"]);
                                return type === "divider" ? React.createElement(Menu.Divider, __assign({}, rest)) : React.createElement(Menu.Item, __assign({}, rest), label);
                            })));
                }),
                icons && icons.map(function (_a, index) {
                    var render = _a.render, type = _a.type, popupConext = _a.popupConext, key = _a.key, onClick = _a.onClick, popOffset = _a.popOffset;
                    return render ? React.createElement("span", { key: key ? key : index, className: "right-menu", onClick: onClick }, render) : popupConext ? React.createElement(Popup, { offset: popOffset, key: key ? key : index, trigger: React.createElement(Icon, { onClick: onClick, className: "right-menu", type: type }) },
                        React.createElement("div", { className: "lp-pop-context" }, popupConext)) : React.createElement(Icon, { key: key ? key : index, onClick: onClick, className: "right-menu", type: type });
                }),
                user && user.render ? user.render : user.popupConext ? React.createElement(Popup, { offset: user.popOffset, trigger: React.createElement("img", { className: "userIcon", onClick: user.onClick, src: user.icon ? user.icon : "//oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg", alt: "" }) },
                    React.createElement("div", { className: "lp-pop-context" }, user.popupConext)) : React.createElement("img", { className: "userIcon", src: user.icon ? user.icon : "//oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg", alt: "", onClick: user.onClick }))),
        sliderContext ? React.createElement(SilderNav, { offset: [0, 50], offsetWidth: sliderOfferWidth, offsetHeight: sliderOfferHeight, type: "dialog", hasMask: true, width: sliderWidth, onMaskClick: function () { setCollapsed(!collapsed); }, collapsible: false, collapsed: collapsed }, sliderContext) : null));
};
export default TopNav;
