import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import './carousel.scss';
import Icon from '../Icon';
import Typography from '../Typography';
const Carousel = ({ items, onCollapseClick, initialRunId, height, }) => {
    if (!items || items.length === 0)
        return null;
    const findInitialIndex = () => {
        if (!initialRunId)
            return 0;
        const idx = items.findIndex((item) => item.runId === initialRunId);
        return idx >= 0 ? idx : 0;
    };
    const [currentIndex, setCurrentIndex] = useState(findInitialIndex());
    const hasMultipleItems = items.length > 1;
    useEffect(() => {
        setCurrentIndex(findInitialIndex());
    }, [initialRunId, items]);
    const handlePrev = () => {
        if (currentIndex > 0)
            setCurrentIndex(currentIndex - 1);
    };
    const handleNext = () => {
        if (currentIndex < items.length - 1)
            setCurrentIndex(currentIndex + 1);
    };
    const carouselStyle = {
        '--ff-carousel-height': typeof height === 'number' ? `${height}px` : height,
    };
    const { scriptName, machineName, icon, currentScripts, totalScripts } = items[currentIndex];
    return (_jsxs("div", { className: "ff-carousel", style: carouselStyle, children: [_jsxs("div", { className: "ff-slide_header", children: [_jsxs("div", { className: "ff-slide-name", children: [_jsx(Icon, { name: icon }), _jsxs(Typography, { children: [machineName, "-", scriptName] })] }), _jsx("div", { className: "ff-collapse_icon", children: _jsx(Icon, { name: "collapse_icon", onClick: onCollapseClick, height: 22, width: 22 }) })] }), _jsx("div", { className: "ff-carousel-track", style: { transform: `translateX(-${currentIndex * 100}%)` }, children: items.map((item, idx) => (_jsx("div", { className: "ff-carousel-slide", children: item.src.endsWith('.mp4') ? (_jsx("video", { src: item.src, autoPlay: true, muted: true, loop: true, controls: true })) : (_jsx("img", { src: item.src, alt: item.alt || `Slide ${idx}` })) }, idx))) }), _jsxs("div", { className: "ff-carousel-bottom-text", children: [_jsx("div", { className: "ff-left-text" }), _jsxs(Typography, { className: "ff-right-text", children: [currentScripts, "/", totalScripts] })] }), hasMultipleItems && (_jsxs("div", { className: "ff-carousel-controls", children: [_jsx("div", { className: "ff-left-control", children: currentIndex > 0 && (_jsx(Icon, { className: "ff-carousel-icons", name: "left_new_icon", onClick: handlePrev, height: 64, width: 64 })) }), _jsx("div", { className: "ff-right-control", children: currentIndex < items.length - 1 && (_jsx(Icon, { className: "ff-carousel-icons", name: "right_new_icon", onClick: handleNext, height: 64, width: 64 })) })] }))] }));
};
export default Carousel;
//# sourceMappingURL=Carousel.js.map