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,
  },
  rowView: {
 //   backgroundColor: '#FFFFFF',
    width: Dimensions.get('window').width,
    height: 100,
    justifyContent: 'center',
  },
  extraRowView: {
 //   backgroundColor: '#FFFFFF',
    width: Dimensions.get('window').width,
    height: 150,
    alignItems: 'center',
  },
  textStyle: {
    left: 18,
    color: '#B7BABC',
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: '500',
    width: 270,
    fontSize: 16,
    lineHeight: 21,
    letterSpacing: 1,
  },
  buttonStyle: {
    right: 35,
    height: 36,
    width: 36,
    borderRadius: 100,
    justifyContent: 'center',
    alignItems: 'center',
  },
  arrowStyle: {
    width: 20,
    height: 20,
    transform: [{ rotate: '90deg'}],
    tintColor: '#B7BABC',
  },
  expandArrowStyle: {
    width: 20,
    height: 20,
    transform: [{ rotate: '-90deg'}],
    tintColor: '#B7BABC',
  },
  expandText:{
    color: '#000000',
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: 'normal',
    width: Dimensions.get('window').width - 36,
    fontSize: 12,
    lineHeight: 26,
    letterSpacing: 1,
  },
  topArrowStyle: {
    width: 15,
    height: 15,
    transform: [{ rotate: '180deg'}],
  },
  topButtonStyle: {
    left: 18,
    top: 56,
    backgroundColor: '#F2F5F7',
    height: 36,
    width: 36,
    borderRadius: 100,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    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,
  },
  modalContainer: {
    position: 'absolute', 
    top: 200,
    left: 10, 
    width: Dimensions.get('window').width - 20,
    height: 200,
    borderRadius: 10,
    backgroundColor: "#fede7b",
  },
  globePosition: {
    position: 'absolute',
    left: 6,
    width: 59,
    height: 59,
    bottom: 200-22,
  },
  modalBody: {
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: 'normal',
    lineHeight: 39,
    marginRight: 14,
    textAlign: 'center',
    fontSize: 30,
    top: 30,
    // alignItems center does not seem to work inside a modal
    // I'm trying to manually center, which is not ideal
    left: 10,
  },
  signOutButton: {
    position: 'absolute',
    width: 131,
    height: 55,
    right: 30,
    bottom: 20,
    backgroundColor: '#F2F5F7',
    borderRadius: 10,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    flex: 1,
    justifyContent: 'center',
  },
  cancelButton: {
    position: 'absolute',
    width: 131,
    height: 55,
    left: 30,
    bottom: 20,
    backgroundColor: '#F2F5F7',
    borderRadius: 10,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    flex: 1,
    justifyContent: 'center',
  },
  signOutText: {
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: 22,
    lineHeight: 29,
    textAlign: 'center',
  },
  profileImage: {
    position: 'absolute',
    width: 70,
    height: 70,
    top: 56,
    borderRadius: 35,
  },
  globeGroupContainer: {
    alignItems: 'center',
    position: 'absolute',
    width: Dimensions.get('window').width - 36,
    height: 362,
    top: 254,
    justifyContent: 'space-between',
  },
});