import { __assign } from "tslib";
import React, { useState, useCallback } from 'react';
import NavCollapseTrigger from './NavCollapseTrigger';
import classnames from 'classnames';
import Menu from '../menu/index';
var useCollapse = function (_a) {
    var defaultCollapsed = _a.defaultCollapsed, collapsed = _a.collapsed, onCollapseTriggerClick = _a.onCollapseTriggerClick, onMaskClick = _a.onMaskClick;
    var isControlled = typeof collapsed === 'boolean';
    var _b = useState(defaultCollapsed), collapsedState = _b[0], setCollapsedState = _b[1];
    // 是否是受控组件？
    var actualCollapsed = isControlled ? collapsed : collapsedState;
    // 装饰onCollapseTriggerClick，在受控模式下要设置当前collapsedState
    var actualOnCollapseTriggerClick = useCallback(function (e, type) {
        type === "collapse" && onCollapseTriggerClick && onCollapseTriggerClick(!actualCollapsed, e);
        type === "mask" && onMaskClick && onMaskClick(!actualCollapsed, e);
        if (!isControlled) {
            setCollapsedState(!actualCollapsed);
        }
    }, [actualCollapsed, isControlled, onCollapseTriggerClick]);
    return [actualCollapsed, actualOnCollapseTriggerClick];
};
var Nav = function (_a) {
    var className = _a.className, _b = _a.collapsible, collapsible = _b === void 0 ? true : _b, collapsed = _a.collapsed, _c = _a.defaultCollapsed, defaultCollapsed = _c === void 0 ? false : _c, onCollapseTriggerClick = _a.onCollapseTriggerClick, onMaskClick = _a.onMaskClick, nav = _a.nav, children = _a.children, width = _a.width, hasMask = _a.hasMask, _d = _a.type, type = _d === void 0 ? "normal" : _d, style = _a.style, _e = _a.offset, offset = _e === void 0 ? [0, 0] : _e, offsetWidth = _a.offsetWidth, offsetHeight = _a.offsetHeight;
    var _f = useCollapse({
        collapsed: collapsed,
        defaultCollapsed: defaultCollapsed,
        onCollapseTriggerClick: onCollapseTriggerClick,
        onMaskClick: onMaskClick
    }), derivedCollapsed = _f[0], derivedOnCollapseTriggerClick = _f[1];
    var left = offset[0], top = offset[1];
    var isDialog = type == "dialog";
    var style_ = isDialog ? __assign({ left: left, top: top, height: "calc(100vh - " + top + "px)", width: "calc(100vw - " + left + "px)" }, style) : style;
    style_ = offsetWidth ? __assign(__assign({}, style_), { width: "calc(100vw - " + offsetWidth + "px)" }) : style_;
    style_ = offsetHeight ? __assign(__assign({}, style_), { height: "calc(100vh - " + offsetHeight + "px)" }) : style_;
    return (React.createElement("div", { className: "lp-silder-nav-container" },
        React.createElement("div", { className: classnames("lp-silder-nav", { "top": isDialog }, { "hide": derivedCollapsed }, className), style: style_ },
            React.createElement("div", { className: classnames("main_nav", { "hide": derivedCollapsed }), style: { width: width } },
                React.createElement("div", { className: "nav-childen-wrapper" },
                    nav ? React.createElement(Menu, __assign({}, nav, { isSildeNav: true })) : null,
                    children)),
            collapsible && (React.createElement(NavCollapseTrigger, { collapsed: derivedCollapsed, onClick: function (e) { return derivedOnCollapseTriggerClick(e, "collapse"); } })),
            isDialog && hasMask && React.createElement("div", { className: "lp-silder-nav-mask", onClick: function (e) { return derivedOnCollapseTriggerClick(e, "mask"); } }))));
};
export default Nav;
