import React, {Component} from 'react';
import './ProgressBox.css';
const currentPath= window.location.pathname;


class ProgressBox extends Component {

    render() {
        const index = !this.props.state.question ? this.props.state.currentQuestionIndex : this.props.state.currentQuestionIndex + 1;

        const style = {
            color: this.props.state.config.styles.secondaryFontColor
        };

            
        const  searchParams= new URLSearchParams(window.location.search);
        const paramid =searchParams.get('id')
        

        return (
            <div className="ProgressBox" style={style}>
                <a href="/" id="home"><img className='icon small' src='questionful.png' />
                    /
                </a>
                <div id="test_titre">
                    <a href={currentPath}>
                        {currentPath.replace("/","")}
                    </a>
                </div>

                <h1 className="ProgressBox_title">
                    <span id="Progress_question">Question </span><span id="progress_nums"><strong>{index-1}</strong> sur <strong>{this.props.state.config.questions.length-1}</strong></span>
                </h1>


                {paramid && paramid !== "" && (
                    <h1 className="paramid">
                        {paramid}
                    </h1>
                )}

 
            </div>
        )
    }
}

export default ProgressBox;