"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { atom, useAtom } from "jotai";
import { useCallback, useEffect, useState } from "react";
const sidebarContentAtom = atom(null);
export function SideBarContents({ SideBarContainer, }) {
    // 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 once
    const [content, setContent] = useAtom(sidebarContentAtom);
    const [open, setOpen] = useState(false);
    const onAnimationComplete = useCallback(() => {
        if (!open) {
            setContent(null);
        }
    }, [open]);
    useEffect(() => {
        if (content) {
            setOpen(true);
        }
    }, [content]);
    const closeRequest = useCallback(() => {
        setOpen(false);
    }, []);
    return (_jsx("div", { style: {
            position: "fixed",
            right: "0",
            top: "10%",
            maxHeight: "85%",
            maxWidth: "50%",
            zIndex: 1000,
            overflowY: "auto",
            transform: open ? "translateX(0)" : "translateX(100%)",
            transition: "transform 0.2s ease-in-out",
        }, onTransitionEnd: onAnimationComplete, children: content && (_jsx(SideBarContainer, { content: content, closeRequest: closeRequest })) }));
}
export function SideBarTriggerContents({ cta, children, title, Button, }) {
    const [, setContent] = useAtom(sidebarContentAtom);
    const onClick = useCallback(() => setContent({ title, content: children }), [title, children]);
    return _jsx(Button, { onClick: onClick, children: cta });
}
//# sourceMappingURL=containers.js.map