Repower / Repower_CHosoWebApi

import React, { Component } from 'react';

import DocumentBox from './components/DocumentBox'

import greenCheck from '../../img/outlineGreenCheck.svg'
import idIcon from '../../img/id.svg'
import cfIcon from '../../img/codice_fiscale_icon.svg'

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

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

import {NavLink} from 'react-router-dom';

class MobileUpload extends Component{
	
		constructor(props){
		super(props)
		this.state={
			idSamefile:this.props.idSamefile,
			cfSamefile:this.props.cfSamefile,
			isComplete: false,
			scrollTop:0
		}
		this.handleCheckbox = this.handleCheckbox.bind(this);
		
		//this.editStep = this.editStep.bind(this);
	}

	handleCheckbox(check){
		const checkVal=!this.state[check.checkId]
		this.setState({
			...this.state,
			[check.checkId]:checkVal
			
		})
		this.props.updateStoreValue(check.checkId,checkVal)
		console.log('checkval',checkVal)
		var nofile='NoFile'
		if(!checkVal)
			nofile=''

		this.props.updateActivation(0,check.docId,nofile)

		/*var complete=checkVal;
			for (var property in this.props.step) {
		    		if (this.props.step.hasOwnProperty(property)) {

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

			}*/
		

	}
	
	render(){
		const stepOne=this.props.activationSteps[0]
		const stepTwo=this.props.activationSteps[1]
		var complete=stepOne.idCard_front!=='' && stepOne.idCard_back!=='' &&
				stepOne.cfCard_front!=='' && stepOne.cfCard_back!=='' &&
				stepTwo.lightBill!=='' && stepTwo.gasBill!==''
		this.props.updateStoreValue('mobileUploadComplete',complete)
		return(
			<div className='attivazione-step mobile-upload'>
				<div className='attivazione-step-left-col attivazione-steps-inner'>
					
					<div className='attivazione-head'>
					<div className="wrapper-attivazione-head">
				   
				  <h2>Carica la carta d'identità e il codice fiscale dell'intestatario</h2>
					</div>
				 
				 
				  <p>
				        Formati accettati; jpg, png, tiff e pdf
				   </p>
				
				<div className='attivazione-step-body'>
				 	<div className='attivazione-document-section '>
				 	<h2>
				            Carta d'identit&agrave;
				        </h2>
				        <p>
				            <input type="checkbox" name="samefile" id="idCard" className='samefile' onChange={() => this.handleCheckbox({checkId:'idSamefile',docId:'idCard_back'})} value={this.props.idSamefile} checked={!!this.props.idSamefile}/>
				            <label htmlFor="idCard"><span className="isCheckbox"></span>Fronte e retro nello stesso file</label>
				        </p>
				 	</div>
				 	<ul className='attivazione-doc-list'>
            				<DocumentBox 
            					name="Carta d'identità"
            					icon={idIcon}
            					side={this.state.idSamefile? 'Fronte e retro':'Fronte'}
            					defaultFilename=''
            					index={0}
            					propName='idCard_front'
            					step={this.props.activationSteps[0]}
            					maxPhotos={this.state.idSamefile? 2:1}
            				/>
            				{!this.props.idSamefile &&<DocumentBox 
            					name="Carta d'identità"
            					icon={idIcon}
            					side="Retro"
            					defaultFilename=''
            					index={0}
            					propName='idCard_back'
            					step={this.props.activationSteps[0]}
            					maxPhotos={this.state.idSamefile? 2:1}
            				/>}
            			</ul>

            			<div className='attivazione-document-section attivazione-document-section__cf'>
				 	<h2>
				            Codice Fiscale
				        </h2>
				        <p>
				        	<input type="checkbox" 
				        	name="samefile" 
				        	id="cfCard" 
				        	className='samefile' 
				        	onChange={() => this.handleCheckbox({checkId:'cfSamefile',docId:'cfCard_back'})} 
				        	value={this.props.cfSamefile} 
				        	checked={!!this.props.cfSamefile}/>
				           
				            <label htmlFor="cfCard"><span className="isCheckbox"></span>Fronte e retro nello stesso file</label>
				        </p>
				 	</div>
				 	<ul className='attivazione-doc-list'>
            				<DocumentBox 
            					name="Codice Fiscale"
            					icon={cfIcon}
            					side={this.state.cfSamefile? 'Fronte e retro':'Fronte'}
            					defaultFilename=''
            					index={0}
            					propName='cfCard_front'
            					step={this.props.activationSteps[0]}
            					maxPhotos={this.state.cfSamefile? 2:1}
            				/>
            				{!this.props.cfSamefile &&<DocumentBox 
            					name="Codice Fiscale"
            					icon={cfIcon}
            					side="Retro"
            					defaultFilename=''
            					index={0}
            					propName='cfCard_back'
            					step={this.props.activationSteps[0]}
            					maxPhotos={this.state.cfSamefile? 2:1}
            				/>}
            			</ul>


            			{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={1}
            					propName='lightBill'
            					step={this.props.activationSteps[1]}
            					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={1}
            					propName='gasBill'
            					step={this.props.activationSteps[1]}
            					maxPhotos={4}
            				/>
            				
            			</ul>}

            		
            		{!this.props.mobileUploadComplete &&
            		
					<button className={this.props.mobileUploadComplete? "btn__red":"btn__grayLighter no-events"} >Prosegui</button>
				}

            		{this.props.mobileUploadComplete &&
            		<NavLink to={`/mobile-upload-loader`} activeClassName="active">
					<button className={this.props.mobileUploadComplete? "btn__red":"btn__grayLighter no-events"} >Prosegui</button>
				</NavLink>}

				</div>
				 

				</div>

				</div>
			</div>
			)
	}
}

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

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))

});

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


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