import React, {Component} from 'react';
import { CustomComponent } from 'components';
import { BackHandler } from 'react-native';
import { Actions } from 'react-native-router-flux';
import template from './register-template';
import validations from './register-validations';
import loaderHandler from 'react-native-busy-indicator/LoaderHandler';

export default class RegisterController extends CustomComponent {
	constructor(args) {
		super(args);

		this.setBackButton();
		this.setForm();
	}

	__backHandler() {
		try {
			const index = this.refs.swiper.state.index + 1;

			if (index === 1) {
				this.removeBackHandler();
			} else {
				this.goBack();
			}
		} catch (e) {
			this.removeBackHandler();
			return false;
		}

		return true;
	}

	removeBackHandler() {
		BackHandler.removeEventListener('hardwareBackPress', this.__backHandler);
		Actions.pop();
	}

	setBackButton() {
		this.__backHandler = this.__backHandler.bind(this);
		BackHandler.addEventListener('hardwareBackPress', this.__backHandler);
	}

	setForm() {
		this.validations = validations(this.i18);

		this.options = {
			green: [{
				label: 'Just Cheap',
				value: 'Indifferent'
			}, {
				label: 'Standard green',
				value: 'Standard_green'
			}, {
				label: 'Truly green & sustainable',
				value: 'Truly_green'
			}],
			flex: [{
				label: 'Just Cheap',
				value: 'Cheap'
			}, {
				label: 'Average length (<6m)',
				value: 'Standard'
			}, {
				label: 'Flexible (<1m)',
				value: 'Flexible'
			}],
			service: [{
				label: 'Just Cheap',
				value: 'Cheap'
			}, {
				label: 'Solid avarage',
				value: 'Standard'
			}, {
				label: 'Top service',
				value: 'Quality'
			}]
		}

		this.state = {
			zip: '',
			select_kwh_est: '',
			select_number_people: '',
			select_green: this.options.green[1],
			select_flex: this.options.flex[1],
			select_service: this.options.service[1],
			current_supplier: '',
			select_current_tarif: '',
			email: '',
			select_password: '',
			button: this.i18.t('register.next'),
			viewPeople: false,
			modalClose: false,
			confirm: false,
			confirmSecond: false
		};

	}

	goBack() {
		const index = this.refs.swiper.state.index + 1;
		const nextText = this.i18.t('register.next');

		if (this.state.button !== nextText) {
			this.setState({ button : nextText });
		}

		if (index === 1) {
			this.removeBackHandler();
		} else {
        	this.refs.swiper.scrollBy(-1);
        }
	}

	nextPage() {
		const index = this.refs.swiper.state.index + 1;
		const formPromise = this.refs['registerForm' + index].submit(this);

		return formPromise.then(() => {
			if (index === 4) {
				this.setState({ button : this.i18.t('register.last')});
			}

			if (index !== 5) this.refs.swiper.scrollBy(1);
			else this.register();
		});
	}

	loginForm(field, value) {
		if (field === 'email') this.setState({ email: value});
		else this.setState({ select_password: value});
	}

	register() {
		loaderHandler.showLoader(this.i18.t('login.connecting'));

		const user = {
			email: this.state.email.trim().toLowerCase(),
			select_password: this.state.select_password,
			current_supplier: this.state.current_supplier,
			select_current_tarif: this.state.select_current_tarif,
			select_green: this.state.select_green.value,
			select_flex: this.state.select_flex.value,
			select_service: this.state.select_service.value,
			zip: this.state.zip,
			select_kwh_est: this.state.select_kwh_est,
			select_number_people: this.state.select_number_people
		};

		return this.services.User.register(user)
		.then((response) => {
			loaderHandler.hideLoader();
			alert('user created');
			return Actions.pop();
		})
		.catch((error) => {
			alert('error saving');
			loaderHandler.hideLoader();
		});
	}

	render() {
		return template(this);
	}
}