import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { View, ActivityIndicator, StatusBar, StyleSheet } from 'react-native';
import { color } from 'nixplay-ui-kit';
import _ from 'lodash';
import PropTypes from 'prop-types';
import { SHARED_PLAYLIST_ONBOARDING_PRESPLASH } from '~/store/contentTypes';
import {
	INC_SHARED_PLAYLIST_TUTORIAL,
	GET_USER_PROFILE,
	SET_FROM_SPLASH_SCREEN,
} from '~/store/actionTypes';

const styles = StyleSheet.create({
	container: {
		backgroundColor: color.white,
		flex: 1,
		justifyContent: 'center',
		alignContent: 'center',
	},
});

export const SplashScreen = (props) => {
	// const getBGSource = () => {
	// 	const deviceModel = DeviceInfo.getModel().toLowerCase();

	// 	if (_.includes(deviceModel, 'iphone x')) {
	// 		return bgIphonex;
	// 	} else if (_.includes(deviceModel, 'ipad') || Device.isTablet) {
	// 		return bgIpad;
	// 	} else if (_.includes(deviceModel, 'iphone 8')) {
	// 		return bgIphone8;
	// 	}
	// 	return bg;
	// };

	// const [bgSource] = useState(getBGSource());

	useEffect(() => {
		props.setFromSplashScreen();
		if (props.sharedPlaylistOnboardingTutorialState === SHARED_PLAYLIST_ONBOARDING_PRESPLASH) {
			props.incSharedPlaylistOnboardingTutorial();
		}
	}, []);

	return (
		<View
			style={styles.container}
		>
			<StatusBar networkActivityIndicatorVisible barStyle="dark-content" />
			<ActivityIndicator size="large" color={color.blue} />
		</View>
	);
};

SplashScreen.propTypes = {
	sharedPlaylistOnboardingTutorialState: PropTypes.number.isRequired,
	incSharedPlaylistOnboardingTutorial: PropTypes.func.isRequired,
	setFromSplashScreen: PropTypes.func.isRequired,
};

const mapStateToProps = state => ({
	isLoggedIn: !_.isEmpty(_.get(state, 'users.currentUser')),
	sharedPlaylistOnboardingTutorialState: state.app.sharedPlaylistOnboardingTutorialState,
});

const mapActionsToProps = dispatch => ({
	incSharedPlaylistOnboardingTutorial() {
		dispatch({ type: INC_SHARED_PLAYLIST_TUTORIAL });
	},
	getUserProfile() {
		dispatch({ type: GET_USER_PROFILE });
	},
	setFromSplashScreen() {
		dispatch({ type: SET_FROM_SPLASH_SCREEN });
	},
});

export default connect(
	mapStateToProps,
	mapActionsToProps,
)(SplashScreen);
