import React from 'react';
import {
	View,
	Modal,
	Dimensions,
	Image,
	TouchableOpacity,
	StyleSheet,
} from 'react-native';
import {
	Text,
	NixplayIcon,
	Button,
} from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import i18n from '~/locale/i18n';
import { basicColor, color } from '~/styles/variables';

const { width, height } = Dimensions.get('window');
const bigText = Math.floor(width * 0.047);
const smallText = Math.floor(width * 0.036);
const lineHeight = Math.floor(width * 0.038);
const innerViewHeight = (height / width) < 2 ? 0.75 : 0.58;

const styles = StyleSheet.create({
	styles: {
		flex: 1,
		flexDirection: 'column',
		margin: 0,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'rgba(100,100,100, 0.5)',
	},
	innerView: {
		width: width * 0.8,
		height: height * innerViewHeight,
		borderRadius: 15,
		overflow: 'hidden',
	},
	innerViewBanner: {
		flex: 5,
		borderTopLeftRadius: 15,
		borderTopRightRadius: 15,
		overflow: 'hidden',
		zIndex: 1,
	},
	closeIcon: {
		position: 'absolute',
		right: 15,
		top: 15,
		zIndex: 2,
	},
	bannerImage: {
		width: '100%',
		height: '100%',
		overflow: 'hidden',
	},
	innerViewBody: {
		flex: 3,
		backgroundColor: basicColor.white,
		flexDirection: 'column',
		justifyContent: 'space-around',
		alignItems: 'center',
		paddingVertical: 10,
		paddingHorizontal: 20,
		letterSpacing: 0,
	},
	titleText: {
		fontWeight: 'bold',
		fontSize: bigText,
		textAlign: 'center',
	},
	bodyText: {
		fontSize: smallText,
		textAlign: 'center',
		lineHeight,
	},
	innerViewButtons: {
		flex: 2,
		backgroundColor: basicColor.white,
		borderBottomLeftRadius: 15,
		borderBottomRightRadius: 15,
		flexDirection: 'column',
		alignItems: 'center',
		justifyContent: 'space-around',
	},
	buttonOkay: {
		height: '35%',
		width: '75%',
	},
	buttonOkayText: {
		fontSize: smallText,
		fontWeight: 'bold',
		color: basicColor.white,
	},
	buttonLater: {
		height: '40%',
		width: '75%',
		backgroundColor: basicColor.white,
		borderWidth: 0,
		borderColor: basicColor.white,
		marginBottom: 10,
	},
	buttonLaterText: {
		fontSize: smallText,
		color: color.blue,
	},
});

const SharedPlaylistOnboardingModal = (props) => {
	const {
		image,
		visible,
		onDiscover,
		onLater,
	} = props;
	return (
		<Modal
			animationType="fade"
			onRequestClose={() => {}}
			transparent
			visible={visible}
		>
			<View style={styles.styles}>
				<View style={styles.innerView}>
					<View style={styles.innerViewBanner}>
						<NixplayIcon
							name="close-thick"
							testId="close-thick"
							size={16}
							style={styles.closeIcon}
							color={basicColor.white}
							onPress={onLater}
						/>
						<TouchableOpacity onPress={onLater}>
							<Image
								style={styles.bannerImage}
								source={image}
							/>
						</TouchableOpacity>
					</View>
					<View style={styles.innerViewBody}>
						<View>
							<Text style={styles.titleText}>
								{i18n.t('playlists.introducingSharedPlaylistTitle')}
							</Text>
						</View>
						<View>
							<Text style={styles.bodyText}>{i18n.t('playlists.introducingSharedPlaylistBody')}</Text>
						</View>
					</View>
					<View style={styles.innerViewButtons}>
						<Button style={styles.buttonOkay} onPress={onDiscover}>
							<Text style={styles.buttonOkayText}>{i18n.t('playlists.introducingSharedPlaylistDiscoverNow')}</Text>
						</Button>
						<Button style={styles.buttonLater} onPress={onLater}>
							<Text style={styles.buttonLaterText}>{i18n.t('playlists.introducingSharedPlaylistDiscoverLater')}</Text>
						</Button>
					</View>
				</View>
			</View>
		</Modal>
	);
};

SharedPlaylistOnboardingModal.propTypes = {
	image: PropTypes.any.isRequired,
	visible: PropTypes.bool.isRequired,
	onDiscover: PropTypes.func.isRequired,
	onLater: PropTypes.func.isRequired,
};

export default SharedPlaylistOnboardingModal;
