Repower / Repower_CHosoWebApi

import React, {Component} from 'react';
import PropTypes from 'prop-types'

import ProfilationStep from './ProfilationStep'

import * as SelectActionCreators from '../actions/profilationSelect'
import {connect} from 'react-redux';

import {NavLink} from 'react-router-dom';
import { Motion, spring, presets } from 'react-motion';
import  LemaApi  from '../../service/service.js';

import Header from "../../components/header/index";
import ServerDataTransfer from "../ServerDataTransfer";

class Profilation extends Component {
  constructor(props) {
    super(props);


    this.state = {
      steps: props.steps,
      activeStep: props.activeStep,
      scrollTop: 0,
      tabIndex:1,
      Profilation: props.Profilation
    };

    this.handleTab=this.handleTab.bind(this)    
  }

  componentWillReceiveProps(nextProps) {

    if (nextProps.steps !== this.state.steps) {
      this.setState({steps: nextProps.steps, activeStep: nextProps.activeStep}, () => {
        setTimeout(() => {
          this.scrollTo('step' + nextProps.activeStep);
          
        }, 200);
      });
    }
  }

  handleTab(e){
    if(e.keyCode===9){
              e.preventDefault()
              e.stopPropagation()

             
              var newTab=this.props.tabIndex
              var direction=1
              if(e.shiftKey){
                direction=-1
              }

              newTab=newTab+direction
              var maxtab=3
              for (var i = 1; i <= 12; i++) {
                        if(document.querySelector('*[tabindex="'+i+'"]')!==null){
                          maxtab=i;
                        }
                      }
            
              if(document.querySelector('*[tabindex="'+newTab+'"]')!==null){
                   if(document.querySelector('*[tabindex="'+this.props.tabIndex+'"]')!==null){
                    document.querySelector('*[tabindex="'+this.props.tabIndex+'"]').blur()
                  }
                   document.querySelector('*[tabindex="'+newTab+'"]').focus()
                
                 
              }
              else{
                  
                  //se non esiste
                  var nexttab=newTab;
                  if(document.querySelector('*[tabindex="'+newTab+'"]')===null){
                    if(e.shiftKey){
                      for (var x = newTab; x > 1; x--) {
                      if(document.querySelector('*[tabindex="'+x+'"]')!==null){
                          nexttab=x;
                          break;
                        }
                    }
                    }else{
                      for (var j = newTab; j <= maxtab; j++) {
                      if(document.querySelector('*[tabindex="'+j+'"]')!==null){
                          nexttab=j;
                          break;
                        }
                    }
                    }
                    
                    if(nexttab===newTab){
                      if(e.shiftKey){
                        newTab=maxtab

                      }
                      else{
                        newTab=1
                      }
                    }else{
                      newTab=nexttab
                    }
                    
                  }
                  if(document.querySelector('*[tabindex="'+this.props.tabIndex+'"]')!==null){
                    document.querySelector('*[tabindex="'+this.props.tabIndex+'"]').blur()
                  }
                   
                   document.querySelector('*[tabindex="'+newTab+'"]').focus()
                
              }

              this.props.updateStoreValue('tabIndex',newTab)

          }
  }

  componentDidMount() {
    
      document.querySelector('.ProfilationApp').addEventListener('keydown',e=>this.handleTab(e))


    window.onload = () => {
      setTimeout(() => {
        
        window.scrollTo(0, -1);
      }, 0);
    }
    document.body.classList.add("stop-scrolling");
    document.body.classList.remove("profilation-body", "no-close");

    const wheelEvent = 'onwheel' in document ? 'wheel' : document.onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll';
    
    window.addEventListener(wheelEvent, this.handleScroll);
  }

  componentWillUnmount() {
    const wheelEvent = 'onwheel' in document ? 'wheel' : document.onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll';
    
    window.removeEventListener(wheelEvent, this.handleScroll);

  }

  handleScroll = (e) => {
    if(this.timer !== null) {
      clearTimeout(this.timer);        
    }
    if (this.locked === true) {
      return false;
    }
    
    this.timer = setTimeout(() => {
      if (e.deltaY > 0 && this.state.activeStep >= 0 && this.state.activeStep < this.state.steps.length - 1) {
        if (this.state.steps[this.state.activeStep].isComplete)
          this.activeStep(this.state.activeStep + 1);
      } else if (e.deltaY < 0) {
        this.state.activeStep > 0 && this.activeStep(this.state.activeStep - 1);
      }
    }, 50);

    return false;
  };

  activeStep = (activeStep) => {
    if (activeStep === this.state.activeStep) return true;

    this.props.updateStoreValue('progressBar',activeStep)
    this.setState({activeStep: activeStep}, () => {
      this.props.updatePropValue(this.state.steps, activeStep);
      this.scrollTo(`step${activeStep}`);
    });
  }

  updateStep = (index, step) => {
    let state = {...this.state};
    let steps = state.steps;
    if (index === 0 && steps[0].service !== step.service) {
      steps[1].light = "";
      steps[1].gas = "";
      steps[1].completed = false;
    }
    steps[index] = step;
    this.setState({steps: steps}, () => {
      this.props.updatePropValue(steps, this.state.activeStep);
    });

    if (step.isComplete === true) {
      console.log("step completato... dato salvato... dolce e un po' salato");
      
      //save profilation data at the end of a step
      this.saveSteps();
      if (index+1 === steps.length) {
        //COMPLETED, SEND
      } else {
        if(index!==1){

          this.activeStep(index+1);
        }
      }
    }
  }

  saveSteps = () => {
    // SAVE PROFILATION -- begin
    this.props.updateStoreValue('progressBar',5);

    let request = {
      
      Job: this.props.steps[0].job,
      Service: this.props.steps[0].service,
      Expend: this.props.steps[1].expend,
      Period: this.props.steps[1].period,
      Light: this.props.steps[1].light.length == 0 ? 0 : this.props.steps[1].light,
      Gas: this.props.steps[1].gas.length == 0 ? 0 : this.props.steps[1].gas,
      Environment: this.props.steps[2].environment,
      Flexibility: this.props.steps[3].flexibility,
      Customizable: this.props.steps[4].customizable
    };

    const lemaApi = new LemaApi();
    lemaApi.saveProfilationData(request);
    
    return null;
    // SAVE PROFILATION -- end
  }

  scrollTo = (elementId) => {
    this.locked = true;

    const bodyRect = document.body.getBoundingClientRect()
    const paddingTop = window.getComputedStyle(document.getElementById('profilation'), null).getPropertyValue('padding-top');

    var el = document.getElementById(elementId);
    if (el != null) {
      var top = el.getBoundingClientRect().top - bodyRect.top;
      
      this.setState({scrollTop: top - parseInt(paddingTop, 10)});   
      window.scrollTo(0, top - parseInt(paddingTop, 10));
    }

    setTimeout(() => {
      this.locked = false;
    }, 200)
  }

  isComplete = () => {
    let isC = true;
    let steps = this.state.steps || [];
    if (steps.length === 0) return false;

    steps.forEach(s => {
      if (!s.isComplete) isC = false;
    });

    return isC;
  }

  render() {

    //console.clear();
    //console.log(this.props.Profilation);

    const isComplete = this.isComplete();
    const stepComponents = (this.state.steps || []).map((step, index) => ((step.isComplete || this.state.activeStep === index || (index > 0 && this.state.steps[index -1].isComplete)) && <ProfilationStep
      key={index}
      index={index}
      step={step}
      isActive={this.state.activeStep === index}
      updatePropValue={this.updateStep}
      activeStep={this.activeStep}
      completeSteps={this.state.steps}
      />));
      

    return (

      <div className='ProfilationApp' id='profilation'>
      <Header history={this.props.history} pathname={this.props.history.location.pathname}/>
        {stepComponents}

          {isComplete && <div className='ProfilationStep'>
            <NavLink to={`/loader`} activeClassName="active" className='btn_go'>
              <button tabIndex={12} className="btn btn__red" onClick={() => this.saveSteps()}>MOSTRAMI LA SOLUZIONE</button>
            </NavLink>
          </div>}
        <Motion
          style={{
            scrollTop: spring(this.state.scrollTop, presets.noWobble)
          }}
        >
          {currentStyles => {
            return <WindowScrollSink scrollTop={currentStyles.scrollTop} />
              
          }}
        </Motion>
      </div>
    )
  }
}

class WindowScrollSink extends Component {
    componentDidUpdate (prevProps) {
        if (prevProps.scrollTop !== this.props.scrollTop) {
            return window.scrollTo(0, this.props.scrollTop);
        }
    }

  render () {
    return null
  }
}
const mapStateToProps = state => {
  return {
    tabIndex: state.ProfilationSelectReducer.tabIndex,
    profilationStepTwoError: state.ProfilationSelectReducer.profilationStepTwoError,
    steps: state.ProfilationSelectReducer.steps,
    activeStep: state.ProfilationSelectReducer.activeStep || 0
  }
};

const mapDispatchToProps = dispatch => ({
  updatePropValue: (steps, activeStep) => dispatch(SelectActionCreators.changeValue(steps, activeStep)),
  updateStoreValue: (prop,value) => 
    dispatch(SelectActionCreators.changeProp(prop,value)),

});

Profilation.propTypes = {
  steps: PropTypes.array.isRequired,
  activeStep: PropTypes.number.isRequired,
  updatePropValue: PropTypes.func.isRequired
}

export default connect(mapStateToProps, mapDispatchToProps)(Profilation);