"use client";
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useRef } from "react";
import { AlertCircle, Clock, Cloud, Copy, GitBranch, Globe, MessageCircle, Settings2, User, Users, } from "lucide-react";
import { ParheliaAgentIcon } from "../ui/Icons";
import { Checkbox } from "../../components/ui/checkbox";
const iconMap = {
    "alert-circle": AlertCircle,
    clock: Clock,
    cloud: Cloud,
    copy: Copy,
    globe: Globe,
    bot: ParheliaAgentIcon,
    "git-branch": GitBranch,
    "message-square": MessageCircle,
    user: User,
    users: Users,
};
function getIconComponent(iconName) {
    return iconMap[iconName] || Settings2;
}
export function IndicatorSettings({ providers, visibleGutters, toggleGutter, isLoading, showBadges, toggleBadges, }) {
    const providerIdsRef = useRef("");
    const sortedProvidersRef = useRef([]);
    const sortedProviders = useMemo(() => {
        const currentIds = providers
            .map((provider) => provider.id)
            .sort()
            .join(",");
        if (providerIdsRef.current === currentIds &&
            sortedProvidersRef.current.length > 0) {
            return sortedProvidersRef.current;
        }
        providerIdsRef.current = currentIds;
        const sorted = [...providers].sort((a, b) => a.priority - b.priority);
        sortedProvidersRef.current = sorted;
        return sorted;
    }, [providers]);
    const toggleHandlersRef = useRef(new Map());
    const toggleGutterRef = useRef(toggleGutter);
    useEffect(() => {
        if (toggleGutterRef.current !== toggleGutter) {
            toggleGutterRef.current = toggleGutter;
            toggleHandlersRef.current.clear();
        }
    }, [toggleGutter]);
    const getToggleHandler = useCallback((providerId) => {
        if (!toggleHandlersRef.current.has(providerId)) {
            toggleHandlersRef.current.set(providerId, () => {
                toggleGutterRef.current(providerId);
            });
        }
        return toggleHandlersRef.current.get(providerId);
    }, []);
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-border my-1 border-t" }), _jsx("div", { className: "text-muted-foreground px-2 py-1.5 text-xs font-medium", children: "Tree Indicators" }), isLoading && sortedProviders.length === 0 ? (_jsx("div", { className: "text-muted-foreground px-2 py-2 text-xs", children: "Loading..." })) : sortedProviders.length === 0 ? (_jsx("div", { className: "text-muted-foreground px-2 py-2 text-xs", children: "No indicators available" })) : (sortedProviders.map((provider) => (_jsx(IndicatorSettingItem, { provider: provider, checked: visibleGutters.includes(provider.id), onToggle: getToggleHandler(provider.id) }, provider.id)))), sortedProviders.length > 0 && (_jsxs("label", { className: "hover:bg-accent flex cursor-pointer items-center gap-2 rounded px-2 py-1.5", onClick: (e) => e.stopPropagation(), children: [_jsx(Checkbox, { checked: showBadges, onCheckedChange: toggleBadges }), _jsx("span", { className: "text-xs", children: "Show count badges" })] }))] }));
}
function IndicatorSettingItem({ provider, checked, onToggle, }) {
    const IconComponent = getIconComponent(provider.icon);
    return (_jsxs("label", { className: "hover:bg-accent flex cursor-pointer items-center gap-2 rounded px-2 py-1.5", onClick: (e) => e.stopPropagation(), children: [_jsx(Checkbox, { checked: checked, onCheckedChange: onToggle }), _jsx(IconComponent, { className: "text-muted-foreground h-4 w-4" }), _jsx("span", { className: "text-xs", children: provider.label })] }));
}
export default IndicatorSettings;
//# sourceMappingURL=IndicatorSettings.js.map