import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import { ActionSheet, Text, NixplayIcon, Button, Dialogue } from 'nixplay-ui-kit';
import googlePlaylistIcon from '~/images/social/google-photos.png';
import PropTypes from 'prop-types';
import i18n from '~/locale/i18n';
import { config } from '~/config';

const styles = StyleSheet.create({
	actionText: {
		flexDirection: 'row',
		justifyContent: 'center',
		alignContent: 'center',

	},
	actionButton: {
		paddingHorizontal: 16,
		height: 56,
		justifyContent: 'center',
	},
	text: {
		paddingHorizontal: 5,
		textAlign: 'center',
	},
	createPlaylistCustomSheet: {
		flexDirection: 'row',
		justifyContent: 'space-evenly',
		alignItems: 'center',
		flexWrap: 'wrap',
	},
	createPlaylistSheetTitle: {
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		width: '100%',
		paddingTop: 24,
	},
	createPlaylistSheetTitleInfo: {
		marginLeft: 4,
	},
	buttonContainer: {
		alignItems: 'center',
		paddingVertical: 24,
		maxWidth: 130,
	},
	buttonTitleStyle: {
		paddingTop: 10,
		textAlign: 'center',
	},
	createPlaylistInfoText: {
		marginBottom: 20,
	},
	createPlaylistInfoTextBold: {
		marginBottom: 20,
		fontWeight: '600',
	},
});

export class OpenCreatePlaylist extends Component {
		static propTypes = {
			showAndCreatePlaylist: PropTypes.func.isRequired,
			showAndCreateAlbum: PropTypes.func.isRequired,
			showAndCreateGooglePlaylist: PropTypes.func.isRequired,
			navigateToScreen: PropTypes.func.isRequired,
		};

		constructor(props) {
			super(props);
			this.openCreatePlaylistActionSheet = () => this.createPlaylistActionSheet.open();
			this.closeCreatePlaylistActionSheet = () => this.createPlaylistActionSheet.close();
			this.openCreatePlaylistInfo = () => this.createPlaylistInfo.open();
			this.closeCreatePlaylistInfo = () => this.createPlaylistInfo.close();
		}

		pressPlaylistLearnMore = () => {
			this.createPlaylistInfo.close(() => {
				this.createPlaylistActionSheet.close(() => {
					this.props.navigateToScreen('WebView', { webViewUrl: config.urls.playlistLearnMore });
				});
			});
		}

		render() {
			return (
				<ActionSheet
					ref={(actionSheet) => {
						this.createPlaylistActionSheet = actionSheet;
					}}
				>
					<ActionSheet.Custom style={styles.createPlaylistCustomSheet}>
						<View style={styles.createPlaylistSheetTitle}>
							<Text>{i18n.t('playlists.createStandardPlaylist')}</Text>
							<TouchableOpacity
								style={styles.createPlaylistSheetTitleInfo}
								activeOpacity={0.80}
								onPress={() => this.createPlaylistInfo.open()}
							>
								<NixplayIcon name="information" testID="Information" size={16} color="textMistBlue" />
							</TouchableOpacity>
						</View>
						<View style={styles.buttonContainer} >
							<Button
								testID="Photo"
								type="circle"
								color="white"
								size="large"
								shadow="short"
								onPress={() => this.createPlaylistActionSheet.close(() => { this.props.showAndCreatePlaylist(); })}
							>
								<Button.Icon name="photos" color="blue" />
							</Button>
							<Text textStyle="caption2" style={styles.buttonTitleStyle} >{i18n.t('contents.photoLibrary')}</Text>
						</View>
						<View style={styles.buttonContainer} >
							<Button
								testID="PhotosNixplay"
								type="circle"
								color="white"
								size="large"
								shadow="short"
								onPress={this.props.showAndCreateAlbum}
							>
								<Button.Icon name="photos-nixplay" color="blue" />
							</Button>
							<Text textStyle="caption2" style={styles.buttonTitleStyle}>{i18n.t('albums.cloudAlbum')}</Text>
						</View>
					</ActionSheet.Custom>
					<ActionSheet.Custom style={styles.createPlaylistCustomSheet}>
						<View style={styles.createPlaylistSheetTitle}>
							<Text>{i18n.t('playlists.createDynamicPlaylist')}</Text>
							<TouchableOpacity
								style={styles.createPlaylistSheetTitleInfo}
								activeOpacity={0.80}
								onPress={() => this.createPlaylistInfo.open()}
							>
								<NixplayIcon name="information" testID="Information" size={16} color="textMistBlue" />
							</TouchableOpacity>
						</View>
						<View style={styles.buttonContainer}>
							<Button
								testID="CreateGooglePlaylist"
								type="circle"
								color="white"
								size="large"
								shadow="short"
								onPress={this.props.showAndCreateGooglePlaylist}
							>
								<Button.ImageIcon source={googlePlaylistIcon} />
							</Button>
							<Text textStyle="caption2" style={styles.buttonTitleStyle}>{i18n.t('playlists.createGooglePlaylist')}</Text>
						</View>
						<Dialogue
							ref={(ref) => { this.createPlaylistInfo = ref; }}
							withClose={false}
						>
							<Dialogue.Title>{i18n.t('playlists.standardVsDynamic')}</Dialogue.Title>
							<Dialogue.Additional>
								<Text style={styles.createPlaylistInfoText} textStyle="footnote" color="textGrey">{i18n.t('playlists.standardPlaylistInfo')}</Text>
								<Text textStyle="footnote" color="textGrey">{i18n.t('playlists.dynamicPlaylistInfo')}</Text>
								<Text style={styles.createPlaylistInfoTextBold} textStyle="footnote" color="grey05">{i18n.t('playlists.syncedEvery30Minutes')}</Text>
								<TouchableOpacity activeOpacity={0.80} onPress={() => this.pressPlaylistLearnMore()}>
									<Text textStyle="footnote" color="blue">{i18n.t('common.learnMore')}</Text>
								</TouchableOpacity>
							</Dialogue.Additional>
							<Dialogue.Action
								onPress={() => this.createPlaylistInfo.close()}
								color="blue"
								testID="GotIt"
							>
								{i18n.t('common.gotIt')}
							</Dialogue.Action>
						</Dialogue>
					</ActionSheet.Custom>
					<ActionSheet.Cancel>{i18n.t('common.cancel')}</ActionSheet.Cancel>
				</ActionSheet>
			);
		}
}

export default OpenCreatePlaylist;
