Repower / Repower_CHosoWebApi

import React, { Component } from 'react';
import Select from "react-select";

import { Creatable } from "react-select";

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

var serviceOptions = [
    { value: "light", label: "Elettricità" },
    { value: "gas", label: "Gas" },
    { value: "both", label: "Elettricità e Gas" }
];

var jobOptions = [
    { value: "edilizia", label: "Edilizia" },
    { value: "editoria", label: "Editoria" },
    { value: "educazione", label: "Educazione" }
];

function onInputKeyDown(event) {
    switch (event.keyCode) {
        case 9:   // TAB
            // Extend default TAB behavior by doing something here
            break;
        case 13: // ENTER
            // Override default ENTER behavior by doing stuff here and then preventing default

            break;
    }
}


class ProfilationStep1 extends Component{
    constructor(props){
        super(props)
        this.changeField=this.changeField.bind(this)
    }
    changeField(mobile,name, event, props) {
        
    if(mobile){
        event=event.target
    }
    console.log('select',name,event,props)
    var completed = true;
    if (event !== null && event.value !== "") {
        for (var property in props.step) {
            if (props.step.hasOwnProperty(property)) {
                if (
                    property !== name &&
                    property !== "isComplete" &&
                    property !== "isActive"
                ) {
                    completed = completed && props.step[property] !== "";
                }
            }
        }
    } else {
        completed = false;
    }

    let step = {...props.step};
    step[name] = event.value;
    if(name==='service' && event.value==='light'){
        
        props.updateActivation(1,'gasVal','NotSelected')
        props.updateActivation(1,'gasBill','NoFile')
        props.updateActivation(3,'checkAcciseRidotte',{...this.props.activationSteps[3].checkAcciseRidotte,
                                                        required:false})
    }
    if(name==='service' && event.value==='gas'){
        
        props.updateActivation(1,'lightVal','NotSelected')
        props.updateActivation(1,'lightBill','NoFile')
        props.updateActivation(3,'checkAcciseRidotte',{...this.props.activationSteps[3].checkAcciseRidotte,
                                                        required:true})
    }
    if(name==='service' && event.value==='both'){
        
        props.updateActivation(1,'lightVal','')
        props.updateActivation(1,'gasVal','')
        props.updateActivation(3,'checkAcciseRidotte',{...this.props.activationSteps[3].checkAcciseRidotte,
                                                        required:true})
        
    }
    step.isComplete = completed;
    props.updatePropValue(props.index, step);

    if(name==='job'){
         this.serviceInput.focus();
    }
}

    render(){
        return(

                <div className="ProfilationStep ProfilationStep--one" onClick={e => this.props.activeStep(this.props.index)}>
        <p className="ProfilationStep__bold">
            Costruisci in pochi secondi la tua tariffa flat, 100% online.
        </p>

        <div className="d-flex">
            <span> La mia attivit&agrave; si occupa di 
            <Creatable
                openOnClick={false}
                autosize={true}
                creatable={true}
                name="job"
                placeholder="placeholder"
                value={this.props.step.job}
                onChange={e => this.changeField(false,"job", e, this.props)}
                options={jobOptions}
                onFocus={e => this.props.activeStep(this.props.index)}
                promptTextCreator={(label) => ` ${label} `}
                className = "select-full-height select-z-index"
                onInputKeyDown={onInputKeyDown}
                
                
            />
            

            {window.innerWidth>=768&&<br/>}ed ho bisogno di 
            
            {window.innerWidth>=0 && <Select
                ref={(input) => { this.serviceInput = input; }} 
                searchable={false}
                autosize={true}
                name="service"
                placeholder="placeholder"
                value={this.props.step.service}
                onChange={e => this.changeField(false,"service", e, this.props)}
                options={serviceOptions}
                onFocus={e => this.props.activeStep(this.props.index)}
                className = "select-z-index"
                openOnFocus={true}
            />}</span> 
            {/*window.innerWidth<768 && 
                <select
                    ref={(input) => { this.serviceInput = input; }} 
                    name="service"
                    onChange={e => this.changeField(true,"service", e, this.props)}
                    value={this.props.step.service}
                    onFocus={e => this.props.activeStep(this.props.index)}
                    className='mobileSelect'
                >
                    <option value='' disabled></option>
                    <option value='light'>Elettricità</option>
                    <option value='gas'>Gas</option>
                    <option value='both'>Elettricità e Gas</option>
                </select>
            */}
        </div>
        <p tabindex="0" className="ProfilationStep__underline" onClick={() => this.props.showModal('FURNITURE_MODAL')}>
            Per il tuo business hai più sedi e forniture?
        </p>
    </div>

            )
    }
}

/*const ProfilationStep1 = props => (
	
);*/

/*ProfilationStep1.propTypes = {
    //isComplete: PropTypes.bool.isRequired,
    //isActive: PropTypes.bool.isRequired
    step: PropTypes.object.isRequired,
    index: PropTypes.number.isRequired,
    updatePropValue: PropTypes.func.isRequired
};

export default ProfilationStep1;*/

const mapStateToProps = state => {
  return {
  activationSteps:state.ProfilationSelectReducer.activationSteps,
  //solutions:state.ProfilationSelectReducer.solutions,
  modalOpen:state.ProfilationSelectReducer.saveModalOpen
}};

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

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