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

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

export default StyleSheet.create({
  screenContainer:{
    alignItems: 'center',
    marginTop: 120,
		marginBottom: 120
  	},
	textContainer: {
		backgroundColor: "#F3AA50", 
		textAlign: "center",
    justifyContent: "center",
		height: 100,
		width: width * .9,
		padding: 20,
		borderRadius: 10,
		fontSize: 24,
    overflow: "hidden"
	},
	textSelect: {
		color: "#c9577a",
		fontWeight: "bold",
		fontSize: 22,
		margin: 25,
    textAlign: "left"
	},
  buttonContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center",
    width: width
  },
  globeContainer: {
    position: 'absolute',
    top: 78,
    left: 30
  },
  globePosition: {
    width: 59,
    height: 59,
  },
  backgroundModal: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  },
  modalText: {
    marginTop: 34.5,
    marginRight: 15,
    marginLeft: 15,
    marginBottom: 24.5,
    textAlign: 'center',
    fontWeight: "bold",
    fontSize: 30
  },
  modalExit: {
     borderWidth:0,
     alignItems:'center',
     width:32,
     height:32,
     position: 'absolute',
     top: 8,
     right: 8,
     justifyContent: 'center',
     borderRadius:35,
     backgroundColor: '#ffffff'
  },
  modalExitText: {
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center'
  },
  modalBody: {
    marginLeft: 37,
    marginRight: 37,
    textAlign: 'left',
    fontSize: 22
  },
  modalContainer: {
    position: 'absolute', 
    top: 230,
    left: width / 2 - ((width * .9) / 2),
    width: width * .9,
    height: 448,
    borderRadius: 10,
    backgroundColor: "#fede7b"
   },
  infoPopupContainer: {
    position: 'absolute',
    right: 28,
    top: 102,
    borderBottomWidth: 2,
  },
  infoPopupText: {
    fontWeight: "bold",
    fontStyle: "italic",
    fontSize: 12,
  },
  FBButton: {
    backgroundColor: "#5A6790", 
    borderRadius: 10,
    height: 80,
   // width: width*.7,
    margin: width*.1/2,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center', //Centered vertically
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
    alignItems: 'center',

  },
  FBButtonPressed: {
    backgroundColor: "#3f4966", 
    borderRadius: 10,
    height: 80,
    width: width*.9,
    margin: width*.1/2,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center', //Centered vertically
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
  },
  laterButton: {
    backgroundColor: "#FFDF74", 
    borderRadius: 10,
    height: 80,
    width: width*.9,
    margin: width*.1/2,
    justifyContent: 'center', //Centered vertically
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
  },
  laterButtonPressed: {
    backgroundColor: "#E0C465", 
    borderRadius: 10,
    height: 80,
    width: width*.9,
    margin: width*.1/2,
    justifyContent: 'center', //Centered vertically
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
  },
  laterLabel: {
    fontSize: 22,
    textAlign: 'center'
  },
  optionLabel: {
    fontSize: 22,
    textAlign: "right",
    marginLeft: 16,
  //  margin: 23,
    color: '#ffffff'
  },
  optionImage: {
   // position: 'absolute',
  //  top: 14,
  //  left: 12,
    width: 50,
    height: 50,
    borderRadius: 10,
    tintColor: 'white',
    justifyContent: 'center',
    resizeMode: 'contain'
  },
  optionImage2: {
    width: 50,
    height: 50,
    borderRadius: 10,
    justifyContent: 'center',
    resizeMode: 'contain'
  },
  GCalButton: {
    backgroundColor: "#96ACEF", 
    borderRadius: 10,
    height: 80,
    width: width*.9,
    margin: width*.1/2,
    flexDirection: 'row',
    justifyContent: 'center', //Centered vertically
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
  },
  GCalButtonPressed: {
    backgroundColor: "#7283b8", 
    borderRadius: 10,
    height: 80,
    width: width*.9,
    margin: width*.1/2,
    flexDirection: 'row',
    justifyContent: 'center', //Centered vertically
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
  },
  startButton: {
    backgroundColor: "#fede7b", 
    borderRadius: 10,
    height: 150,
    width: width * .4,
    margin: 10,
    justifyContent: 'center', //Centered vertically
    alignItems: 'center'
  },
  selectCircleObject: {
    width: 8,
    height: 8,
    backgroundColor: '#000000',
    borderRadius: 10,
  },
  circleContainer: {
    position: 'absolute',
    top: height * .9,
    left: (width / 2) - 12,
    width: 25,
    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,
   },
   prevButton: {
     borderWidth:0,
     alignItems:'center',
     position: 'absolute',
     top: height * .805,
     left: 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
  },
  prevObject: {
    width: 60,
    height: 60,
    marginRight: 5
  }
  // https://github.com/ReactNativeSchool/react-native-quiz/blob/master/App/components/Button.js
});