"use strict";
var __webpack_require__ = {};
(()=>{
    __webpack_require__.n = (module)=>{
        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
        __webpack_require__.d(getter, {
            a: getter
        });
        return getter;
    };
})();
(()=>{
    __webpack_require__.d = (exports1, definition)=>{
        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
            enumerable: true,
            get: definition[key]
        });
    };
})();
(()=>{
    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
    __webpack_require__.r = (exports1)=>{
        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
            value: 'Module'
        });
        Object.defineProperty(exports1, '__esModule', {
            value: true
        });
    };
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
    TimelinePlayer: ()=>TimelinePlayer
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const apollo_core_namespaceObject = require("@uipath/apollo-core");
const index_cjs_namespaceObject = require("../../../icons/index.cjs");
const external_layouts_index_cjs_namespaceObject = require("../../../layouts/index.cjs");
const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
const external_luxon_namespaceObject = require("luxon");
const external_react_namespaceObject = require("react");
var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
const external_TimelinePlayer_utils_cjs_namespaceObject = require("./TimelinePlayer.utils.cjs");
const PERCENTAGE_MULTIPLIER = 100;
const SECONDS_PER_MINUTE = 60;
const MILLISECONDS_PER_SECOND = 1000;
const TIME_PADDING_DIGITS = 2;
const TIME_PADDING_CHAR = '0';
const SPAN_Z_INDEX_INACTIVE = 2;
const TIMELINE_BAR_HEIGHT = 30;
const TIMELINE_TRACK_BAR_HEIGHT = 4;
const TIMELINE_SPAN_HEIGHT = 5;
const SCRUBBER_SIZE = 10;
const SPEED_LEVEL_1 = 1;
const SPEED_LEVEL_2 = 2;
const SPEED_LEVEL_3 = 3;
const SPEED_LEVEL_4 = 5;
const TimelineBar = /*#__PURE__*/ external_react_default().forwardRef((props, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
        ref: ref,
        ...props,
        style: {
            position: 'relative',
            height: `${TIMELINE_BAR_HEIGHT}px`,
            flex: 1,
            cursor: 'pointer',
            ...props.style
        }
    }));
const SpanBlock = ({ left, width, isActive = false, isPlayed = false, depth = 0, title, status, progressPosition = 0 })=>{
    const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
    const getStatusColor = ()=>{
        if (1 === status) return 'var(--canvas-success-icon)';
        if (2 === status) return 'var(--canvas-error-icon)';
        if (3 === status) return 'var(--canvas-info-icon)';
        return 'var(--canvas-border-de-emp)';
    };
    const getBackgroundStyle = ()=>{
        if (isPlayed) return {
            backgroundColor: getStatusColor()
        };
        return {
            backgroundColor: 'var(--canvas-border-de-emp)'
        };
    };
    const getBaseBackgroundStyle = ()=>{
        const hasPartialElements = isActive && null !== getPartialElements();
        if (hasPartialElements) return {
            backgroundColor: 'transparent'
        };
        return getBackgroundStyle();
    };
    const getPartialElements = ()=>{
        if (!isActive || !status) return null;
        const spanStart = left;
        const spanEnd = left + width;
        if (progressPosition <= spanStart) return null;
        {
            if (progressPosition >= spanEnd) return null;
            const progressWithinSpan = (progressPosition - spanStart) / width * 100;
            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                children: [
                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                        style: {
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            width: `${progressWithinSpan}%`,
                            height: '100%',
                            backgroundColor: 'var(--canvas-info-icon)',
                            borderRadius: 'var(--Small, 2px)',
                            borderTopRightRadius: 100 === progressWithinSpan ? 'var(--Small, 2px)' : 0,
                            borderBottomRightRadius: 100 === progressWithinSpan ? 'var(--Small, 2px)' : 0
                        }
                    }),
                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                        style: {
                            position: 'absolute',
                            top: 0,
                            left: `${progressWithinSpan}%`,
                            width: `${100 - progressWithinSpan}%`,
                            height: '100%',
                            backgroundColor: 'var(--canvas-border-de-emp)',
                            borderRadius: 'var(--Small, 2px)',
                            borderTopLeftRadius: 0 === progressWithinSpan ? 'var(--Small, 2px)' : 0,
                            borderBottomLeftRadius: 0 === progressWithinSpan ? 'var(--Small, 2px)' : 0
                        }
                    })
                ]
            });
        }
    };
    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
        title: title,
        onMouseEnter: ()=>setIsHovered(true),
        onMouseLeave: ()=>setIsHovered(false),
        style: {
            position: 'absolute',
            top: `${(TIMELINE_BAR_HEIGHT - TIMELINE_SPAN_HEIGHT) / 2}px`,
            ...getBaseBackgroundStyle(),
            borderRadius: 'var(--Small, 2px)',
            left: `${left}%`,
            width: `${width}%`,
            height: `${TIMELINE_SPAN_HEIGHT}px`,
            boxShadow: 'inset 0 0 0 0px rgba(0, 0, 0, 0.1)',
            zIndex: SPAN_Z_INDEX_INACTIVE + depth + (isActive ? 1 : 0) + (isHovered ? 2 : 0),
            transition: 'all 0.2s ease-in-out',
            transform: isActive || isHovered ? 'scaleY(1.1)' : 'scaleY(1)',
            cursor: 'pointer',
            overflow: 'hidden'
        },
        children: getPartialElements()
    });
};
const TrackBar = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
        style: {
            position: 'absolute',
            top: `${TIMELINE_BAR_HEIGHT / 2 - TIMELINE_TRACK_BAR_HEIGHT / 2}px`,
            backgroundColor: 'var(--canvas-background)',
            height: `${TIMELINE_TRACK_BAR_HEIGHT}px`,
            borderRadius: '2px',
            width: '100%',
            zIndex: 0
        }
    });
const Scrubber = ({ left })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
        style: {
            position: 'absolute',
            top: `${TIMELINE_BAR_HEIGHT / 2 - SCRUBBER_SIZE / 2}px`,
            left: `calc(${left}% - ${SCRUBBER_SIZE / 2}px)`,
            display: 'flex',
            zIndex: 100,
            cursor: 'ew-resize'
        },
        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.TimelineProgressIcon, {
            w: 10,
            h: 10,
            color: "color-mix(in srgb, var(--canvas-info-icon) 85%, black)"
        })
    });
function formatTime(ms) {
    const totalSeconds = Math.floor(ms / MILLISECONDS_PER_SECOND);
    const minutes = Math.floor(totalSeconds / SECONDS_PER_MINUTE);
    const seconds = totalSeconds % SECONDS_PER_MINUTE;
    return `${minutes}:${seconds.toString().padStart(TIME_PADDING_DIGITS, TIME_PADDING_CHAR)}`;
}
const TimelinePlayer = ({ spans, enableTimelinePlayer = true })=>{
    const [playing, setPlaying] = (0, external_react_namespaceObject.useState)(false);
    const [progress, setProgress] = (0, external_react_namespaceObject.useState)(0);
    const [isDragging, setIsDragging] = (0, external_react_namespaceObject.useState)(false);
    const [speedLevel, setSpeedLevel] = (0, external_react_namespaceObject.useState)(SPEED_LEVEL_1);
    const requestRef = (0, external_react_namespaceObject.useRef)(void 0);
    const timelineRef = (0, external_react_namespaceObject.useRef)(null);
    const mountedRef = (0, external_react_namespaceObject.useRef)(true);
    const parentSpan = (0, external_react_namespaceObject.useMemo)(()=>(0, external_TimelinePlayer_utils_cjs_namespaceObject.findAgentRunSpan)(spans), [
        spans
    ]);
    const agentSpans = (0, external_react_namespaceObject.useMemo)(()=>(0, external_TimelinePlayer_utils_cjs_namespaceObject.findAllAgentRunSpans)(spans), [
        spans
    ]);
    const filteredSpans = (0, external_react_namespaceObject.useMemo)(()=>(0, external_TimelinePlayer_utils_cjs_namespaceObject.filterChildSpans)(spans, agentSpans), [
        agentSpans,
        spans
    ]);
    const normalizedSpans = (0, external_react_namespaceObject.useMemo)(()=>(0, external_TimelinePlayer_utils_cjs_namespaceObject.normalizeSpans)(filteredSpans), [
        filteredSpans
    ]);
    (0, external_react_namespaceObject.useEffect)(()=>()=>{
            mountedRef.current = false;
        }, []);
    const durationMs = (0, external_react_namespaceObject.useMemo)(()=>(0, external_TimelinePlayer_utils_cjs_namespaceObject.calculateDurationMs)(parentSpan), [
        parentSpan
    ]);
    (0, external_react_namespaceObject.useEffect)(()=>{
        if (durationMs > 0) {
            const durationMinutes = durationMs / 60000;
            if (durationMinutes > 5) setSpeedLevel(SPEED_LEVEL_4);
            else if (durationMinutes > 3) setSpeedLevel(SPEED_LEVEL_3);
            else durationMinutes > 1 ? setSpeedLevel(SPEED_LEVEL_2) : setSpeedLevel(SPEED_LEVEL_1);
        }
    }, [
        durationMs
    ]);
    const currentTimeMs = (0, external_react_namespaceObject.useMemo)(()=>progress * durationMs, [
        progress,
        durationMs
    ]);
    const currentTimeFormatted = (0, external_react_namespaceObject.useMemo)(()=>formatTime(currentTimeMs), [
        currentTimeMs
    ]);
    const totalTimeFormatted = (0, external_react_namespaceObject.useMemo)(()=>formatTime(durationMs), [
        durationMs
    ]);
    const spanTimes = (0, external_react_namespaceObject.useMemo)(()=>filteredSpans.map((span)=>({
                id: span.Id,
                start: external_luxon_namespaceObject.DateTime.fromISO(span.StartTime).toMillis(),
                end: external_luxon_namespaceObject.DateTime.fromISO(span.EndTime).toMillis()
            })), [
        filteredSpans
    ]);
    const timelineInfo = (0, external_react_namespaceObject.useMemo)(()=>{
        const validTimes = spanTimes.filter((t)=>t.start > 0 && t.end > 0);
        if (0 === validTimes.length) return {
            minStart: 0,
            maxEnd: 0,
            duration: 0
        };
        const minStart = Math.min(...validTimes.map((t)=>t.start));
        const maxEnd = Math.max(...validTimes.map((t)=>t.end));
        const duration = maxEnd - minStart;
        return {
            minStart,
            maxEnd,
            duration
        };
    }, [
        spanTimes
    ]);
    const activeSpanIds = (0, external_react_namespaceObject.useMemo)(()=>{
        if (0 === timelineInfo.duration) return [];
        const currentAbsoluteTime = timelineInfo.minStart + progress * timelineInfo.duration;
        return spanTimes.filter((span)=>currentAbsoluteTime >= span.start && currentAbsoluteTime <= span.end).map((span)=>span.id);
    }, [
        progress,
        spanTimes,
        timelineInfo
    ]);
    const playedSpanIds = (0, external_react_namespaceObject.useMemo)(()=>{
        if (0 === timelineInfo.duration) return [];
        const currentAbsoluteTime = timelineInfo.minStart + progress * timelineInfo.duration;
        return spanTimes.filter((span)=>currentAbsoluteTime > span.start).map((span)=>span.id);
    }, [
        progress,
        spanTimes,
        timelineInfo
    ]);
    const mostActiveSpan = (0, external_react_namespaceObject.useMemo)(()=>{
        if (0 === activeSpanIds.length) return null;
        const activeSpans = normalizedSpans.filter((span)=>activeSpanIds.includes(span.Id));
        return activeSpans.reduce((deepest, current)=>current.depth > deepest.depth ? current : deepest);
    }, [
        activeSpanIds,
        normalizedSpans
    ]);
    const previousMostActiveSpanId = (0, external_react_namespaceObject.useRef)(null);
    (0, external_react_namespaceObject.useEffect)(()=>{
        if (!enableTimelinePlayer) return;
        const currentSpanId = mostActiveSpan?.Id || null;
        if (currentSpanId !== previousMostActiveSpanId.current) {
            const event = new CustomEvent('activeSpanChange', {
                detail: currentSpanId
            });
            window.dispatchEvent(event);
            previousMostActiveSpanId.current = currentSpanId;
        }
    }, [
        mostActiveSpan?.Id,
        enableTimelinePlayer
    ]);
    const handleTimelineClick = (0, external_react_namespaceObject.useCallback)((event)=>{
        if (!timelineRef.current) return;
        const rect = timelineRef.current.getBoundingClientRect();
        const clickX = event.clientX - rect.left;
        const newProgress = Math.max(0, Math.min(1, clickX / rect.width));
        setProgress(newProgress);
    }, []);
    const handleMouseDown = (0, external_react_namespaceObject.useCallback)((event)=>{
        setIsDragging(true);
        setPlaying(false);
        handleTimelineClick(event);
    }, [
        handleTimelineClick
    ]);
    const handleMouseMove = (0, external_react_namespaceObject.useCallback)((event)=>{
        if (!isDragging || !timelineRef.current) return;
        const rect = timelineRef.current.getBoundingClientRect();
        const clickX = event.clientX - rect.left;
        const newProgress = Math.max(0, Math.min(1, clickX / rect.width));
        setProgress(newProgress);
    }, [
        isDragging
    ]);
    const handleMouseUp = (0, external_react_namespaceObject.useCallback)(()=>{
        setIsDragging(false);
    }, []);
    (0, external_react_namespaceObject.useEffect)(()=>{
        if (isDragging) {
            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mouseup', handleMouseUp);
            return ()=>{
                document.removeEventListener('mousemove', handleMouseMove);
                document.removeEventListener('mouseup', handleMouseUp);
            };
        }
    }, [
        isDragging,
        handleMouseMove,
        handleMouseUp
    ]);
    const lastFrameTimeRef = (0, external_react_namespaceObject.useRef)(void 0);
    (0, external_react_namespaceObject.useEffect)(()=>{
        if (!playing || isDragging) return;
        const step = (timestamp)=>{
            if (!lastFrameTimeRef.current) lastFrameTimeRef.current = timestamp;
            const deltaTime = timestamp - lastFrameTimeRef.current;
            lastFrameTimeRef.current = timestamp;
            const progressIncrement = deltaTime * speedLevel * 2 / durationMs;
            if (mountedRef.current) {
                setProgress((currentProgress)=>{
                    const newProgress = Math.min(currentProgress + progressIncrement, 1);
                    if (newProgress >= 1) {
                        setPlaying(false);
                        lastFrameTimeRef.current = void 0;
                        return 1;
                    }
                    return newProgress;
                });
                if (playing) requestRef.current = requestAnimationFrame(step);
            }
        };
        requestRef.current = requestAnimationFrame(step);
        return ()=>{
            if (requestRef.current) cancelAnimationFrame(requestRef.current);
        };
    }, [
        playing,
        durationMs,
        isDragging,
        speedLevel
    ]);
    (0, external_react_namespaceObject.useEffect)(()=>{
        lastFrameTimeRef.current = void 0;
    }, [
        playing,
        speedLevel
    ]);
    (0, external_react_namespaceObject.useEffect)(()=>{
        setProgress(0);
        setPlaying(false);
        setIsDragging(false);
        lastFrameTimeRef.current = void 0;
        if (requestRef.current) {
            cancelAnimationFrame(requestRef.current);
            requestRef.current = void 0;
        }
    }, [
        parentSpan?.Id
    ]);
    const handlePlayPause = (0, external_react_namespaceObject.useCallback)(()=>{
        if (progress >= 1) {
            setProgress(0);
            setPlaying(true);
        } else setPlaying(!playing);
    }, [
        progress,
        playing
    ]);
    const handleSpeedChange = (0, external_react_namespaceObject.useCallback)(()=>{
        setSpeedLevel((prevLevel)=>{
            if (prevLevel === SPEED_LEVEL_1) return SPEED_LEVEL_2;
            if (prevLevel === SPEED_LEVEL_2) return SPEED_LEVEL_3;
            if (prevLevel === SPEED_LEVEL_3) return SPEED_LEVEL_4;
            return SPEED_LEVEL_1;
        });
    }, []);
    if (!(0, external_TimelinePlayer_utils_cjs_namespaceObject.shouldRenderTimelinePlayer)(enableTimelinePlayer, durationMs, normalizedSpans)) return null;
    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Column, {
        py: apollo_core_namespaceObject.Spacing.SpacingXs,
        px: apollo_core_namespaceObject.Spacing.SpacingS,
        gap: apollo_core_namespaceObject.Spacing.SpacingXs,
        minW: 640,
        style: {
            backgroundColor: 'var(--canvas-background-secondary)',
            color: 'var(--canvas-foreground)',
            borderRadius: '8px',
            border: '1px solid var(--canvas-border-de-emp)'
        },
        children: [
            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Row, {
                align: "center",
                gap: apollo_core_namespaceObject.Spacing.SpacingXs,
                children: [
                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
                        variant: "ghost",
                        size: "icon",
                        className: "h-10 w-10",
                        onClick: handlePlayPause,
                        children: playing ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.TimelinePauseIcon, {
                            w: 24,
                            h: 24,
                            color: "var(--canvas-icon-default)"
                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.TimelinePlayIcon, {
                            w: 24,
                            h: 24,
                            color: "var(--canvas-icon-default)"
                        })
                    }),
                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
                        children: [
                            currentTimeFormatted,
                            " / ",
                            totalTimeFormatted
                        ]
                    }),
                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                        children: mostActiveSpan?.Name
                    }),
                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                        style: {
                            flex: 1
                        }
                    }),
                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
                        variant: "ghost",
                        size: "icon",
                        className: "h-10 w-10",
                        onClick: handleSpeedChange,
                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
                            className: "text-xs font-bold",
                            children: [
                                speedLevel,
                                "x"
                            ]
                        })
                    })
                ]
            }),
            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_layouts_index_cjs_namespaceObject.Row, {
                align: "center",
                style: {
                    marginLeft: '15px'
                },
                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(TimelineBar, {
                    ref: timelineRef,
                    onClick: handleTimelineClick,
                    onMouseDown: handleMouseDown,
                    children: [
                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TrackBar, {}),
                        normalizedSpans.map((span)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SpanBlock, {
                                left: span.normalizedStart * PERCENTAGE_MULTIPLIER,
                                width: span.normalizedDuration * PERCENTAGE_MULTIPLIER,
                                isActive: activeSpanIds.includes(span.Id),
                                isPlayed: playedSpanIds.includes(span.Id),
                                depth: span.depth,
                                status: span.Status,
                                progressPosition: progress * PERCENTAGE_MULTIPLIER,
                                title: `${span.Name} (${formatTime(external_luxon_namespaceObject.DateTime.fromISO(span.EndTime).toMillis() - external_luxon_namespaceObject.DateTime.fromISO(span.StartTime).toMillis())})`
                            }, span.Id)),
                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Scrubber, {
                            left: progress * PERCENTAGE_MULTIPLIER
                        })
                    ]
                })
            })
        ]
    });
};
exports.TimelinePlayer = __webpack_exports__.TimelinePlayer;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "TimelinePlayer"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
