"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { atom, useAtom } from "jotai";
import { motion } from "motion/react";
import { useCallback, useEffect, useState } from "react";
const sidebarContentAtom = atom(null);
export function SideBar() {
    // We keep separate track of the open state vs content because we want to
    // start animating the closing of the sidebar before the content is cleared,
    // so that we see it slide off screen. This means we can't use content as an
    // animation trigger because it would otherwise clear all at
    const [content, setContent] = useAtom(sidebarContentAtom);
    const [open, setOpen] = useState(false);
    const onAnimationComplete = useCallback(() => {
        if (!open) {
            setContent(null);
        }
    }, [open]);
    useEffect(() => {
        if (content) {
            setOpen(true);
        }
    }, [content]);
    // TODO: also need to listen for keyboard events
    const clickShield = useCallback((e) => {
        e.stopPropagation();
        e.preventDefault();
    }, []);
    const closeRequest = useCallback(() => {
        setOpen(false);
    }, []);
    return (_jsx(motion.div, { style: {
            position: "fixed",
            right: "-100%",
            top: "10%",
            maxHeight: "85%",
            maxWidth: "50%",
            zIndex: 1000,
            overflowY: "scroll",
        }, animate: {
            right: open ? "0" : "-100%",
            transition: {
                duration: 0.3,
            },
        }, onAnimationComplete: onAnimationComplete, children: content && (_jsxs("details", { open: true, style: {
                border: "1px solid #ccc",
                padding: "8px",
                borderRadius: "8px",
            }, children: [_jsxs("summary", { style: {
                        cursor: "default",
                        display: "flex",
                        justifyContent: "space-between",
                    }, onClick: clickShield, children: [content?.title, _jsx("button", { onClick: closeRequest, children: "X" })] }), content?.content] })) }));
}
export function SideBarCta({ cta, children, title, }) {
    const [, setContent] = useAtom(sidebarContentAtom);
    const onClick = useCallback(() => setContent({ title, content: children }), [title, children]);
    return (_jsx("button", { onClick: onClick, style: {
            padding: "8px 16px",
            border: "1px solid #ccc",
            borderRadius: "8px",
        }, children: cta }));
}
//# sourceMappingURL=index.js.map