import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Avatar, Button, MenuList, ModeToggle, Spinner } from "@vertesia/ui/core";
import { useUserSession } from "@vertesia/ui/session";
import { Popover } from "@vertesia/ui/widgets";
import clsx from "clsx";
import { useState } from "react";
import SignInModal from "./SignInModal";
import InfoList from "./UserInfo";
export function UserSessionMenu({}) {
    const { user, isLoading } = useUserSession();
    const [showModal, setShowModal] = useState(false);
    if (isLoading) {
        return _jsx(Spinner, {});
    }
    else if (!user) {
        return _jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setShowModal(true), children: "Sign In" }), _jsx(SignInModal, { isOpen: showModal, onClose: () => setShowModal(false) })] });
    }
    else {
        return (_jsx("div", { className: "px-3", children: _jsx(UserSessionPopup, { asMenuTrigger: true }) }));
    }
}
function UserSessionPopup({ className, asMenuTrigger = false }) {
    const session = useUserSession();
    const { user } = session;
    if (!session || !user)
        return null;
    return (_jsxs(Popover, { strategy: 'fixed', placement: 'bottom-start', zIndex: 100, children: [_jsx(Popover.Trigger, { click: true, children: _jsx("div", { className: clsx(className, "flex items-center justify-start", asMenuTrigger && "cursor-pointer"), children: _jsx(Avatar, { size: 'sm', color: 'bg-amber-500', shape: 'circle', 
                        /*src={picture} */
                        name: user?.name }) }) }), _jsx(Popover.Content, { className: "w-[280px] mx-2 my-1", children: _jsx("div", { className: "bg-white dark:bg-slate-900 shadow-lg rounded-md ring-1 ring-gray-200 dark:ring-slate-700", children: _jsxs("div", { className: 'divide-y divide-gray-200 dark:divide-slate-700', children: [_jsxs("div", { className: 'py-2 pl-2', children: [_jsx("p", { className: "px-4 dark:text-white mb-1", children: user?.name ?? 'Unknown' }), _jsx("p", { className: "px-4 text-xs text-gray-500", children: user?.email ?? '' })] }), _jsx("div", { className: "w-full p-1", children: _jsx(InfoList, {}) }), _jsx("div", { className: 'py-2 pl-2', children: _jsx(ModeToggle, {}) }), _jsx("div", { className: 'py-2', children: _jsx(MenuList, { children: _jsx(MenuList.Item, { className: 'px-2', onClick: () => session.logout(), children: "Sign out" }) }) })] }) }) })] }));
}
//# sourceMappingURL=UserSessionMenu.js.map