import React from 'react';
import PropTypes from 'prop-types';

import {
	StyleSheet,
	View,
	Platform,
} from 'react-native';
import {
	Text,
	Button,
	NixplayIcon,
} from 'nixplay-ui-kit';
import { color } from '~/styles/variables';
import i18n from '~/locale/i18n';

const styles = StyleSheet.create({
	container: {
		flex: 1,
		height: 170,
		margin: 10,
		borderRadius: 6,
		alignItems: 'center',
		justifyContent: 'center',
		backgroundColor: color.mistBlue01,
		...Platform.select({
			ios: {
				shadowColor: '#7998A5',
				shadowOffset: {
					width: 0,
					height: 6,
				},
				shadowOpacity: 0.20,
				shadowRadius: 6,

				elevation: 2,
			},
			android: {
				elevation: 15,
			},
		}),
	},
	unsharedPlaylist: {
		position: 'absolute',
		left: 0,
		right: 0,
		top: 0,
		bottom: 0,
		borderRadius: 6,
		alignItems: 'center',
		justifyContent: 'center',
		padding: 12,
	},
	playlistIconContainer: {
		position: 'absolute',
		top: 10,
		left: 10,
		right: 10,
		bottom: 10,
		borderRadius: 6,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: color.white,
		opacity: 0.8,
	},
	button: {
		margin: 20,
		paddingHorizontal: 25,
		backgroundColor: color.white,
	},
	buttonDisabled: {
		borderColor: color.grey03,
		backgroundColor: color.white,
	},
	text: {
		color: color.textGrey,
		textAlign: 'center',
	},
});

const unsharedPlaylist = ({
	playlistName, onPress, disabled,
}) => (
	<View style={styles.container}>
		<View style={styles.playlistIconContainer} pointerEvents="none">
			<NixplayIcon name="playlist" testID="playlist" size={30} color={color.mistBlue03} />
		</View>
		<View style={[styles.thumbContainer, styles.unsharedPlaylist]}>
			<Text textStyle="body" ellipsizeMode="tail" numberOfLines={2} color={color.textGrey} style={[styles.text, { width: '85%' }]}>{`"${playlistName}"`}</Text>
			<Text textStyle="body" color={color.textGrey}>{i18n.t('playlists.isUnavailable')}</Text>
			<Button
				testID="ShopUrl"
				type="secondary"
				color={(disabled) ? color.grey03 : 'red'}
				shadow="long"
				style={[styles.button, disabled && styles.buttonDisabled]}
				onPress={onPress}
				disabled={disabled}
			>
				<Button.Text style={{ padding: 2, marginRight: -5, transform: [{ scale: 0.9 }, { rotate: '45deg' }] }} >
					<Button.Icon color={(disabled) ? color.grey03 : 'red'} name="plus-circle-o" />
				</Button.Text>
				<Button.Text adjustsFontSizeToFit minimumFontScale={0.5} textStyle="title3">{i18n.t('common.remove')}</Button.Text>
			</Button>
		</View>
	</View>
);

unsharedPlaylist.propTypes = {
	playlistName: PropTypes.string,
	onPress: PropTypes.func,
	disabled: PropTypes.bool,
};

unsharedPlaylist.defaultProps = {
	playlistName: '',
	onPress: () => {},
	disabled: false,
};

export default unsharedPlaylist;
