Repower / Repower_CHosoWebApi

import React, { Component } from 'react';
import DocumentBox from '../components/DocumentBox'

import LightBillIcon from '../../../img/electricy_icon.svg'
import GasBillIcon from '../../../img/icon_document_gas.svg'



import greenCheck from '../../../img/greenCheck.svg'
import greenCheckOutline from '../../../img/outlineGreenCheck.svg'
import alertError from '../../../img/alert_error_full.svg'
import alertWarning from '../../../img/alert_warning.svg'
import stepTwoIcon from '../../../img/steptwo.svg'

import RightBox from '../components/RightBox'
import Sticky from 'react-sticky-el';

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

import { Motion, spring } from 'react-motion';

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
/*const yearlyMaxLightC = 150000;
const yearlyMinLightC = 3000;
const yearlyMaxLightS = 36000;
const yearlyMinLightS = 800;
const yearlyMaxGasC = 51000;
const yearlyMinGasC = 500;
const yearlyMaxGasS = 39000;
const yearlyMinGasS = 420;*/

class ActivationStep2 extends Component{

	constructor(props){
		super(props)
		this.state={
			min_lightVal:3000,
			max_lightVal:150000,
			min_gasVal:500,
			max_gasVal:51000,
			lightVal:this.props.activationSteps[1].lightVal,
			gasVal:this.props.activationSteps[1].gasVal,
			valid_lightVal:true,
			valid_gasVal:true,
			isComplete: false,
			showVerify:false,
			loading:false
		}
		this.handleChange = this.handleChange.bind(this);
		this.nextStep = this.nextStep.bind(this);
		this.editStep = this.editStep.bind(this);
		this.checkComplete=this.checkComplete.bind(this)
		this.verify=this.verify.bind(this)

		
	}

	verify(){
		this.setState({
			loading:true,
			showVerify:false
		})

        document.body.classList.add("no-scroll-mobile");

    }

	checkComplete(target,valid){

		var complete=valid;
		console.log(this.state)
		for (var property in this.props.step) {
		    		if (this.props.step.hasOwnProperty(property)) {

		       	 if(property!=='isComplete'&&property!=='isActive'&&property!==target.name){
		       	 	console.log('complete',property,this.props.step[property])
		        		complete=complete&&this.props.step[property]!==''
		        	}
		   	 }

			}

		this.props.updateActivation(this.props.index,'isComplete',complete)
	}

	

	editStep(){
		this.setState({
			...this.state,
			
		})

		this.props.updateStoreValue('activationActiveStep',1)

		for (var i = this.props.activationSteps.length - 1; i >= 0; i--) {
			
			this.props.updateActivation(i,'isActive',i===this.props.index)

		}

	}

	nextStep(){
		this.setState({
			...this.state,
			
		})
		this.props.updateActivation(this.props.index,'isActive',false)
		this.props.updateActivation(this.props.index+1,'isActive',true)
		this.props.updateStoreValue('activationActiveStep',2)
	}

	handleChange(e) {
		
		
    		const target = e.currentTarget;
   		
   		const validInput=e.target.validity.valid&&e.target.value!==''
   		var val=target.value.split('.').join("");
   		const inRange=val>=this.state['min_'+target.name]&&
	   			val<=this.state['max_'+target.name]

   		if(validInput){
   			 this.setState({
		      ...this.state,
		      [target.name]: val,
		      ['valid_'+target.name]:inRange
	      
	      
	    		});
	   		this.props.updateActivation(this.props.index,target.name,val)
   		}
   		else{
	   		this.setState({
		      ...this.state,
		      [target.name]: target.value===''? '':this.state[target.name],
		      ['valid_'+target.name]:inRange,
	      
	      
	    		});
	   		this.props.updateActivation(this.props.index,target.name,'')
   		}
   		const isValid=validInput&&val>=this.state['min_'+target.name]&&
   			val<=this.state['max_'+target.name]
   		

		this.setState({
				
				showVerify:inRange
			})
		if(inRange){
			this.props.updateStoreValue('valuesAccepted',false)
		}
   		this.checkComplete(target,isValid)
	   
	}

	render() {
		
		const activationStep=this.props.activationSteps[this.props.index]
		const loading=activationStep.lightBill_loading||
				activationStep.gasBill_loading
				

		if(this.state.loading){
			setTimeout(function(){
				this.setState({
					loading:false
					
				})
				this.props.updateStoreValue('activationTooltip',true)
			}.bind(this),1500)
		}

		var isError=((this.props.steps[0].service!=='gas'&&
						 this.props.activationSteps[1].lightVal==='') || 
						 (this.props.steps[0].service!=='light'&& 
						 this.props.activationSteps[1].gasVal===''))
		/*console.log('errore campi vuoti',(this.props.steps[1].service!=='light'&& 
						 this.props.activationSteps[1].gasVal===''),(this.props.steps[1].service!=='gas'), this.props.activationSteps[1].lightVal==='' )*/
		isError=isError|| (this.props.steps[0].service!=='gas'&&
			(this.props.activationSteps[1].lightVal>this.state.max_lightVal||
			this.props.activationSteps[1].lightVal<this.state.min_lightVal))
		
		isError=isError|| (this.props.steps[0].service!=='light'&&
			(this.props.activationSteps[1].gasVal>this.state.max_gasVal||
			this.props.activationSteps[1].gasVal<this.state.min_gasVal))
	
		console.log('showProsegui?',!isError, this.props.valuesAccepted, this.props.step.isActive)

		var stepClass='attivazione-step attivazione-step-2'
		if(this.props.step.isActive)
		{
			stepClass=stepClass+' open'
		}
		else
		{
			stepClass=stepClass+' closed'
		}
		if(this.props.step.isComplete)
		{
			stepClass=stepClass+' complete'
		}

		const lightDots=numberWithCommas(this.state.lightVal)
        	const gasDots=numberWithCommas(this.state.gasVal)

		return(
			


			<div id='activation-step2' className={stepClass}>
				<div className='attivazione-step-left-col attivazione-steps-inner attivazione-steps-billing'>
				<div className='attivazione-head'>
					<div className="wrapper-attivazione-head">
				    <figure>
                        {(this.props.step.isComplete && !this.props.step.isActive)&& <img className="attivazione-head-step-icon" src={greenCheckOutline} alt='' />}
                        {(!this.props.step.isComplete || this.props.step.isActive)&& <img className="attivazione-head-step-icon" src={stepTwoIcon} alt='' />}
				    </figure>
				  {this.props.steps[0].service==='both' && <h2>Carica bollette elettricità e gas</h2>}
				  {this.props.steps[0].service==='light' && <h2>Carica bollette elettricità</h2>}
				  {this.props.steps[0].service==='gas' && <h2>Carica bollette gas</h2>}
					</div>
				  <h2 className='edit-step' data-step-id='1' onClick={() => this.editStep()}>Modifica</h2>
				 { (this.props.step.isActive && window.innerWidth<768) &&
				 <p className="subHeading">
				        Formati accettati; jpg, png, tiff e pdf
				   </p>
				}
				 { (this.props.step.isActive && this.props.steps[0].service==='both' && window.innerWidth>=1024 ) && 
				<p className="subHeading">
					Carica una bolletta recente della tua attuale fornitura di energia elettrica e gas.
				</p>}

				{ (this.props.step.isActive && this.props.steps[0].service==='light' && window.innerWidth>=1024 ) && 
				<p className="subHeading">
					Carica una bolletta recente della tua attuale fornitura di energia elettrica.
				</p>}

				{ (this.props.step.isActive && this.props.steps[0].service==='gas' && window.innerWidth>=1024 ) && 
				<p className="subHeading">
					Carica una bolletta recente della tua attuale fornitura di gas.
				</p>}


                    {this.props.step.isActive&&<p className="m-t-20 lighter">

							Non hai ancora una fornitura energetica attiva? &nbsp;
						<strong><span onClick={() => this.props.showModal('CONTACT_MODAL')} className='underline open-modal'>Nessun problema, ti aiutiamo noi</span></strong>
					</p>}
			      
				</div>
				<div className='attivazione-step-body '>
				 	{this.props.steps[0].service!=='gas' &&
				 	<div className='attivazione-document-section attivazione-document-section_bTop'>
				 	<h2>
				            Carica bolletta elettricità
				        </h2>
				        <p>
				            Puoi caricare la bolletta nei seguenti formati: jpg, png, tiff, pdf o zip.
				        </p>
				 	</div>}
				 	{this.props.steps[0].service!=='gas' &&
				 	<ul className='attivazione-doc-list attivazione-doc-list__halfWImg'>
            				<DocumentBox 
            					name="Bolletta Elettricità"
            					icon={LightBillIcon}
            					side=''
            					defaultFileName="Sono necessarie tutte le pagine della tua ultima bolletta"
            					index={this.props.index}
            					propName='lightBill'
            					step={this.props.step}
            					maxPhotos={4}

            				/>
            				
            				
  
            			</ul>}

            			{this.props.steps[0].service!=='light' &&<div className='attivazione-document-section'>
				 	<h2>
				            Carica bolletta gas
				        </h2>
				        <p>
				            Puoi caricare la bolletta nei seguenti formati: jpg, png, tiff, pdf o zip. 
				        </p>
				 	</div>}
				 	{this.props.steps[0].service!=='light' &&<ul className='attivazione-doc-list attivazione-doc-list--noBorderTop attivazione-doc-list__halfWImg'>
            				<DocumentBox 
            					name="Bolletta Gas"
            					icon={GasBillIcon}
            					side=''
            					defaultFileName="Sono necessarie tutte le pagine della tua ultima bolletta"
            					index={this.props.index}
            					propName='gasBill'
            					step={this.props.step}
            					maxPhotos={4}
            				/>
            				
            			</ul>}
            			<div>
							<div className='attivazione-document-section attivazione-document-section_mb40'>
								{this.props.steps[0].service==='both' && <h2>Conferma consumi annui elettricità e gas</h2>}
								{this.props.steps[0].service==='light' && <h2>Conferma consumi annui elettricità</h2>}
								{this.props.steps[0].service==='gas' && <h2>Conferma consumi annui gas</h2>}
								<p>
									Verifica che i consumi annui inseriti in precedenza corrispondano a quanto scritto in bolletta. trovi l’indicazione dei consumi in prima pagina, generalmente nell’area in alto a sinistra.							</p>
							</div>
						</div>
            		<div className="activation-input-group">

            		{this.props.steps[0].service!=='gas' &&
            		<div className="wrapper-input unit-kwh">
		                <label htmlFor="">consumi annuali elettricità</label>
		                <input type="tel"
		                
		                pattern="^(?!\s*$)[0-9.]*$"
		                onChange={this.handleChange} 
		                className='' 
		                name='lightVal' 
		                value={lightDots} 
		                placeholder="Elettricità" />

		                {this.state.valid_lightVal&&this.props.valuesAccepted && 

		                  <div className="validationIcon">
		                    <img src={greenCheck} alt=""/>
		                  </div>
		                }

		                {this.state.valid_lightVal && !this.props.valuesAccepted &&

		                <div className="validationIcon">
		                  <img src={alertWarning} alt=""/>
		                </div>
		                }

		                {!this.state.valid_lightVal &&

		                <div className="validationIcon">
		                  <img src={alertError} alt=""/>
		                </div>
		                }
		                
		              </div>}

		              {this.props.steps[0].service!=='light' &&
		              <div className="wrapper-input unit-smc">
		                <label htmlFor="">consumi annuali gas</label>
		                <input type="tel"
		                
		                pattern="^(?!\s*$)[0-9.]*$"
		                onChange={this.handleChange} 
		                className='' 
		                name='gasVal' 
		                value={gasDots} 
		                placeholder="Gas" />

		                {this.state.valid_gasVal&&this.props.valuesAccepted && 

		                  <div className="validationIcon">
		                    <img src={greenCheck} alt=""/>
		                  </div>
		                }

		                {this.state.valid_gasVal && !this.props.valuesAccepted &&

		                <div className="validationIcon">
		                  <img src={alertWarning} alt=""/>
		                </div>
		                }

		                {!this.state.valid_gasVal &&

		                <div className="validationIcon">
		                  <img src={alertError} alt=""/>
		                </div>
		                }
		                
		              </div>}
				</div>
				{((this.props.activationSteps[1].lightVal<this.state.min_lightVal && this.props.activationSteps[1].lightVal!=='' && this.props.activationSteps[1].lightVal!=='NotSelected') ||
					(this.props.activationSteps[1].gasVal<this.state.min_gasVal && this.props.activationSteps[1].gasVal!=='' && this.props.activationSteps[1].gasVal!=='NotSelected') && 
					!(this.props.activationSteps[1].lightVal>this.state.max_lightVal||this.props.activationSteps[1].gasVal>this.state.max_gasVal))&&
					<p className='value-error'>
						I consumi della tua attività sembrano molto bassi. 
						Puoi trovare i consumi annui nella tua bolletta, in prima pagina, 
						nel riquadro “dati fornitura” che riporta il riepilogo dei dati del vostro contratto.
					</p>}

				{((this.props.activationSteps[1].lightVal>this.state.max_lightVal && this.props.activationSteps[1].lightVal!=='NotSelected')||
				 (this.props.activationSteps[1].gasVal>this.state.max_gasVal && this.props.activationSteps[1].gasVal!=='NotSelected')) &&
					

					<p className='value-error'>
						<span>La tua attività ha delle esigenze molto specifiche.</span>
						<br/>Per questo vorremmo farti contattare da uno dei nostri personal trainer dell’energia, 
						servirti al meglio e costruire insieme a te una soluzione su misura.
					</p>}
				</div>
				{
					!isError && this.props.valuesAccepted && this.props.step.isActive && 
					<button className={(this.props.step.isComplete && !loading)? "btn__red":"btn__grayLighter no-events"} onClick={() => this.nextStep()} >Prosegui</button>
				}

				{(this.props.activationSteps[1].lightVal>this.state.max_lightVal||this.props.activationSteps[1].gasVal>this.state.max_gasVal)&&
					<button className='btn__red' onClick={() => this.props.showModal('TRAINER_MODAL')} >Ok, contattatemi</button>
				} 

				{(!this.state.loading && 
						!this.props.valuesAccepted &&
						 this.state.showVerify && 
						 !isError
						 )&&
						 
					<button className='btn__gray' onClick={() => this.verify()} >
						Verifica
  					</button>
				}

				{/*!(this.props.activationSteps[1].lightVal>this.state.max_lightVal||this.props.activationSteps[1].gasVal>this.state.max_gasVal)&&
					*/(this.state.loading && 
						!this.props.valuesAccepted &&
						 !this.state.showVerify  )&&
						 /*((this.props.steps[1].service!=='gas'&&
						 this.props.activationSteps[1].lightVal!=='') || 
						 (this.props.steps[1].service!=='light'&& 
						 this.props.activationSteps[1].gasVal!==''))) &&*/
					<button className='btn__gray btn_loading' >
						<div className="verify-loader-container">
                       				<div className="verify-loader loader_spinner"></div>
                       			</div>
  					</button>
				}
				
			</div>
			{window.innerWidth>=1192 &&
			<Sticky className='right-box-sticky' mode='top' boundaryElement='.attivazione-step-2' hideOnBoundaryHit={false} topOffset={-70} bottomOffset={90}>
				<RightBox stepIndex={1} openModal={false} loadingDocs={loading} />
			</Sticky>
			}
			</div>

			)
	}
}

const mapStateToProps = state => {
  return {
    steps: state.ProfilationSelectReducer.steps,
    activeStep: state.ProfilationSelectReducer.activeStep || 0,
    activationSteps: state.ProfilationSelectReducer.activationSteps,
    valuesAccepted: state.ProfilationSelectReducer.valuesAccepted,
  }
};

const mapDispatchToProps = dispatch => ({
	updateStoreValue: (prop,value) => 
    dispatch(SelectActionCreators.changeProp(prop,value)),
  updatePropValue: (steps, activeStep) => dispatch(SelectActionCreators.changeValue(steps, activeStep)),
  updateActivation: (index,prop,value) => dispatch(SelectActionCreators.updateActivation(index,prop,value)),
  showModal: (modalName) => 
    dispatch(SelectActionCreators.showModal(modalName)),
});

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



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