import { Dimensions } from 'react-native';

const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;

// Calculating ratio from iPhone breakpoints
export const ratioX = deviceWidth < 375 ? (deviceWidth < 320 ? 0.75 : 0.875) : 1 ;
export const ratioY = deviceHeight < 568 ? (deviceHeight < 480 ? 0.75 : 0.875) : 1 ;

// Set our base font size value
const base_unit = 16;

// Simulating EM by changing font size according to Ratio
const unit = base_unit * ratioX;

export default function em(value) {
  return (unit * value);
}

import { Dimensions, StyleSheet, Platform } from 'react-native';

import em from './calculateSize';

const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;

export const colors = {
  gray: '#888888',
};

export default StyleSheet.create({
  //
  // STATICS
  //
  DEVICE_WIDTH: deviceWidth,
  DEVICE_HEIGHT: deviceHeight,
  RATIO_X: em.ratioX,
  RATIO_Y: em.ratioY,
  UNIT: em(1),
  PADDING: em(1.25),
  
  FONT_SIZE: em(1),
  FONT_SIZE_SMALLER: em(0.75),
  FONT_SIZE_SMALL: em(0.875),
  FONT_SIZE_TITLE: em(1.25),
  //
  // REACT-NATIVE-ROUTER-FLUX
  //
  navigationBarStyle: {
    backgroundColor: '#dd2c00',
    borderBottomWidth: 0,
  },
  navTitleStyle: {
    color: 'white',
  },
  navBarButton: {
    position: 'absolute',
    top: 10,
  },
  navBarLeftButton: {
    left: 10
  },
  navBarrightButton: {
    right: 10
  },
  //
  // GENERALS
  //
  testShit: {
    borderColor: 'red',
    borderWidth: 2
  },
  centerEverything: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  authContainer: {
    flex: 1,
    paddingTop: 50,
  },
  bitOfTransparent: {
    backgroundColor: 'rgba(0,0,0,.5)'
  },
  //
  // AUTHS
  //
  spanImage: {
    height: deviceHeight,
    width: deviceWidth,
  },
  statusBarSpan: {
    width: deviceWidth,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    top: 20,
    paddingLeft: 15,
    paddingRight: 15,
    position: 'absolute'
  },
  residentValetUpperContainer: {
    flex: .25,
    width: deviceWidth*0.8
  },
  residentValetBottomContainer: {
    flex: .75,
    width: deviceWidth,
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingBottom: 20
  },
  residentValetBottomContainerField: {
    justifyContent: 'flex-start'
  },
  residentValetText: {
    fontSize: em(1)*1.5,
    letterSpacing: 10,
    textAlign: 'center',
    color: '#fff',
    backgroundColor: 'transparent',
  },
  residentValetDesc: {
    fontSize: em(1)*1.25,
    letterSpacing: 0,
    flexWrap: 'wrap'
  },
  helLight: {
    fontFamily: 'HelveticaNeue-Light',
  },
  loginButton: {
    flexDirection: 'row',
    width: deviceWidth*0.9,
    height: 50,
    backgroundColor: 'transparent',
    borderColor: '#fff',
    borderWidth: 1,
    borderRadius: 3,
  },
  loginButtonText: {
    fontSize: em(1),
    color: '#fff',
    paddingLeft: 10,
  },
  policyText: {
    fontSize: em(0.85),
    color: '#fff',
    backgroundColor: 'transparent'
  },
  nextButtonText: {
    fontSize: em(1.25),
    fontWeight: '500',
    backgroundColor: 'transparent'
  },
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        marginTop: 64
      },
      android: {
        paddingTop: 54
      }
    })
  }
})