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

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

export default StyleSheet.create({
  headerText: {
    position: 'absolute',
    height: 80,
    top: 108,
    width: width - 36,
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: '500',
    lineHeight: 37,
    fontSize: 28,
    textAlign: 'center',
    color: '#587685',
  },
  greyHeaderText: {
    position: 'absolute',
    height: 80,
    top: 118,
    width: width - 36,
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: '500',
    lineHeight: 37,
    fontSize: 28,
    textAlign: 'center',
    color: 'rgba(0,0,0,0.5)',
  },
  locationPicture: {
    position: 'absolute',
    borderRadius: 10,
    width: width - 36,
    height: 182,
    top: 194,
  },
  locationConfirmContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: 'center',
    width: width - 36,
    top: 406,
  },
  noButton: {
    width: 160,
    height: 61,
    backgroundColor: '#F2F5F7',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  yesButton: {
    width: 160,
    height: 61,
    backgroundColor: '#90CCF4',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  locationConfirmButtonText: {
    fontFamily: 'Arial',
    fontStyle: 'italic',
    fontWeight: '500',
    fontSize: 20,
    lineHeight: 27,
    textAlign: 'center',
    color: '#587685',
  },
  greyLocationConfirmButtonText: {
    fontFamily: 'Arial',
    fontStyle: 'italic',
    fontWeight: '500',
    fontSize: 20,
    lineHeight: 27,
    textAlign: 'center',
    color: 'rgba(0,0,0,0.5)',
  },
  bottomBarContainer: {
    position: 'absolute',
    width: width - 36,
    height: 47,
    top: 685,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 10,
  },

  laterReviewButton: {
    width: 139,
    height: 47,
    backgroundColor: '#F2F5F7',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    borderRadius: 10,
    justifyContent: 'center',
  },
  greyLaterReviewButton: {
    width: 139,
    height: 47,
    backgroundColor: 'rgba(0,0,0,0.5)',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    borderRadius: 10,
    justifyContent: 'center',
  },

  nextReviewButton: {
    width:70,
    height:70,
    justifyContent: 'center',
    backgroundColor: '#F2F5F7',
    borderRadius:35,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
  },
  greyNextReviewButton: {
    width:70,
    height:70,
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
    borderRadius:35,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
  },
  hiddenButton: {
    width:70,
    height:70,
    justifyContent: 'center',
    borderRadius:35,
  },
  nextReviewObject: {
    width: 60,
    height: 60,
    marginLeft: 5,
  },
  prevReviewObject: {
    width: 60,
    height: 60,
    marginRight: 5,
  },
  prevReviewButton: {
    width:70,
    height:70,
    justifyContent: 'center',
    backgroundColor:'#F2F5F7',
    borderRadius:35,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
  },
  greyPrevReviewButton: {
    width:70,
    height:70,
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
    borderRadius:35,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
  },
  fullStar: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    tintColor: '#F3D250',
    height: 57,
    width: 57,
  },
  greyFullStar: {
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    tintColor: 'rgba(0,0,0,0.5)',
    height: 57,
    width: 57,
  },
  emptyStar: {
    tintColor: '#B7BABC',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    height: 57,
    width: 57,
  },
  greyEmptyStar: {
    tintColor: 'rgba(0,0,0,0.5)',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    height: 57,
    width: 57,
  },
  starContainer: {
    alignItems: 'center',
    top: 410,
  },
  tagContainer: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-between",
    width: width - 36,
    top: 406,
  },

  tagButton: {
    height: 47,
    width: 160,
    backgroundColor: '#F2F5F7',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
    marginBottom: 10,
  },
  greyTagButton: {
    height: 47,
    width: 160,
    backgroundColor: 'rgba(0,0,0,0.5)',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
    marginBottom: 10,
  },
  pressedTagButton: {
    height: 47,
    width: 160,
    backgroundColor: '#B7BABC',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
    marginBottom: 10,
  },
  greyPressedTagButton: {
    height: 47,
    width: 160,
    backgroundColor: 'rgba(0,0,0,0.5)',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
    marginBottom: 10,
  },
  customTagButton: {
    height: 47,
    width: width - 36,
    backgroundColor: '#F2F5F7',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    borderRadius: 10,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    marginTop: 10,
  },
  greyCustomTagButton: {
    height: 47,
    width: width - 36,
    backgroundColor: 'rgba(0,0,0,0.5)',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    borderRadius: 10,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    marginTop: 10,
  },
  tagText: {
    fontFamily: 'Arial',
    fontStyle: 'italic',
    fontWeight: '500',
    fontSize: 20,
    lineHeight: 27,
    textAlign: 'center',
    color: '#587685',
  },
  greyTagText: {
    fontFamily: 'Arial',
    fontStyle: 'italic',
    fontWeight: '500',
    fontSize: 20,
    lineHeight: 27,
    textAlign: 'center',
    color: 'rgba(0,0,0,0.5)',
  },
  customTagText: {
    left: 8,
    fontFamily: 'Arial',
    fontStyle: 'italic',
    fontWeight: '500',
    fontSize: 16,
    lineHeight: 27,
    textAlign: 'center',
    color: '#587685',
  },
  greyCustomTagText: {
    left: 8,
    fontFamily: 'Arial',
    fontStyle: 'italic',
    fontWeight: '500',
    fontSize: 16,
    lineHeight: 27,
    textAlign: 'center',
    color: 'rgba(0,0,0,0.5)',
  },
  popTextContainer: {
    position: 'absolute',
    top: 376,
    right: 18,
    borderBottomWidth: 2,
  },

  helpPopText: {
    fontFamily: 'Arial',
    fontWeight: "bold",
    fontStyle: "italic",
    fontSize: 12,
    lineHeight: 15,
  },


  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: 121,
    left: 18,
    width: width - 36,
    height: 448,
    borderRadius: 10,
    backgroundColor: "#fede7b"
   },


  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
  },
   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,
   },
  
  prevObject: {
    width: 60,
    height: 60,
    marginRight: 5
  },

  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)'
  },
  infoPopupContainer: {
    position: 'absolute',
    right: 28,
    top: 102
  },
  infoPopupText: {
    fontWeight: "bold",
    fontStyle: "italic",
    textDecorationLine: "underline",
    fontSize: 12,
  },
  FBButton: {
    backgroundColor: "#5A6790", 
    borderRadius: 10,
    height: 80,
    width: width*.9,
    margin: 10,
    justifyContent: 'center', //Centered vertically
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
  },
  FBButtonPressed: {
    backgroundColor: "#3f4966", 
    borderRadius: 10,
    height: 80,
    width: width*.9,
    margin: 10,
    justifyContent: 'center', //Centered vertically
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
  },
  laterButton: {
    backgroundColor: "#FFDF74", 
    borderRadius: 10,
    height: 80,
    width: width*.9,
    margin: 10,
    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: 10,
    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",
    margin: 23,
    color: '#ffffff'
  },
  optionImage: {
    position: 'absolute',
    top: 14,
    left: 12,
    width: 50,
    height: 50,
    borderRadius: 10,
    tintColor: 'white',
    justifyContent: 'center',
    resizeMode: 'contain'
  },
  optionImage2: {
    position: 'absolute',
    top: 14,
    left: 12,
    width: 50,
    height: 50,
    borderRadius: 10,
    justifyContent: 'center',
    resizeMode: 'contain'
  },
  GCalButton: {
    backgroundColor: "#96ACEF", 
    borderRadius: 10,
    height: 80,
    width: width*.9,
    margin: 10,
    justifyContent: 'center', //Centered vertically
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
  },
  GCalButtonPressed: {
    backgroundColor: "#7283b8", 
    borderRadius: 10,
    height: 80,
    width: width*.9,
    margin: 10,
    justifyContent: 'center', //Centered vertically
    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,
    
  },
  topArrowStyle: {
    width: 20,
    height: 20,
    transform: [{ rotate: '180deg'}],
  },
  topButtonStyle: {
    position: 'absolute',
    left: 18,
    top: 56,
    backgroundColor: '#F2F5F7',
    height: 36,
    width: 36,
    borderRadius: 100,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    justifyContent: 'center',
    alignItems: 'center',
  },
  // https://github.com/ReactNativeSchool/react-native-quiz/blob/master/App/components/Button.js
});