import React, {Component} from 'react';
import {getCurrentScreenSize} from 'utils/AppUtils';

export default class LevelWithStatus extends Component {

  constructor(props, context){
    super(props, context);
    this.handleClick = this.handleClick.bind(this);
    this.renderCurrentLevel = this.renderCurrentLevel.bind(this);
    this.renderCompleted = this.renderCompleted.bind(this);
    this.renderLocked = this.renderLocked.bind(this);
  }

  componentDidMount () {
    let requestObject = {};
    try {
      requestObject.vlqId = this.props.levelObject.vlqId;
      if (this.props.levelObject.level === 1 && !this.props.currentLevelSubmissionDetails.hasOwnProperty('metaData')) {
        this.props.getVLQDetailsAPI(requestObject);
      }
    } catch (e) {

    }
  }

  renderLocked () {
    const {id, levelObject} = this.props;
    let isCurrentLevel = this.props.currentLevel === levelObject.level;
    return (
      <span className='level-btn' id={id+levelObject.level} style={isCurrentLevel ? {borderBottom: '3px solid #FF6F00',fontSize:'20px'} : null}>
        <img className="level-lock hidden-xs" src='/images/lock.png'/>
        <span className="visible-xs">Level {levelObject.level}</span>
        <span className="hidden-xs">{levelObject.level}</span>
        <img className="level-lock visible-xs" src='/images/lock.png' style={{fontSize:'20px',marginLeft:'50px',marginTop:'-3px'}}/>
      </span>
    );
  }

  renderCompleted () {
    const {id, levelObject} = this.props;
    let isCurrentLevel = this.props.currentLevel === levelObject.level;
    return (
      <span className='level-btn' id={id+levelObject.level} onClick={this.handleClick} style={isCurrentLevel ? {borderBottom: '3px solid #FF6F00',marginLeft:'10px',fontSize:'20px',marginBottom:'-15px',marginTop:'-15px'} : null}>
        <span className="hidden-xs">{levelObject.level}</span>
        <span className="level-btn visible-xs" id={id+levelObject.level} onClick={this.handleClick} style={isCurrentLevel ? {borderBottom: '3px solid #FF6F00',fontSize:'20px',marginBottom:'-15px',marginTop:'-15px'} : null}>
          Level {levelObject.level}
          <img src='/images/tickmark.png' style={{width: '15px',height: '15px',marginLeft: '10px',marginBottom: '5px'}}/>
        </span>
      </span>
    );
  }

  renderCurrentLevel () {
    const {id, levelObject} = this.props;
    let isCurrentLevel = this.props.currentLevel === levelObject.level;
    return (
      <span className='level-btn' id={id+levelObject.level} onClick={this.handleClick} style={isCurrentLevel ? {borderBottom: '3px solid #FF6F00',marginLeft:'10px',fontSize:'20px',marginBottom:'-15px',marginTop:'-15px'} : null}>
        <span className="hidden-xs">{levelObject.level}</span>
        <span className="level-btn visible-xs" id={id+levelObject.level} onClick={this.handleClick} style={isCurrentLevel ? {borderBottom: '3px solid #FF6F00',fontSize:'20px',marginBottom:'-15px',marginTop:'-15px'} : null}>
          Level {levelObject.level}
        </span>
      </span>
    );
  }

  handleClick(){
    this.props.goToLevel(this.props.levelObject.level);
    this.props.changeLevelState();
    let requestObject = {};
    requestObject.vlqId = this.props.levelObject.vlqId;
    this.props.getVLQDetailsAPI(requestObject);
  }

  render() {

    // let currentLevel = this.props.state.currentLevelState.level;
    // let bool = false;
    // if(currentLevel == this.props.buttonId){
    //  bool = true
    // }
    const {id, levelObject} = this.props;
    let isCurrentLevel = this.props.currentLevel === levelObject.level;
    let renderLevel = null;
    if (levelObject.vlqStatus === 'NOT_COMPLETED') {
      renderLevel = this.renderLocked();
    } else if (isCurrentLevel) {
      // console.log('i am herr');
      renderLevel = this.renderCurrentLevel();
    } else if (levelObject.vlqStatus === 'COMPLETED') {
      renderLevel = this.renderCompleted();
    }
    return (
      <div className="active">
        {
        /*<span className='level-btn' id={"storedXssContinueButton" + this.props.buttonId}  onClick={this.handleClick} style={bool ? {borderBottom: '3px solid #FF6F00'} : null}>
          {this.props.buttonId}
        </span>*/
        }
        {
          renderLevel
        }
        <i className="fa fa-long-arrow-right hidden-xs"></i>
      </div>

   );
  }
}
