import React from 'react';
import Modularity from 'modularity-front';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import Dictionary from '../Services/DictionaryService';


import './Stepper.css';
let Module = Modularity.Module;

class StepperModule extends Modularity.Module {
	constructor(props) {
		super(props);
		this.state = {
			activeStep:0
		}
		this.checkUrl();
		this.RoutingSystem.onRouteChange("StepperModule" + this.getId(), () => {
			this.checkUrl();
		})
	}
	checkUrl() {
		let route = this.RoutingSystem.getRoute();
		let steps = this.props.steps;
		let flag = 0;
		steps.map((step, index) => {
			if(route.url.endsWith(step.url)){
				// window.history.replaceState({}, '',step.url);
				flag = 1;
				Promise.resolve(step.resolve && step.resolve())
				.then(() => this.setState({activeStep: index}))
			}
		});
	}


	handleNext() {
		if(this.props.lock) return;
		let steps = this.props.steps;
		let newStep = this.state.activeStep + 1
		let nextStep = steps[newStep];
		Promise.resolve(nextStep.resolve && nextStep.resolve())
		.then(() => {
			this.CoreSystem.go(nextStep.url, {});
		    this.setState(state => ({
		      activeStep: newStep
			}));
		})
		.then(() => Promise.resolve(nextStep.postResolve && nextStep.postResolve()))
		.then(() => this.props.onNext && this.props.onNext(newStep))
	};

	handleBack() {
		if(this.props.lock) return;
		let steps = this.props.steps;
		let newStep = this.state.activeStep - 1;
		let prevStep = steps[newStep];
		Promise.resolve(prevStep.resolve && prevStep.resolve())
		.then(() => {
			this.CoreSystem.go(prevStep.url, {});
		    this.setState(state => ({
		      activeStep: newStep
		    }));
		})
		.then(() => Promise.resolve(prevStep.postResolve && prevStep.postResolve()))
		.then(() => this.props.onBack && this.props.onBack(this.state.activeStep - 1))
	};

	handleReset() {
		if(this.props.lock) return;
	    this.setState({
	      activeStep: 0,
	    });
	};
	
	render() {
		const steps = this.props.steps;
    	const { activeStep } = this.state;
    	let step_text;
    	let step = steps[activeStep];
		return (
			<div className="stepper_container">
		        <Stepper className="row stepper" activeStep={activeStep} alternativeLabel>
		          {steps.map(label => (
		            <Step key={label.title}>
		              <StepLabel>{label.title}</StepLabel>
		            </Step>
		          ))}
		        </Stepper>


		        <div className="step_but">
		          {this.state.activeStep === steps.length ? (
		            <div>
		              <Typography>{Dictionary.get("All steps completed")}</Typography>
		              <Button onClick={() => this.handleReset()} disabled={this.props.lock}>{Dictionary.get("Reset")}</Button>
		            </div>
		          ) : (
		            <div>
		              {step.content}
		              <div>
		                <Button
		                  disabled={activeStep === 0 || this.props.lock}
		                  onClick={() => this.handleBack()}
		                  className="prev_step_but"
		                >
		                  {Dictionary.get("Back")}
		                </Button>
		                {(this.state.activeStep < steps.length - 1) && 
		                <Button disabled={this.props.lock} variant="contained" color="primary" onClick={() => this.handleNext()}>
			                 {step.button}
			            </Button>}
		              </div>
		            </div>
		          )}
			    </div>
			    {super.render()}
			</div>
			);	    
	}
}



StepperModule.EditPosition = "center";
StepperModule.Inputs = {
	Products: {
		type: Module.Types.Object
	},
	Token: {
		type: Module.Types.Text
	}
}



StepperModule.Outputs = {
	selectedProduct:{

	}
}

StepperModule.Category = "Sxoinas Packages";
export default StepperModule;