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

// Rotation: https://stackoverflow.com/questions/35050774/how-can-i-make-text-vertical-rotated-90-deg-in-react-native

export default StyleSheet.create({
  container: {
  //  backgroundColor: '#FFFFFF',
    flex: 1,
    alignItems: 'center',
  },
  topView: {
 //   backgroundColor: '#FFFFFF',
    width: Dimensions.get('window').width,
    height: 202,
    borderBottomWidth: 1,
    borderColor: '#B7BABC',
  },
  greyTopView: {
 //   backgroundColor: '#FFFFFF',
    width: Dimensions.get('window').width,
    height: 202,
    borderBottomWidth: 1,
    borderColor: 'rgba(0,0,0,0.5)',
  },

  connectButton: {
    width: Dimensions.get('window').width - 36,
    height: 80,
    backgroundColor: '#5A6790',
    borderRadius: 10,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    justifyContent: 'center',
  //  alignItems: 'center',
  },
  greyConnectButton: {
    width: Dimensions.get('window').width - 36,
    height: 80,
    backgroundColor: 'rgba(0,0,0,0.5)',
    borderRadius: 10,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    justifyContent: 'center',
  //  alignItems: 'center',
  },
  optionImage: {
    position: 'absolute',
    left: 12,
    width: 50,
    height: 50,
    borderRadius: 10,
    tintColor: 'white',
    justifyContent: 'center',
    resizeMode: 'contain'
  },
  greyOptionImage: {
    position: 'absolute',
    left: 12,
    width: 50,
    height: 50,
    borderRadius: 10,
    tintColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    resizeMode: 'contain'
  },
  optionLabel: {
    fontSize: 22,
    lineHeight: 29,
    fontWeight: '500',
    textAlign: "left",
    left: 75,
    color: '#ffffff'
  },
  greyOptionLabel: {
    fontSize: 22,
    lineHeight: 29,
    fontWeight: '500',
    textAlign: "left",
    left: 75,
    color: 'rgba(0,0,0,0.5)'
  },
  infoPopupContainer: {
    position: 'absolute',
    right: 0,
    top: 84,
  },
  infoPopupText: {
    fontWeight: "bold",
    fontStyle: "italic",
    textDecorationLine: "underline",
    fontSize: 12,
  },
  rowView: {
 //   backgroundColor: '#FFFFFF',
    width: Dimensions.get('window').width,
    height: 100,
    borderTopWidth: 1,
    borderColor: '#B7BABC',
    justifyContent: 'center',
  },
  greyRowView: {
 //   backgroundColor: '#FFFFFF',
    width: Dimensions.get('window').width,
    height: 100,
    borderTopWidth: 1,
    borderColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
  },
  textStyle: {
    left: 18,
    color: '#B7BABC',
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: '500',
    fontSize: 24,
    lineHeight: 32,
    letterSpacing: 1,
    flex: 1,
    alignItems: 'center',
  },
  greyTextStyle: {
    left: 18,
    color: 'rgba(0,0,0,0.5)',
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: '500',
    fontSize: 24,
    lineHeight: 32,
    letterSpacing: 1,
    flex: 1,
    alignItems: 'center',
  },
  buttonStyle: {
    right: 35,
    backgroundColor: '#F2F5F7',
    height: 36,
    width: 36,
    borderRadius: 100,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    justifyContent: 'center',
    alignItems: 'center',
  },
  greyButtonStyle: {
    right: 35,
    backgroundColor: 'rgba(0,0,0,0.5)',
    height: 36,
    width: 36,
    borderRadius: 100,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    justifyContent: 'center',
    alignItems: 'center',
  },
  arrowStyle: {
    width: 20,
    height: 20,
  },
  topArrowStyle: {
    width: 20,
    height: 20,
    transform: [{ rotate: '180deg'}],
  },
  topButtonStyle: {
    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',
  },
  greyTopButtonStyle: {
    left: 18,
    top: 56,
    backgroundColor: 'rgba(0,0,0,0.5)',
    height: 36,
    width: 36,
    borderRadius: 100,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    justifyContent: 'center',
    alignItems: 'center',
  },
  topTextStyle: {
    position: 'absolute',
    top: 132,
    color: '#587685',
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: 30,
    lineHeight: 39,
    letterSpacing: 1,
    flex: 1,
  },
  greyTopTextStyle: {
    position: 'absolute',
    top: 132,
    color: 'rgba(0,0,0,0.5)',
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: 30,
    lineHeight: 39,
    letterSpacing: 1,
    flex: 1,
  },
  modalExit: {
     borderWidth:0,
     alignItems:'center',
     width:16,
     height:16,
     position: 'absolute',
     top: 8,
     right: 8,
     justifyContent: 'center',
     borderRadius:35,
     backgroundColor:'#ffffff'
  },
  modalBody: {
    marginLeft: 37,
    marginRight: 37,
    textAlign: 'left',
    fontSize: 22
  },
  modalContainer: {
    position: 'absolute', 
    top: 230,
    left: Dimensions.get('window').width / 2 - ((Dimensions.get('window').width * .9) / 2),
    width: Dimensions.get('window').width * .9,
    height: 340,
    borderRadius: 10,
    backgroundColor: "#fede7b",
  },
  modalText: {
    marginTop: 34.5,
    marginRight: 15,
    marginLeft: 15,
    marginBottom: 24.5,
    textAlign: 'center',
    fontWeight: "bold",
    fontSize: 30
  },
  modalExitText: {
    fontSize: 8,
    fontWeight: 'bold',
    textAlign: 'center'
  },
  profileImage: {
    position: 'absolute',
    width: 70,
    height: 70,
    top: 56,
    borderRadius: 35,
  },
  globePosition: {
    width: 59,
    height: 59,
    position: 'absolute',
    left: 6,
    bottom: 340-22,
  },
  modalUnsyncBody: {
    marginLeft: 37,
    marginRight: 37,
    top: 40,
    textAlign: 'left',
    fontSize: 22
  },
  modalUnsyncContainer: {
    position: 'absolute', 
    top: 180,
    left: Dimensions.get('window').width / 2 - ((Dimensions.get('window').width * .9) / 2),
    width: Dimensions.get('window').width * .9,
    height: 520,
    borderRadius: 10,
    backgroundColor: "#fede7b"
  },
  globeUnsyncPosition: {
    width: 59,
    height: 59,
    position: 'absolute',
    left: 6,
    bottom: 520-22,
  },
  keepButton: {
    position: 'absolute',
    width: 150,
    height: 55,
    top: 360,
    backgroundColor: '#F2F5F7',
    left: Dimensions.get('window').width * .9 * .5 - 75,
    borderRadius: 10,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  leaveButton: {
    position: 'absolute',
    width: 150,
    height: 55,
    top: 440,
    backgroundColor: '#F2F5F7',
    left: Dimensions.get('window').width * .9 * .5 - 75,
    borderRadius: 10,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  syncText: {
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: 22,
    lineHeight: 29,
    textAlign: 'center',
  },
});