import { __assign, __rest } from "tslib";
import React from 'react';
import { useState, useContext, useEffect } from 'react';
import classNames from 'classnames';
import Icon from '../icon';
import { SidebarContext } from './sidebar-context';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
var Sidebar = React.forwardRef(function (props, ref) {
    var _a;
    var _b = props.defaultCollapsed, defaultCollapsed = _b === void 0 ? false : _b, _c = props.width, width = _c === void 0 ? 200 : _c, _d = props.collapsedWidth, collapsedWidth = _d === void 0 ? 70 : _d, _e = props.theme, theme = _e === void 0 ? 'light' : _e, _f = props.trigger, trigger = _f === void 0 ? null : _f, _g = props.collapsible, collapsible = _g === void 0 ? false : _g, onCollapse = props.onCollapse, className = props.className, style = props.style, children = props.children, customisedCls = props.prefixCls, otherProps = __rest(props, ["defaultCollapsed", "width", "collapsedWidth", "theme", "trigger", "collapsible", "onCollapse", "className", "style", "children", "prefixCls"]);
    var _h = useState('collapsed' in props ? props.collapsed : defaultCollapsed), sideCollapsed = _h[0], setSideCollapsed = _h[1];
    var sidebarContext = useContext(SidebarContext);
    var sidebarWidth = sideCollapsed ? collapsedWidth : width;
    var outerStyle = __assign(__assign({}, style), { width: sidebarWidth, maxWidth: sidebarWidth, minWidth: sidebarWidth });
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('layout-sidebar', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className, (_a = {},
        _a[prefixCls + "_light"] = theme === 'light',
        _a));
    var _collapseBtnOnClick = function () {
        var collapsedVal = !sideCollapsed;
        if (!('collapsed' in props)) {
            setSideCollapsed(collapsedVal);
        }
        onCollapse && onCollapse(collapsedVal);
    };
    var renderTrigger = function () {
        if (!collapsible) {
            return null;
        }
        if (trigger) {
            return trigger;
        }
        return (React.createElement("div", { className: prefixCls + "__trigger", onClick: _collapseBtnOnClick },
            React.createElement(Icon, { name: "left", className: prefixCls + "__trigger-icon" })));
    };
    useEffect(function () {
        'collapsed' in props && setSideCollapsed(props.collapsed);
        sidebarContext.addSidebar();
        return function () {
            sidebarContext.removeSidebar();
        };
    }, [props, sidebarContext]);
    return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: cls, style: outerStyle }),
        React.createElement("div", { className: prefixCls + "__children" }, children),
        renderTrigger()));
});
Sidebar.displayName = 'Sidebar';
export default Sidebar;
//# sourceMappingURL=sidebar.js.map