import { StyleSheet, Dimensions } from 'react-native';
import { ifIphoneX, getBottomSpace } from 'react-native-iphone-x-helper';
import { color } from 'nixplay-ui-kit';

export const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: color.white,
	},
	bottomContainer: {
		position: 'absolute',
		left: 0,
		right: 0,
		bottom: 0,
	},
	listContainer: {
		paddingBottom: 54,
	},
	listItem: {
		marginLeft: 20,
		marginRight: 20,
	},
	friendsContainer: {
		flex: 1,
	},
	separator: {
		height: 0.5,
		backgroundColor: color.mistBlue03,
	},
	scrollViewContainer: {
		flexDirection: 'column',
		...ifIphoneX({
			paddingBottom: 80,
		}, {
			paddingBottom: 60,
		}),
	},
	createNewButton: {
		height: 56,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		position: 'absolute',
		left: 0,
	},
	createNewIcon: {
		marginRight: 12,
	},
	selectButton: {
		height: 56,
		flexDirection: 'row',
		alignItems: 'center',
		position: 'absolute',
		right: 0,
	},
	footerContainer: {
		height: 46,
		marginBottom: 68,
		padding: 0,
	},
	footerText: {
		fontSize: 12,
		color: '#02ADF0',
	},
	headerViewStyle: {
		backgroundColor: color.mistBlue03,
		flexDirection: 'row',
		paddingLeft: 16,
		paddingRight: 16,
		justifyContent: 'space-between',
		alignItems: 'center',
	},
	headerContainer: {
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		flex: 1,
	},
	textInput: {
		display: 'none',
	},
	header: {
		flexDirection: 'column',
	},
	// container: {
	// 	height: 38,
	// 	paddingLeft: 12,
	// 	paddingRight: 8,
	// 	flexDirection: 'row',
	// 	alignItems: 'center',
	// 	borderWidth: 1,
	// 	borderRadius: 4,
	// 	borderColor: color.mistBlue03,
	// 	backgroundColor: color.white,
	// },
	input: {
		flex: 1,
	},
	modalFullscreen: {
		flex: 1,
		backgroundColor: color.white,
	},
	flatListFullscreen: {
		flexGrow: 1,
		justifyContent: 'flex-start',
		marginBottom: getBottomSpace(),
	},
	shadow: {
		// maxHeight: '66%',
		shadowOffset: { width: 0, height: 16 },
		shadowColor: color.mistBlue03,
		shadowOpacity: 0.8,
		shadowRadius: 24,
		borderRadius: 12,
		elevation: 7,
	},
	dialogue: {
		width: 300,
		backgroundColor: color.white,
		borderRadius: 12,
		shadowOffset: { width: 0, height: 4 },
		shadowColor: color.mistBlue05,
		shadowOpacity: 0.1,
		shadowRadius: 8,
	},
	modalTitle: {
		borderBottomWidth: 1,
		borderColor: color.mistBlue03,
	},
	modalTitleText: {
		textAlign: 'center',
		paddingTop: 16,
		paddingBottom: 12,
		paddingHorizontal: 16,
	},
	option: {
		flexDirection: 'column',
		alignItems: 'center',
		paddingVertical: 15,
		marginHorizontal: 16,
		borderBottomWidth: 1,
		borderColor: color.mistBlue03,
	},
	lastOption: {
		borderBottomWidth: 0,
	},
	optionLabel: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
	},
	optionLabelCenter: {
		marginLeft: 16,
		marginRight: 28,
	},
	optionIcon: {
		marginLeft: 4,
	},
	closeButton: {
		height: 55,
		justifyContent: 'center',
		borderTopWidth: 1,
		borderTopColor: color.mistBlue03,
	},
	closeText: {
		textAlign: 'center',
	},
	locationPickerTextBox: {
		backgroundColor: 'rgba(250, 250, 250, 0.96)',
	},
	locationPickerList: {
		width: Dimensions.get('window').width - 30,
		margin: 15,
	},
	customSheet: {
		flexDirection: 'row',
		justifyContent: 'center',
		paddingVertical: 20,
	},
	buttonContainer: {
		alignItems: 'center',
		marginHorizontal: 22,
	},
	buttonTextStyle: {
		paddingTop: 8,
		marginHorizontal: -20,
	},
	actionSheetTitle: {
		textAlign: 'center',
		paddingVertical: 24,
	},
	avatarContainer: {
		width: 300,
		height: 300,
		aspectRatio: 1,
		marginRight: 10,
		backgroundColor: 'black',
	},
	thumb: {
		flex: 1,
		margin: 1,
	},
});
