import { StyleSheet, Dimensions } from 'react-native';
import { ifIphoneX } from 'react-native-iphone-x-helper';
import { color as basicColor } from '~/styles/variables'

const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
const { height, width } = Dimensions.get('window');
const aspectRatio = height / width;

export const styles = StyleSheet.create({
	container: {
		flex: 1,
		flexDirection: 'column',
		...ifIphoneX({
			paddingBottom: 80,
		}, {
			paddingBottom: 60,
		}),
	},
	pickerContainer: {
		paddingTop: 12,
		paddingHorizontal: 16,
	},
	inputContainer: {
		paddingTop: 8,
		paddingLeft: 20,
		paddingRight: 20,
		paddingBottom: 12,
	},
	inputElement: {
		paddingBottom: 6,
		paddingLeft: 4,
	},
	confirmButton: {
		marginTop: 8,
		marginLeft: 20,
		marginRight: 20,
	},
	bottomContainer: {
		position: 'absolute',
		left: 0,
		right: 0,
		bottom: 0,
	},
	bottomSpace: {
		height: 110,
		width: '100%',
	},

	pager: {
		width: screenWidth,
		height: screenHeight,
	},
	slideContainer: {
		flex: 1,
	},
	image: {
		position: 'absolute',
		top: 0,
		left: 0,
		width: '100%',
		height: '100%',
	},
	textContainer: {
		flex: 1,
		justifyContent: 'center',
		paddingHorizontal: 36,
	},
	textTitle: {
		fontSize: 27,
		marginTop: 21,
		marginBottom: 16,
	},
	safeArea: {
		position: 'absolute',
		bottom: 0,
		width: '100%',
	},
	buttonContainer: {
		flexDirection: 'column',
		paddingHorizontal: 18,
		paddingTop: 25,
		paddingBottom: 14,
	},
	button: {
		borderRadius: 4,
	},
	signupButton: {
		marginRight: 0,
		backgroundColor: basicColor.wrikeGreen2,
	},
	loginButton: {
		marginTop: 8,
		backgroundColor: basicColor.wrikeBg,
	},
	pagerDots: {
		flexDirection: 'row',
		justifyContent: 'center',
	},
	dots: {
		width: 8,
		height: 8,
		borderRadius: 4,
		marginHorizontal: 4,
	},
	mainBg: {
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'center',
		paddingHorizontal: 18,
	},
	mainText: {
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'center',
		marginHorizontal: 18,
		marginTop: 50,
	},
	mainTagline: {
		flex: .4,
		flexDirection: 'row',
		justifyContent: 'center',
		paddingHorizontal: 18,
	},
	checkboxContainer: {
		flexDirection: 'row',
		marginTop: 20,
		justifyContent: 'center',
		alignItems: 'center',
		marginHorizontal: (aspectRatio > 1.775) ? 0 : 10,
	},
	checkbox: {
		marginRight: 10,
	},
	checkboxLabel: {
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		flexWrap: 'wrap',
		marginHorizontal: 18,
	},
	checkboxLabelLink: {
		textDecorationLine: 'underline',
		color: basicColor.gitlabGray4
	},

});
