import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
import { X } from 'lucide-react';
import clsx from 'clsx';
import { Fragment, useEffect, useState } from 'react';
// import { FullHeightLayout } from './FullHeightLayout.js'
import { Navbar } from './Navbar.js';
import { Sidebar } from './Sidebar.js';
import { SidebarContext } from './SidebarContext.js';
export function AppLayout({ sidebarClassName, className, title, children, logo, navbar, sidebar, mainNav }) {
    if (localStorage.getItem('desktopSidebarOpen') === null) {
        localStorage.setItem('desktopSidebarOpen', 'true');
    }
    const [sidebarOpen, setSidebarOpen] = useState(false);
    const [desktopSidebarOpen, setDesktopSidebarOpen] = useState(localStorage.getItem('desktopSidebarOpen') === 'true');
    const [isLargeScreen, setIsLargeScreen] = useState(window.innerWidth >= 1024);
    useEffect(() => {
        const handleResize = () => {
            setIsLargeScreen(window.innerWidth >= 1024);
        };
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);
    const sidebarContextValue = {
        isOpen: isLargeScreen ? desktopSidebarOpen : sidebarOpen,
        toggleDesktop: (value) => {
            if (value === undefined) {
                setDesktopSidebarOpen(!desktopSidebarOpen);
            }
            else {
                setDesktopSidebarOpen(value);
            }
            localStorage.setItem('desktopSidebarOpen', JSON.stringify(!desktopSidebarOpen));
        },
        toggleMobile: (value) => {
            if (value === undefined) {
                setSidebarOpen(!sidebarOpen);
            }
            else {
                setSidebarOpen(value);
            }
        },
    };
    return (_jsx(_Fragment, { children: _jsx("div", { className: 'flex flex-col h-screen overflow-y-hidden', children: _jsxs(SidebarContext.Provider, { value: sidebarContextValue, children: [_jsx("div", { className: 'w-full', children: mainNav }), _jsxs("div", { className: 'flex h-full overflow-y-auto w-full', children: [_jsx(Transition, { show: sidebarOpen, as: Fragment, children: _jsxs(Dialog, { as: "div", className: "relative z-50 lg:hidden", onClose: setSidebarOpen, children: [_jsx(TransitionChild, { as: Fragment, enter: "transition-opacity ease-linear duration-300", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "transition-opacity ease-linear duration-300", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx("div", { className: "fixed inset-0 bg-gray-900/80" }) }), _jsx("div", { className: "fixed inset-0 flex", children: _jsx(TransitionChild, { as: Fragment, enter: "transition ease-in-out duration-300 transform", enterFrom: "-translate-x-full", enterTo: "translate-x-0", leave: "transition ease-in-out duration-300 transform", leaveFrom: "translate-x-0", leaveTo: "-translate-x-full", children: _jsxs(DialogPanel, { className: "relative flex w-full max-w-xs flex-1", children: [_jsx(Sidebar, { logo: logo, className: sidebarClassName, children: sidebar }), _jsx("div", { className: "flex w-16 justify-center pt-5 items-start", children: _jsxs("button", { type: "button", className: "-m-2.5 p-2.5", onClick: () => setSidebarOpen(false), children: [_jsx("span", { className: "sr-only", children: "Close sidebar" }), _jsx(X, { className: "size-6 text-white", "aria-hidden": "true" })] }) })] }) }) })] }) }), _jsx("div", { className: `hidden lg:block relative transition-all duration-300 ${desktopSidebarOpen ? 'w-72' : 'w-12'}`, children: _jsx(Sidebar, { logo: logo, className: sidebarClassName, children: sidebar }) }), _jsxs("div", { className: "w-full h-full overflow-y-hidden", children: [navbar ? (_jsx(Navbar, { title: title, logo: logo, children: navbar })) : null, _jsx("main", { className: clsx("flex-1 h-full w-full relative flex flex-col", className), children: children })] })] })] }) }) }));
}
//# sourceMappingURL=AppLayout.js.map