import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { format, parseISO } from "date-fns";
import { useState } from "react";
import { twMerge } from "tailwind-merge";
import { ConnectTooltip } from "../../tooltip/tooltip.js";
const getBarHeight = (size = 0) => {
    switch (true) {
        case size <= 0:
            return "h-[1px]";
        case size === 1:
            return "h-[3px]";
        case size === 2:
            return "h-[6px]";
        case size === 3:
            return "h-[9px]";
        case size >= 4:
            return "h-[12px]";
        default:
            return "h-[1px]";
    }
};
const formatTimestamp = (isoString) => {
    if (!isoString)
        return "";
    try {
        const date = parseISO(isoString);
        return format(date, "HH:mm, dd, MMMM");
    }
    catch {
        return isoString;
    }
};
export const TimelineBar = ({ onClick, className, timestampUtcMs: timestamp, additions, deletions, addSize = 0, delSize = 0, isSelected = false, }) => {
    const [open, setOpen] = useState(false);
    const noChanges = addSize === 0 && delSize === 0;
    const addBarHeight = getBarHeight(addSize);
    const delBarHeight = getBarHeight(delSize);
    const tooltipContent = (_jsxs("div", { className: "flex flex-col text-xs", children: [_jsx("div", { children: formatTimestamp(timestamp) }), _jsx("div", { className: "text-green-900", children: `${additions} additions +` }), _jsx("div", { className: "text-red-700", children: `${deletions} deletions -` })] }));
    const handleMouseEnter = () => {
        if (!noChanges) {
            setOpen(true);
        }
    };
    const handleMouseLeave = () => {
        setOpen(false);
    };
    return (_jsxs("div", { className: "relative", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [isSelected && (_jsx(Icon, { name: "TimelineCaret", color: "#4EA9FF", size: 10, className: "absolute left-[-2px] top-[-11px] z-40" })), noChanges ? (_jsx("div", { className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300", className), "data-timestamp": timestamp, onClick: onClick, children: _jsx("div", { className: "size-[3px] rounded-full bg-gray-500" }) })) : (_jsx(ConnectTooltip, { className: "rounded-md bg-gray-900 text-white", content: tooltipContent, open: open, onOpenChange: setOpen, delayDuration: 0, side: "bottom", sideOffset: 5, children: _jsxs("div", { className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:bg-blue-300", className, isSelected && "bg-blue-300"), "data-timestamp": timestamp, onClick: onClick, children: [_jsx("div", { className: "flex h-3 w-0.5 items-end", children: _jsx("div", { className: twMerge("h-3 w-0.5 rounded-t-full bg-green-600", addBarHeight) }) }), _jsx("div", { className: "flex h-3 w-0.5 items-start", children: _jsx("div", { className: twMerge("h-3 w-0.5 rounded-b-full bg-red-600", delBarHeight) }) })] }) }))] }));
};
//# sourceMappingURL=timeline-bar.js.map