import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
} from 'react-native';

var { height, width } = Dimensions.get('window');

/*

box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 4px 4px rgba(0, 0, 0, 0.25)

*/

export default StyleSheet.create({
  topLevelContainer:{
    flex: 1
  },
  header: {
    height: 91,
    borderBottomColor: '#B7BABC',
    borderBottomWidth: 1,
  },
  prevButton: {
     borderWidth:0,
     alignItems:'center',
     position: 'absolute',
     top: 44,
     left: 18,
     width:36,
     height:36,
     justifyContent: 'center',
     backgroundColor:'#F2F5F7',
     borderRadius:18,
     shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
   },
   prevObject: {
    width: 15,
    height: 15,
    marginRight: 4
  },
  settingsButton: {
     borderWidth:0,
     alignItems:'center',
     position: 'absolute',
     top: 56,
     right: 18,
     width:36,
     height:36,
     justifyContent: 'center',
     backgroundColor:'#F2F5F7',
     borderRadius:18,
     shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
   },
   settingsObject: {
    width: 24,
    height: 24,
    marginTop: 2
  },
  screenContainer:{
    alignItems: 'center',
		marginTop: 120,
    marginLeft: 20,
    backgroundColor: "#F3AA50", 
    justifyContent: "center",
    height: 100,
    width: width * .9,
    padding: 10,
    borderRadius: 10,
  	},
	textContainer: {
		textAlign: "center",
    fontSize: 26,
	},
  globeContainer: {
    position: 'absolute',
    top: 78,
    left: 30
  },
  globePosition: {
    width: 59,
    height: 59,
  },
	textSelect: {
		color: "#CB5579",
		fontWeight: "bold",
		fontSize: 22,
		marginLeft: 23,
    marginRight: 23,
    marginTop: 23,
    marginBottom: 7,
    textAlign: "left"
	},
  buttonContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center",
    width: width
  },
  startButton: {
    backgroundColor: "#FFDF74", 
    borderRadius: 10,
    height: 150,
    width: width * .4,
    marginTop: 16,
    marginLeft: 16,
    marginBottom: 16,
    marginRight: 16,
    justifyContent: 'center', //Centered vertically
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
  },
  pressedButton: {
    backgroundColor: "#E0C465", 
    borderRadius: 10,
    height: 150,
    width: width * .4,
    marginTop: 16,
    marginLeft: 16,
    marginBottom: 16,
    marginRight: 16,
    justifyContent: 'center', //Centered vertically
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
  },
  optionLabel: {
    fontWeight: "bold",
    fontSize: 20
  },
  optionImage: {
    width: 75,
    height: 75,
    marginBottom: 10,
    resizeMode: 'contain'
  },
  selectCircleObject: {
    width: 8,
    height: 8,
    backgroundColor: '#000000',
    borderRadius: 10,
  },
  circleContainer: {
    position: 'absolute',
    top: height * .845,
    left: (width / 2) - 33,
    width: 66,
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  circleObject: {
    width: 8,
    height: 8,
    backgroundColor: '#90CCF4',
    borderRadius: 10,
    
  },
  nextButton: {
     borderWidth:0,
     alignItems:'center',
     position: 'absolute',
     top: height * .805,
     right: 18,
     width:70,
     height:70,
     justifyContent: 'center',
     backgroundColor:'#fede7b',
     borderRadius:35,
     shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
   },
   
  nextObject: {
    width: 60,
    height: 60,
    marginLeft: 5
  },
  // https://github.com/ReactNativeSchool/react-native-quiz/blob/master/App/components/Button.js
});