import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import React__default, { useMemo } from 'react';
import { cn } from '../../../utils/cn.js';
import { motion, AnimatePresence } from 'motion/react';
import { sidebarTheme } from './Sidebar.theme.js';
import { useSidebarContext, SidebarProvider } from './SidebarContext.js';
import { SidebarHeader } from './SidebarHeader.js';
import { SidebarContent } from './SidebarContent.js';
import { SidebarFooter } from './SidebarFooter.js';
import { SidebarNav } from './SidebarNav.js';
import { SidebarNavGroup } from './SidebarNavGroup.js';
import { SidebarSubmenu } from './SidebarSubmenu.js';
import { SidebarToggle } from './SidebarToggle.js';
import { SidebarMobileTrigger } from './SidebarMobileTrigger.js';
import { SidebarUserProfile } from './SidebarUserProfile.js';

const SIDEBAR_TRANSITION = {
    type: "spring",
    stiffness: 300,
    damping: 30,
};
const SidebarDesktop = React__default.forwardRef(({ side = "left", variant = "sidebar", width, children, className, theme: customTheme = {}, ...props }, ref) => {
    var _a, _b, _c;
    const context = useSidebarContext();
    const collapsed = (_a = context === null || context === void 0 ? void 0 : context.collapsed) !== null && _a !== void 0 ? _a : false;
    const expandedWidth = (width === null || width === void 0 ? void 0 : width.expanded) || ((_b = context === null || context === void 0 ? void 0 : context.width) === null || _b === void 0 ? void 0 : _b.expanded) || 280;
    const collapsedWidth = (width === null || width === void 0 ? void 0 : width.collapsed) || ((_c = context === null || context === void 0 ? void 0 : context.width) === null || _c === void 0 ? void 0 : _c.collapsed) || 64;
    const theme = useMemo(() => ({
        ...sidebarTheme,
        ...customTheme,
        variants: { ...sidebarTheme.variants, ...customTheme.variants },
        sides: { ...sidebarTheme.sides, ...customTheme.sides },
    }), [customTheme]);
    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...motionSafeProps } = props;
    const sidebarClasses = cn(theme.baseStyle, theme.variants[variant], theme.sides[side], className);
    const animateValue = useMemo(() => ({
        width: collapsed ? collapsedWidth : expandedWidth,
        maxWidth: "100vw",
    }), [collapsed, collapsedWidth, expandedWidth]);
    return (jsx(motion.div, { ref: ref, className: sidebarClasses, "data-side": side, "data-variant": variant, "data-collapsed": collapsed, initial: false, animate: animateValue, transition: SIDEBAR_TRANSITION, ...motionSafeProps, children: children }));
});
SidebarDesktop.displayName = "SidebarDesktop";
const SidebarMobile = ({ children, className, theme: customTheme = {} }) => {
    const context = useSidebarContext();
    if (!context)
        return null;
    const { isMobileOpen, setMobileOpen } = context;
    const theme = useMemo(() => ({
        ...sidebarTheme,
        ...customTheme,
    }), [customTheme]);
    return (jsx(AnimatePresence, { children: isMobileOpen && (jsxs(Fragment, { children: [jsx(motion.div, { className: cn(theme.mobileBackdrop), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, onClick: () => setMobileOpen(false), "aria-hidden": "true" }), jsx(motion.div, { className: cn(theme.mobileOverlay, className), initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 20 }, transition: { type: "spring", stiffness: 400, damping: 35 }, role: "dialog", "aria-modal": "true", "aria-label": "Navigation menu", children: children })] })) }));
};
const SidebarContainer = React__default.forwardRef((props, ref) => {
    const context = useSidebarContext();
    if (context === null || context === void 0 ? void 0 : context.isMobile) {
        return (jsx(SidebarMobile, { className: props.className, theme: props.theme, children: props.children }));
    }
    return jsx(SidebarDesktop, { ref: ref, ...props });
});
SidebarContainer.displayName = "SidebarContainer";
const SidebarRoot = React__default.forwardRef(({ side = "left", variant = "sidebar", defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, mobileBreakpoint, mobileOpen, onMobileOpenChange, width, children, className, theme: customTheme = {}, ...props }, ref) => {
    return (jsx(SidebarProvider, { defaultCollapsed: defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange: onCollapsedChange, mobileBreakpoint: mobileBreakpoint, mobileOpen: mobileOpen, onMobileOpenChange: onMobileOpenChange, width: width, side: side, variant: variant, children: jsx(SidebarContainer, { ref: ref, className: className, theme: customTheme, side: side, variant: variant, width: width, ...props, children: children }) }));
});
SidebarRoot.displayName = "Sidebar";
const Sidebar = Object.assign(SidebarRoot, {
    Header: SidebarHeader,
    Content: SidebarContent,
    Footer: SidebarFooter,
    Nav: SidebarNav,
    NavGroup: SidebarNavGroup,
    Submenu: SidebarSubmenu,
    Toggle: SidebarToggle,
    MobileTrigger: SidebarMobileTrigger,
    UserProfile: SidebarUserProfile,
});

export { Sidebar };
