import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import Typography from '../Typography';
import './ScriptGenerationLoader.scss';
const ScriptGenerationLoader = ({ actions = [
    {
        text: 'Analyzing your application flow...',
        color: 'var(--brand-color)',
    },
    { text: 'AI agents are on action...', color: 'var(--ff-electric-indigo)' },
    {
        text: 'Thinking like a QA expert… just a few more seconds...',
        color: 'var(--ff-vivid-orange)',
    },
    {
        text: 'Hold on, test cases are on the way!',
        color: 'var(--ff-dodger-blue)',
    },
], width, height, path, DynamicHeight = 500, }) => {
    const [currentIndex, setCurrentIndex] = useState(0);
    const [visibleChars, setVisibleChars] = useState('');
    const numberOfDivs = [1, 2, 3, 4];
    useEffect(() => {
        if (currentIndex >= actions?.length)
            return;
        const message = actions[currentIndex]?.text || ' ';
        let charIndex = 0;
        const typingInterval = setInterval(() => {
            if (charIndex <= message?.length) {
                setVisibleChars(message?.slice(0, charIndex));
                charIndex++;
            }
            else {
                clearInterval(typingInterval);
                setTimeout(() => {
                    setCurrentIndex((prev) => prev < actions?.length - 1 ? prev + 1 : prev);
                }, 1000);
            }
        }, 80);
        return () => clearInterval(typingInterval);
    }, [currentIndex, actions]);
    const currentColor = actions[currentIndex]?.color;
    return (_jsxs("div", { className: "loader-container", style: { width: `${width}%`, height: `${height}%` }, children: [_jsx("div", { className: "ff-moving-sections-container", children: numberOfDivs?.map((order) => (_jsx("div", { className: `ff-moving-section${order}`, style: { height: `${DynamicHeight + 'px'}` } }, order))) }), _jsxs("div", { className: "ff-gif-container", children: [_jsx("div", { className: "ff-typing-wrapper", children: _jsx(Typography, { className: "ff-typing-text", fontSize: 16, fontWeight: "medium", style: { color: currentColor }, children: visibleChars }) }), _jsx("img", { height: 100, width: 100, alt: "generation", src: path })] })] }));
};
export default ScriptGenerationLoader;
//# sourceMappingURL=ScriptGenerationLoader.js.map