import React, { useCallback, useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { StyleSheet, Text, View, Dimensions, Image, TouchableWithoutFeedback } from 'react-native';
import { createStore } from './store/Store';
import StoreContext, { useStore } from './store/StoreContext';
import { configure } from 'mobx';
import { Transition, FluidNavigator } from "react-navigation-fluid-transitions"

const store = createStore()
configure({ enforceActions: "always" })

export default observer((props: any) => {
	const [state, setState] = useState({ isReady: false })

	const Screen1 = (props) => (
		<View style={styles.container}>
		  <TouchableWithoutFeedback onPress={() => props.navigation.navigate('screen2')}>
			<View style={styles.top1}>
			  <Transition appear="left" shared='paper'>
				<View style={styles.paper1} />
			  </Transition>
			  <Transition appear="right" shared='image'>
				<Image style={styles.shoe1} source={require('../assets/img/shoe.png')} />
			  </Transition>
			  <Transition appear="horizontal">
				<View style={styles.headerContainer1}>
				  <Text style={styles.header1}>THE TEN</Text>
				  <Text style={styles.subHeader1}>AIR JORDAN I</Text>
				</View>
			  </Transition>
			</View>
		  </TouchableWithoutFeedback>
		</View>
	  );

	  const Screen2 = (props) => (
		<View style={styles.container}>
		  <TouchableWithoutFeedback onPress={() => props.navigation.navigate('screen1')}>
			<View style={styles.top2}>
			  <Transition shared='paper'>
				<View style={styles.paper2} />
			  </Transition>
			  <Transition shared='image'>
				<Image style={styles.shoe2} source={require('../assets/img/shoe.png')} />
			  </Transition>
			  <Transition appear="horizontal" delay>
				<Text style={styles.price}>$ 299</Text>
			  </Transition>
			  <View style={styles.smallImageContainer}>
				<Transition appear="horizontal" delay>
				  <View style={styles.smallImageWrapper}>
					<Image style={styles.smallImage} source={require('../assets/img/shoe.png')} />
				  </View>
				</Transition>
				<Transition appear="horizontal" delay>
				  <View style={styles.smallImageWrapper}>
					<Image style={styles.smallImage} source={require('../assets/img/shoe.png')} />
				  </View>
				</Transition>
			  </View>
			  <Transition appear="horizontal">
				<View style={styles.headerContainer2}>
				  <Text style={styles.header2}>THE TEN</Text>
				  <Text style={styles.subHeader2}>AIR JORDAN I</Text>
				</View>
			  </Transition>
			</View>
		  </TouchableWithoutFeedback>
		</View>
	  );



	  const Navigator = FluidNavigator({
		screen1: { screen: Screen1 },
		screen2: { screen: Screen2 },
	  }, {
		style: { backgroundColor: '#C14534' },
		defaultNavigationOptions: {
		  gesturesEnabled: true,
		},
	  });

	const router = Navigator.router;
	const { navigation } = props
	return (
		<StoreContext.Provider value={store}>
			<Navigator navigation={navigation} />
		</StoreContext.Provider>
	)
})


const styles = StyleSheet.create({
	container: {
		flex: 1,
	},
	top1: {
		backgroundColor: '#C14534',
		flex: 1,
	},
	paper1: {
		backgroundColor: '#EC806E',
		width: Dimensions.get('window').width * 0.65,
		height: Dimensions.get('window').height * 0.45,
		position: 'absolute',
		left: 10,
		top: Dimensions.get('window').height * 0.5 - 150,
		transform: [{ rotate: '-20deg' }],
		alignItems: 'flex-start',
		justifyContent: 'flex-end',
		shadowColor: '#000',
		shadowRadius: 5,
		shadowOffset: { width: 0, height: 5 },
		shadowOpacity: 0.4,
		// elevation: 17,
	},
	shoe1: {
		width: 350,
		height: 240,
		position: 'absolute',
		left: Dimensions.get('window').width * 0.2,
		top: Dimensions.get('window').height * 0.5 - 160,
		transform: [{ rotate: '35deg' }],
	},
	headerContainer1: {
		padding: 20,
		paddingTop: Dimensions.get('window').height * 0.1,
	},
	header1: {
		color: '#FFF',
		fontSize: 80,
		marginBottom: -14,
	},
	subHeader1: {
		color: '#FFF',
		fontSize: 34,
	},
	top2: {
		backgroundColor: '#C14534',
		flex: 1,
	},
	shoe2: {
		width: 291,
		height: 200,
		position: 'absolute',
		left: Dimensions.get('window').width * 0.5 - (291 / 2),
		top: 60,
	},
	paper2: {
		backgroundColor: '#FFFFFF',
		position: 'absolute',
		left: 0,
		top: Dimensions.get('window').height * 0.5,
		bottom: 0,
		right: 0,
		alignItems: 'center',
		justifyContent: 'flex-start',
		paddingTop: 70,
		padding: 10,
	},
	price: {
		color: '#FFF',
		fontSize: 34,
		textAlign: 'center',
		paddingTop: -55 + Dimensions.get('window').height * 0.5,
	},
	headerContainer2: {
		padding: 20,
		justifyContent: 'center',
		paddingTop: 50,
	},
	header2: {
		color: '#444',
		fontSize: 42,
		textAlign: 'center',
		marginBottom: -6,
	},
	subHeader2: {
		color: '#444',
		fontSize: 22,
		textAlign: 'center',
	},
	smallImageContainer: {
		position: 'absolute',
		left: 0,
		top: Dimensions.get('window').height * 0.54,
		bottom: 0,
		right: 0,
		alignItems: 'center',
		paddingTop: 50,
		flexDirection: 'row',
		justifyContent: 'space-around',
		marginLeft: 80,
		marginRight: 80,
		margin: 30,
	},
	smallImageWrapper: {
		width: Dimensions.get('window').width / 4,
		height: Dimensions.get('window').width / 4,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#ECECEC',

	},
	smallImage: {
		width: 90,
		height: 50,
	},
});




//////////////////////////
package.json
//////////////////////////

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@microsoft/signalr": "^3.0.0-preview8.19405.7",
    "d3": "^5.11.0",
    "d3-shape": "^1.3.5",
    "expo": "^34.0.4",
    "expo-camera": "^6.0.0",
    "expo-font": "~6.0.1",
    "expo-permissions": "^6.0.0",
    "expo-sensors": "~6.0.0",
    "lodash": "^4.17.15",
    "mobx": "^5.11.0",
    "mobx-react-lite": "^1.4.1",
    "moment": "^2.24.0",
    "native-base": "^2.13.7",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-icons": "^3.7.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-elements": "^1.1.0",
    "react-native-fusioncharts": "^4.0.0",
    "react-native-gesture-handler": "^1.4.1",
    "react-native-image-picker": "^1.0.1",
    "react-native-reanimated": "~1.1.0",
    "react-native-screens": "1.0.0-alpha.22",
    "react-native-svg": "~9.5.1",
    "react-native-svg-charts": "^5.3.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-waveview": "^1.1.0",
    "react-native-web": "^0.11.4",
    "react-navigation": "^1.7.0",
    "react-navigation-fluid-transitions": "^0.1.7",
    "victory-native": "^33.0.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.5.0",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/preset-typescript": "^7.3.3",
    "@types/react-native": "^0.60.0",
    "@types/signalr": "^2.2.35",
    "babel-preset-expo": "^5.1.1"
  },
  "private": true
}