import React, {Component} from 'react';
import {LevelWithStatus} from 'components';

import {getCurrentScreenSize} from 'utils/AppUtils';

export default class LevelBarWithStatus extends Component {

	render() {
    // console.log('LevelBar props ', this.props);
    let renderLevels = [];
    renderLevels = this.props.levels.map(function (level, index) {
      return (
        <LevelWithStatus id='basicSqliContinueButton'
          key={index}
          levelObject={level}
          currentLevel = {this.props.currentLevel}
          currentLevelDetails={this.props.currentLevelDetails}
          currentLevelSubmissionDetails={this.props.currentLevelSubmissionDetails}
          changeLevelState={this.props.changeLevelState}
          getVLQDetailsAPI={this.props.getVLQDetailsAPI}
          goToLevel={this.props.goToLevel}/>
      );
    },this);
		return (
      <div>
				<div className='lavel-bar-container hidden-xs'>
      		<div className='level-bar'>
       			<div className="lev-row">
              <div className="container">
            		<div className="active level-heading">Level </div>
                	{getCurrentScreenSize() !== 'xs' ? renderLevels : ''}
                </div>
              </div>
     			</div><br/>
     		</div>
        <div className="bs-example visible-xs ">
          <nav role="navigation" className="navbar navbar-default">
            <div className="navbar-header" style={{height:'30px'}}>
                <button type="button" data-target="#navbarCollapse" data-toggle="collapse" className="navbar-toggle">
                    <span className="sr-only">Toggle navigation</span>
                    <span className="icon-bar"></span>
                    <span className="icon-bar"></span>
                    <span className="icon-bar"></span>
                </button>
                <a href="#" className="navbar-brand">LEVEL</a>
            </div>
            <div id="navbarCollapse" className="collapse navbar-collapse">
                <ul className="nav navbar-nav">
                <li>
                 <a href="#" >{getCurrentScreenSize() === 'xs' ? renderLevels : ''}</a>
                </li>
                </ul>
                <ul className="nav navbar-nav navbar-right">
                </ul>
            </div>
          </nav>
        </div>
      </div>
		);
	}
}
