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

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

const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;

const horizontalScale = (size: number) => (width / guidelineBaseWidth) * size;
const verticalScale = (size: number) => (height / guidelineBaseHeight) * size;
const moderateScale = (size: number, factor = 0.5) =>
  size + (horizontalScale(size) - size) * factor;

const styles = StyleSheet.create({
  marginBottom: {
    marginBottom: verticalScale(15),
  },
  bigMarginBottom: {
    marginBottom: verticalScale(30),
  },
  extremeMarginBottom: {
    marginBottom: verticalScale(100),
  },
  padding: {
    padding: '5%',
  },
  smallPaddingHorizontal: {
    paddingHorizontal: '2.5%',
  },
  centered: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  centeredVertical: {
    alignItems: 'center',
  },
  centerText: {
    textAlign: 'center',
  },
  flexRow: {
    flexDirection: 'row',
  },
  flexRowSpaceBetween: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  flexRowReverse: {
    flexDirection: 'row-reverse',
  },
});

export { horizontalScale, verticalScale, moderateScale, styles as default };