/**
 * Component used for Table Actions
 * 
 * @author Ashique
 * 
 * Ensure to follow a minimal standard
 */

import React, { useState, useEffect, useContext } from "react";

import PropTypes from "prop-types";

import './progress-bar.scss';

import { GlobalContext } from "../../Store";

/**
 * ProgressBar Component
 * @param {boolean} isLoading - Indicates if loading is in progress
 * @returns JSX.Element
 */
export default function ProgressBar({ isLoading }) {
    // State to manage progress
    const [progress, setProgress] = useState(0);

    useEffect(() => {
        let interval;

        if (isLoading) {

            setProgress(10); // Start progress

            interval = setInterval(() => {
                setProgress((prev) => (prev < 90 ? prev + 10 : prev)); // Increase gradually
            }, 500);
        } else {
            setProgress(100); // Complete progress

            setTimeout(() => setProgress(0), 500); // Hide after completion
        }

        return () => clearInterval(interval);
    }, [isLoading]);

    const { state } = useContext(GlobalContext);

    return (
        <div className="progress-bar-container">
            <div className="progress-bar" style={{ width: `${progress}%`, background: state.theme.colors.progressBar }}>
            </div>
        </div>
    );
}

ProgressBar.propTypes = {
    isLoading: PropTypes.bool.isRequired,
};

