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';


/*const Profilation = props =>
<div className='ProfilationApp'>
	{ stepComponents }
</div>



export default Profilation*/



/*const defaultState = {
  steps: [
    {
      isComplete: false,
      job: '',
      service: ''
    }, {
      isComplete: false,
      expend: 'consumo',
      period: 'anno',
      light: '',
      gas: ''
    }, {
      isComplete: false,
      environment: ''
    }, {
      isComplete: false,
      flexibility: ''
    }, {
      isComplete: false,
      customizable: ''
    }
  ]
}*/


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

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

  componentWillReceiveProps(nextProps) {
    if (nextProps.steps !== this.state.steps) {
      this.setState({steps: nextProps.steps, activeStep: nextProps.activeStep}, () => {
        setTimeout(() => {
          this.scrollTo('step' + nextProps.activeStep);
          
        }, 200);
      });
    }
  }
  componentDidMount() {
    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;

    console.log('activeStep', 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) {
      if (index+1 === steps.length) {
        //COMPLETED, SEND
      } else {
        if(index!==1){

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

  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;
      console.log(top, paddingTop, top - parseInt(paddingTop, 10),this.state)
      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() {
    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'>

        {stepComponents}

          {isComplete && <div className='ProfilationStep'>
            <NavLink to={`/loader`} activeClassName="active" className='btn_go'>
              <button className="btn btn__red">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) {
      //document.scrollingElement.scrollTop = this.props.scrollTop
      if (document.documentElement) {
        document.documentElement.scrollTop = this.props.scrollTop
        } else {
        document.body.scrollTop = this.props.scrollTop
        }
    }
  }

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

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

});

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

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