import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import {
	StyleSheet,
	View,
	Platform,
} from 'react-native';
import {
	Text,
	Button,
	Thumbnail,
} from 'nixplay-ui-kit';
import {
	// analytics,
	debounceWrapper,
} from '~/lib/utils';
import FastImage from 'react-native-fast-image';
import { color } from '~/styles/variables';
import i18n from '~/locale/i18n';
import * as Animatable from 'react-native-animatable';

const ButtonEx = debounceWrapper(Button);

const styles = StyleSheet.create({
	thumbnail: {
		position: 'absolute',
		borderRadius: 6,
		height: 170,
		width: '100%',
	},
	text: {
		color: color.textGrey,
		textAlign: 'center',
	},
	container: {
		flex: 1,
		height: 170,
		margin: 10,
		borderRadius: 6,
		alignItems: 'center',
		justifyContent: 'center',
		backgroundColor: color.white,
		...Platform.select({
			ios: {
				shadowColor: '#7998A5',
				shadowOffset: {
					width: 0,
					height: 6,
				},
				shadowOpacity: 0.20,
				shadowRadius: 6,

				elevation: 2,
			},
			android: {
				elevation: 15,
			},
		}),
	},
	outerContainer: {
		height: 170,
		width: '100%',
		// backgroundColor: color.white,
		borderRadius: 6,
	},
	buttonContainer: {
		width: '100%',
		marginTop: 20,
		paddingHorizontal: 20,
		justifyContent: 'center',
		flexDirection: 'row',
	},
	innerContainer: {
		height: '100%',
		width: '100%',
		borderRadius: 6,
		alignItems: 'center',
		justifyContent: 'center',
		// backgroundColor: color.lighten(color.mistBlue01, 1),
	},
	acceptButton: {
		flex: 1,
		alignSelf: 'flex-start',
		paddingHorizontal: 25,
		alignItems: 'center',
		justifyContent: 'center',
		marginHorizontal: 10,
		marginRight: 5,
	},
	acceptButtonDisabled: {
		borderColor: color.grey03,
		backgroundColor: color.grey03,
	},
	declineButton: {
		flex: 1,
		alignSelf: 'flex-start',
		paddingHorizontal: 25,
		alignItems: 'center',
		justifyContent: 'center',
		marginHorizontal: 10,
		marginLeft: 5,
	},
	declineButtonDisabled: {
		borderColor: color.grey03,
		backgroundColor: color.white,
	},
});

const sharedPlaylistInvite = ({
	playlistName,
	ownerFirstName,
	ownerLastName,
	imageURL,
	isConnected,
	acceptSharedPlaylistInvite,
	rejectSharedPlaylistInvite,
}) => (
	<Animatable.View animation="zoomIn" duration={200} useNativeDriver style={[styles.container]}>
		{ !_.isEmpty(imageURL) && <Thumbnail
			style={styles.thumbnail}
			source={{
				uri: imageURL || null,
				cache: FastImage.cacheControl.web,
			}}
			resizeMode={FastImage.resizeMode.cover}
		/> }
		<View
			style={{
				flex: 1,
				padding: 10,
				position: 'absolute',
				width: '100%',
				height: '100%',
			}}
		>
			<View
				style={{
					opacity: 0.8,
					width: '100%',
					height: '100%',
					borderRadius: 6,
					backgroundColor: color.white,
				}}
			/>
		</View>
		<Text textStyle="body" color={color.textGrey} style={[styles.text]} >{i18n.t('playlists.playlistInvited', { ownerFullname: `${ownerFirstName} ${ownerLastName}` })}</Text>
		<Text textStyle="body" numberOfLines={2} ellipsizeMode="tail" color={color.textGrey} style={[styles.text, { paddingHorizontal: 12, width: '85%' }]}>{(playlistName === 'My Playlist') ? `"${ownerFirstName}'s Playlist"` : `"${playlistName}"`}</Text>
		<View style={[styles.buttonContainer]}>
			<ButtonEx
				testID="accept_playlist_invite"
				type="primary"
				disabled={!isConnected}
				color="blue"
				shadow="long"
				style={[styles.acceptButton, !isConnected && styles.acceptButtonDisabled]}
				onPress={acceptSharedPlaylistInvite}
			>
				<Button.Text style={{ padding: 2, marginRight: -5 }} >
					<Button.Icon color="white" name="checkbox-circle-o" />
				</Button.Text>
				<Button.Text adjustsFontSizeToFit minimumFontScale={0.5} textStyle="title3">{i18n.t('common.accept')}</Button.Text>
			</ButtonEx>
			<ButtonEx
				testID="reject_playlist_invite"
				type="secondary"
				disabled={!isConnected}
				color={(isConnected) ? 'red' : color.grey03}
				shadow="long"
				style={[styles.declineButton, !isConnected && styles.declineButtonDisabled]}
				onPress={rejectSharedPlaylistInvite}
			>
				<Button.Text style={{ padding: 2, marginRight: -5, transform: [{ rotate: '-45deg' }] }} >
					<Button.Icon color={(isConnected) ? 'red' : color.grey03} name="plus-circle-o" />
				</Button.Text>
				<Button.Text adjustsFontSizeToFit minimumFontScale={0.5} textStyle="title3">{i18n.t('common.decline')}</Button.Text>
			</ButtonEx>
		</View>
	</Animatable.View>
);

sharedPlaylistInvite.propTypes = {
	playlistName: PropTypes.string,
	ownerFirstName: PropTypes.string,
	ownerLastName: PropTypes.string,
	imageURL: PropTypes.string,
	isConnected: PropTypes.bool.isRequired,
	acceptSharedPlaylistInvite: PropTypes.func,
	rejectSharedPlaylistInvite: PropTypes.func,
};

sharedPlaylistInvite.defaultProps = {
	playlistName: '',
	ownerFirstName: '',
	ownerLastName: '',
	imageURL: '',
	rejectSharedPlaylistInvite: () => {},
	acceptSharedPlaylistInvite: () => {},
};

export default sharedPlaylistInvite;
