import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
import * as Animatable from 'react-native-animatable';
import setNavigator from './actions/navigator';
import { appInit } from './actions';
import LoginView from './views/login';
import ListServerView from './views/serverList';

import { Keyboard, Text, TextInput, View, Image, TouchableOpacity } from 'react-native';

import styles from './views/Styles';

import store from './lib/createStore';

//
// export const authenticated = (view) => {
// 	if (!store.getState().login.authenticated) {
// 		return store.getState().navigator.resetTo({
// 			screen: 'Login'
// 		});
// 	}
// 	return view;
// };

export const authenticated = WrappedComponent => class _p extends React.PureComponent {
	constructor() {
		super();
		this.login = store.getState().login;
		if (!this.login.token || this.login.failure) {
			return store.getState().navigator.resetTo({
				screen: 'Login',
				animationType: 'none'
			});
		}
	}
	render() {
		// Wraps the input component in a container, without mutating it. Good!
		return ((this.login.isAuthenticated || this.login.user) && <WrappedComponent {...this.props} />);
	}
};
//
export class PublicScreen extends React.PureComponent {
	// componentWillMount() {
	// 	this.props.setNavigator(this.props.navigator);
	// 	if (this.props.currentServer) {
	// 		return this.props.navigator.navigate('private');
	// 	}
	// }
	render() {
		return ((this.login.isAuthenticated || this.login.user) && <ListServerView {...this.props} />);
	}
}


@connect(null, dispatch => ({
	setNavigator: navigator => dispatch(setNavigator(navigator))
}))
export class PrivateScreen extends React.PureComponent {
	componentWillMount() {
		// this.props.setNavigator(this.props.navigator);
	}
	render() {
		// if (this.props.logged) {
		// 	return (<Text>oi</Text>);
		// }
		return (<LoginView {...this.props} />);
	}
}
@connect(() => ({
	// logged: state.login.isAuthenticated
}), dispatch => ({
	// navigate: routeName => dispatch(NavigationActions.navigate({ routeName })),
	setNavigator: navigator => dispatch(setNavigator(navigator)),
	appInit: () => dispatch(appInit())
}))
export const HomeScreen = class extends React.PureComponent {
	static propTypes = {
		setNavigator: PropTypes.func.isRequired,
		navigator: PropTypes.object.isRequired
	}
	static navigatorStyle = {
		navBarHidden: true
	};
	componentWillMount() {
		this.props.setNavigator(this.props.navigator);
		this.props.appInit();
		//
		// this.props.navigator.setDrawerEnabled({
		// 	side: 'left', // the side of the drawer since you can have two, 'left' / 'right'
		// 	enabled: false // should the drawer be enabled or disabled (locked closed)
		// });
	}
	render() {
		return (<View style={styles.logoContainer}><Animatable.Text animation='pulse' easing='ease-out' iterationCount='infinite' style={{ textAlign: 'center' }}>
			<Image style={styles.logo} source={require('./images/logo.png')} />
		</Animatable.Text></View>);
	}
};