import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { ConnectTooltipProvider } from "../tooltip/tooltip.js";
import { HDivider } from "./components/h-divider.js";
import { TimelineBar } from "./components/timeline-bar.js";
const defaultTimeLineItem = {
    id: "default",
    type: "bar",
    addSize: 0,
    delSize: 0,
};
export const DocumentTimeline = (props) => {
    const { timeline = [], onItemClick } = props;
    const [selectedItem, setSelectedItem] = useState(null);
    const scrollContainerRef = useRef(null);
    const handleClick = (item) => {
        if (item.id === selectedItem || item.id === defaultTimeLineItem.id) {
            onItemClick?.(null);
            setSelectedItem(null);
        }
        else {
            onItemClick?.(item);
            setSelectedItem(item.id);
        }
    };
    const mergedTimelineItems = [...timeline, defaultTimeLineItem];
    const [unselectedItems, selectedItems] = useMemo(() => {
        const indexSelected = mergedTimelineItems.findIndex((item) => item.id === selectedItem);
        return indexSelected === -1
            ? [mergedTimelineItems, []]
            : [
                mergedTimelineItems.slice(0, indexSelected),
                mergedTimelineItems.slice(indexSelected),
            ];
    }, [mergedTimelineItems, selectedItem]);
    const renderTimelineItems = useCallback((items) => {
        return items.map((item) => {
            if (item.type === "divider") {
                const { timestampUtcMs, title, subtitle } = item;
                return (_jsx(HDivider, { timestampUtcMs: timestampUtcMs, title: title, subtitle: subtitle, onClick: () => handleClick(item), isSelected: item.id === selectedItem }, item.id));
            }
            return (_jsx(TimelineBar, { timestampUtcMs: item.timestampUtcMs, addSize: item.addSize, delSize: item.delSize, additions: item.additions, deletions: item.deletions, isSelected: item.id === selectedItem, onClick: () => handleClick(item) }, item.id));
        });
    }, [handleClick, selectedItem]);
    const unselectedContent = useMemo(() => renderTimelineItems(unselectedItems), [unselectedItems, renderTimelineItems]);
    const selectedContent = useMemo(() => renderTimelineItems(selectedItems), [selectedItems, renderTimelineItems]);
    // Scroll to the end by default
    useEffect(() => {
        if (scrollContainerRef.current) {
            scrollContainerRef.current.scrollLeft =
                scrollContainerRef.current.scrollWidth;
        }
    }, []);
    return (_jsx(ConnectTooltipProvider, { delayDuration: 0, skipDelayDuration: 0, children: _jsxs("div", { className: "relative h-[36px] w-full", children: [_jsx("div", { className: "absolute left-[0px] z-[20] h-[17px] w-[6px] bg-white", children: _jsx("div", { className: "mt-[11px] h-[6px] w-[6px] rounded-tl-md bg-slate-50" }) }), _jsx("div", { className: "absolute right-[0px] top-[11px] z-[20] h-[6px] w-[6px] bg-white", children: _jsx("div", { className: "h-[6px] w-[6px] rounded-tr-md bg-slate-50" }) }), _jsx("div", { className: "absolute inset-x-0 bottom-0 h-[25px] rounded-md bg-slate-50" }), _jsx("div", { className: "absolute inset-x-0 bottom-0 h-[36px]", children: _jsx("div", { ref: scrollContainerRef, className: "h-full overflow-x-auto rounded-md", children: _jsxs("div", { className: "ml-auto flex h-[36px] w-max items-end px-2 pb-0", children: [_jsx("div", { className: "flex", children: unselectedContent }), _jsx("div", { className: "flex rounded-sm bg-blue-200", children: selectedContent })] }) }) }), _jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 z-10 h-[25px] w-2 rounded-l-md bg-slate-50" }), _jsx("div", { className: "pointer-events-none absolute bottom-0 right-0 z-10 h-[25px] w-2 rounded-r-md bg-slate-50" })] }) }));
};
//# sourceMappingURL=document-timeline.js.map