import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import { AnimatePresence, motion } from "motion/react";
import { useMemo, useState } from "react";
function Badge({ children, secondary = false }) {
    const className = secondary ? "bg-secondary text-primary" : "text-foreground bg-muted";
    return _jsx("span", { className: className, children: children });
}
/**
 * Resolve nested array inner type
 * @param innerType
 */
function resolveInnerType(innerType) {
    if (!innerType) {
        return undefined;
    }
    else if (innerType.name === "array") {
        return resolveInnerType(innerType.innerType);
    }
    else {
        return innerType;
    }
}
function PropertySignature({ property }) {
    return (_jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx("div", { className: "font-semibold text-gray-600", children: property.name }), property.optional && _jsx(Badge, { children: "optional" }), _jsx(Badge, { children: property.type.value })] }));
}
export function ActivitiesDoc({ activities }) {
    return (_jsx("div", { className: 'flex flex-col gap-y-4 divide-y divide-gray-200', children: activities.map(activity => _jsx(ActivityDoc, { activity: activity }, activity.name)) }));
}
function ActivitySectionTitle({ code, children }) {
    return (_jsxs("div", { className: "flex gap-2 items-center border-b border-b-gray-200 mb-2", children: [_jsx("div", { className: 'text-lg font-medium text-gray-900 py-2 ', children: children }), code && _jsx("div", { children: _jsx(Badge, { children: code }) })] }));
}
export function ActivityDoc({ activity, headingClass, headingRef }) {
    return (_jsxs("div", { className: headingClass, id: activity.name, ref: headingRef, children: [_jsx("div", { className: "text-xl font-semibold pt-8", children: activity.title }), _jsx("div", { className: "pb-4", children: _jsx(Badge, { children: activity.name }) }), activity.doc &&
                _jsx("div", { className: "text-gray-700 pb-2", children: activity.doc }), _jsxs("div", { className: "pb-4", children: [_jsx(ActivitySectionTitle, { code: activity.paramsType, children: "Parameters" }), _jsx("div", { className: "divide-y divide-gray-100", children: activity.params.map(prop => _jsx(PropertyDetails, { property: prop }, prop.name)) })] }), _jsxs("div", { className: "pb-4", children: [_jsx(ActivitySectionTitle, { children: "Returns" }), _jsx("div", { children: activity.returnType ? activity.returnType.value : "void" })] })] }));
}
function PropertyDetails({ property, className }) {
    const expandable = useMemo(() => {
        const type = resolveInnerType(property.type.innerType) ?? property.type;
        if (type.name === "object" && type.members) {
            return _jsx(ObjectMembersPanel, { members: type.members });
        }
        else if (type.name === 'enum' && type.enum) {
            return _jsx(EnumValuesPanel, { values: type.enum });
        }
        else {
            return null;
        }
    }, [property.type.innerType]);
    return (_jsxs("div", { className: clsx("py-2", className), children: [_jsx(PropertySignature, { property: property }), property.doc && _jsx("div", { className: "text-gray-700 text-sm pt-2", children: property.doc }), expandable && _jsx("div", { className: "my-2 overflow-hidden", children: expandable })] }));
}
function EnumValuesPanel({ values }) {
    return _jsx("div", { className: "flex flex-wrap items-center gap-2", children: values.map((v, i) => _jsx(Badge, { secondary: true, children: v }, i)) });
}
function ObjectMembersPanel({ members }) {
    return _jsx(ExpandablePanel, { className: 'rounded-md border border-gray-200', button: (isOn) => (_jsxs("div", { className: "px-4 py-2 flex items-center gap-x-2 text-sm font-medium hover:text-blue-600", children: [_jsx(ExpandIcon, { isOpen: isOn }), isOn ?
                    _jsx("div", { children: "Hide child properties" })
                    :
                        _jsx("div", { children: "Show child properties" })] })), body: _jsx(NestedPropertiesDetails, { properties: members }) });
}
function NestedPropertiesDetails({ properties }) {
    return (_jsx("div", { className: 'border-l-2 border-l-blue-200 flex flex-col divide-y divide-gray-100 border-t border-t-gray-200', children: properties.map(prop => _jsx(PropertyDetails, { property: prop, className: "px-4 py-2" }, prop.name)) }));
}
function ExpandablePanel({ button, body, className, isInitiallyOpen }) {
    const [isExpanded, setExpanded] = useState(isInitiallyOpen || false);
    return (_jsxs("div", { className: clsx(isExpanded ? "block" : "inline-block", className), children: [_jsx("button", { className: 'p-0 m-0 bg-transparent', onClick: () => setExpanded(!isExpanded), children: _jsx(AnimatePresence, { children: button(isExpanded) }) }), _jsx(AnimatePresence, { children: isExpanded && _jsx(motion.div, { className: 'overflow-hidden', initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.3, ease: 'easeOut' }, children: body }) })] }));
}
function ExpandIcon({ isOpen }) {
    return (_jsx(AnimatePresence, { propagate: true, mode: "wait", children: _jsx(motion.div, { className: "font-mono font-semibold text-gray-400 text-lg", initial: { rotate: 0 }, animate: { rotate: isOpen ? 45 : 0 }, transition: { duration: 0.2 }, children: "+" }, "closeIcon") }));
}
//# sourceMappingURL=ActivityDoc.js.map