import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actionCreators from '../../actions/actionCreators';
import countries from '../../data/countries';
import users from '../../data/users';
import {browserHistory} from 'react-router';

import RegistrationFormStepOne from './registrationFormStepOne';
import RegistrationFormStepTwo from './registrationFormStepTwo';
import RegistrationFormStepThree from './registrationFormStepThree';
import RegistrationFormStepFour from './registrationFormStepFour';
import RegistrationFinished from './registrationFinished';

class RegistrationPage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: {
                "companyName": "",
                "btwNumber": "",
                "address": "",
                "address1": "",
                "address2": "",
                "country": "",
                "zipcode": "",
                "place": "",

                "firstName": "",
                "lastName": "",
                "phone": "",
                "mobilePhone": "",
                "email": "",
                "userName": "",
                "password": "",

                'idCardFile': false,
                'statutenFile': false,
                'blankLetterheadFile': false,
                'companyPhotoFile': false,

                'terms': true,
                "emailNotifications": true,
                "smsNotifications": true
            },
            fileNames: {},
            selectedFile: {},
            icons: {
                idCard: 'upload',
                statuten: 'upload',
                blankLetterhead: 'upload',
                companyPhoto: 'upload'
            },
            step: 1,
            errors: {}
        };

        this.setUser = this.setUser.bind(this);
        this.onButtonClick = this.onButtonClick.bind(this);
        this.onButtonPreviousClick = this.onButtonPreviousClick.bind(this);
        this.changeCheckboxState = this.changeCheckboxState.bind(this);
        this.onFileChange = this.onFileChange.bind(this);
    }

    componentWillMount(){
        console.log(this.props.params.id);
    }


    getCountries(){
        return countries;
    }


    setUser(event) {
        const field = event.target.name;
        const value = event.target.value;

        let user = this.state.user;
        user[field] = value;
        this.setState({user: user});
    }

    validation(step){
        const user = this.state.user;
        const languageReg = this.props.currentLanguage.default.registrationPage;
        let formIsValid = true;
        let errors = {};
        switch (step){
            case "one":
                if(!user.companyName){
                    formIsValid = false;
                    errors.companyName = languageReg.companyNameEmpty;
                }

                if(!user.btwNumber){
                    formIsValid = false;
                    errors.btwNumber = languageReg.btwNumberEmpty;
                }

                if(!user.address){
                    formIsValid = false;
                    errors.address = languageReg.addressEmpty;
                }

                if(!user.country){
                    formIsValid = false;
                    errors.country = languageReg.countryEmpty;
                }

                if(!user.zipcode){
                    formIsValid = false;
                    errors.zipcode = languageReg.zipcodeEmpty;
                }

                if(!user.place){
                    formIsValid = false;
                    errors.place = languageReg.placeEmpty;
                }
                break;
            case "two":
                if(!user.firstName){
                    formIsValid = false;
                    errors.firstName = languageReg.firstNameEmpty;
                }

                if(!user.lastName){
                    formIsValid = false;
                    errors.lastName = languageReg.lastNameEmpty;
                }

                if(!user.phone){
                    formIsValid = false;
                    errors.phone = languageReg.phoneEmpty;
                }

                if(!user.mobilePhone){
                    formIsValid = false;
                    errors.mobilePhone = languageReg.mobilePhoneEmpty;
                }

                if(!user.email){
                    formIsValid = false;
                    errors.email = languageReg.emailEmpty;
                }

                const emailExists = users.filter(function ( obj ) {
                    return obj.email == user.email;
                })[0];

                if(emailExists){
                    formIsValid = false;
                    errors.email = "This emailddress already exists.";
                }

                if(!user.userName){
                    formIsValid = false;
                    errors.userName = languageReg.userNameEmpty;
                }

                if(!user.password){
                    formIsValid = false;
                    errors.password = languageReg.passwordEmpty;
                }

                if(!user.confirmPassword){
                    formIsValid = false;
                    errors.confirmPassword = languageReg.passwordEmpty;
                }

                if(user.password !== user.confirmPassword){
                    formIsValid = false;
                    errors.password = languageReg.passwordsNotSame;
                    errors.confirmPassword = languageReg.passwordsNotSame;
                }
                break;
            default:
                if(!user.terms && typeof user.terms != "undefined"){
                    formIsValid = false;
                    errors.terms = languageReg.termsError;
                }
        }

        this.setState({errors: errors});
        return formIsValid;
    }

    onFileChange(name, event) {
        event.preventDefault();
        let file = event.target.value;

        let filename = file.split('\\').pop(); //We get only the name of the file
        let filenameWithoutExtension = filename.replace(/\.[^/.]+$/, ""); //We get the name of the file without extension

        let user = this.state.user;
        let fileNames = this.state.fileNames;
        let selectedFile = this.state.selectedFile;
        let icons = this.state.icons;

        switch (name.btnName) {
            case "idCard" :
                fileNames[name.btnName] = filenameWithoutExtension;
                //Check if file is selected
                if(file){
                    selectedFile[name.btnName] = "fileSelected";
                    user["idCardFile"] = true;
                    icons["idCard"] = "check";
                }else{
                    selectedFile[name.btnName] = "";
                    user["idCardFile"] = false;
                    icons["idCard"] = "upload";
                }
                break;
            case "statuten" :
                fileNames[name.btnName] = filenameWithoutExtension;

                //Check if file is selected
                if(file){
                    selectedFile[name.btnName] = "fileSelected";
                    user["statutenFile"] = true;
                    icons["statuten"] = "check";
                }else{
                    selectedFile[name.btnName] = "";
                    user["statutenFile"] = false;
                    icons["statuten"] = "upload";
                }
                break;
            case "blankLetterhead" :
                fileNames[name.btnName] = filenameWithoutExtension;

                //Check if file is selected
                if(file){
                    selectedFile[name.btnName] = "fileSelected";
                    user["blankLetterheadFile"] = true;
                    icons["blankLetterhead"] = "check";
                }else{
                    selectedFile[name.btnName] = "";
                    user["blankLetterheadFile"] = false;
                    icons["blankLetterhead"] = "upload";
                }
                break;
            default:
                fileNames[name.btnName] = filenameWithoutExtension;
                //Check if file is selected
                if(file){
                    selectedFile[name.btnName] = "fileSelected";
                    user["companyPhotoFile"] = true;
                    icons["companyPhoto"] = "check";
                }else{
                    selectedFile[name.btnName] = "";
                    user["companyPhotoFile"] = false;
                    icons["companyPhoto"] = "upload";
                }
        }

        this.setState({user: user, fileNames: fileNames, selectedFile: selectedFile, icons: icons});
    }

    changeCheckboxState(event) {
        let chcName = event.target.name;
        let user = this.state.user;

        switch (chcName) {
            case "chcEmailNotificationsYes":
                user["emailNotifications"] = event.target.checked;
                break;
            case "chcEmailNotificationsNo":
                user["emailNotifications"] = !event.target.checked;
                break;
            case "chcTerms":
                if(typeof this.state.user.terms === "undefined"){
                    user["terms"] = false;
                }else{
                    user["terms"] = !this.state.user.terms;
                }

                break;
            case "chcSmsYes":
                user["smsNotifications"] = event.target.checked;
                break;
            default:
                user["smsNotifications"] = !event.target.checked;
        }
        this.setState({user: user});
        this.props.actions.userRegistration(this.state.user);
    }

    onButtonClick(name, event) {
        event.preventDefault();

        switch (name) {
            case "stepFourConfirmation":
                if(this.validation("four")) {
                    this.props.actions.userRegistrationThunk(this.state.user);
                    this.setState({step: 5, user: {}});
                }
                break;
            case "stepTwoNext":
                if(this.validation("two")) {
                    this.setState({step: 3});
                    this.context.router.push("stepThree");
                }
                break;
            case "stepThreeFinish":
                this.setState({step: 4});
                break;
            default:
                if(this.validation("one")) {
                    this.setState({step: 2});
                    this.context.router.push('stepTwo');
                }
        }
    }


    onButtonPreviousClick(){
        this.setState({step: this.state.step - 1});
    }

    render() {
        const languageReg = this.props.currentLanguage.default.registrationPage;
        let formStep = '';
        let step = this.state.step;
        switch (step) {
            case 1:
                formStep = (<RegistrationFormStepOne user={this.state.user}
                                                     onChange={this.setUser}
                                                     onButtonClick={this.onButtonClick}
                                                     countries={this.getCountries(countries)}
                                                     errors={this.state.errors}
                                                     step={step}/>);
                break;
            case 2:
                formStep = (<RegistrationFormStepTwo user={this.state.user}
                                                     onChange={this.setUser}
                                                     onButtonClick={this.onButtonClick}
                                                     onButtonPreviousClick={this.onButtonPreviousClick}
                                                     errors={this.state.errors}/>);
                break;
            case 3:
                formStep = (<RegistrationFormStepThree user={this.state.user}
                                                       onFileChange={this.onFileChange}
                                                       onButtonClick={this.onButtonClick}
                                                       onButtonPreviousClick={this.onButtonPreviousClick}
                                                       errors={this.state.errors}
                                                       fileNames={this.state.fileNames}
                                                       icons={this.state.icons}
                                                       fileChosen={this.state.selectedFile}/>);
                break;
            case 4 :
                formStep = (<RegistrationFormStepFour user={this.state.user}
                                                      onChange={this.setUser}
                                                      onChangeCheckboxState={this.changeCheckboxState}
                                                      onButtonClick={this.onButtonClick}
                                                      onButtonPreviousClick={this.onButtonPreviousClick}
                                                      errors={this.state.errors}/>);
                break;

            default:
                formStep = (<RegistrationFinished user={this.state.user} />);
        }

        return (
            <div className="sidebar-menu-container" id="sidebar-menu-container">

                <div className="sidebar-menu-push">

                    <div className="sidebar-menu-overlay"></div>

                    <div className="sidebar-menu-inner">
                        <div className="contact-form">
                            <div className="container">
                                <div className="row">
                                    <div className="col-md-10 col-md-offset-1 col-md-offset-right-1">
                                        {React.cloneElement(formStep, {currentLanguage: languageReg})}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

RegistrationPage.contextTypes = {
    router: PropTypes.object
};

function mapStateToProps(state, ownProps) {
    return {
        userData: state.userRegistrationReducer
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(actionCreators, dispatch)
    };
}

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