import React from 'react';
import { View, StyleSheet } from 'react-native';
import { ActionSheet, Button, Text } from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import PlaylistActions from '~comp/Playlists/playlistActions';
import i18n from '~/locale/i18n';

export const styles = StyleSheet.create({
	bottomButton: {
		marginTop: -30,
	},
	customSheet: {
		flexDirection: 'row',
		justifyContent: 'center',
		paddingVertical: 20,
	},
	buttonContainer: {
		alignItems: 'center',
		marginHorizontal: 22,
	},
	buttonTextStyle: {
		paddingTop: 8,
		marginHorizontal: -20,
	},
});

const SharedPlaylistActions = (props) => (
	<View>
		<ActionSheet
			ref={props.addPhotoRef}
		>
			<ActionSheet.LargeTitle>{i18n.t('contents.addPhotos')}</ActionSheet.LargeTitle>
			<ActionSheet.Custom style={styles.customSheet} borderTop={false}>
				<View style={styles.buttonContainer} >
					<Button
						testID="Photos"
						type="circle"
						color="white"
						size="large"
						shadow="short"
						onPress={props.onPhotoLibraryPressed}
					>
						<Button.Icon name="photos" color="blue" />
					</Button>
					<Text textStyle="caption2" style={styles.buttonTextStyle} >{i18n.t('contents.photoLibrary')}</Text>
				</View>
				<View style={styles.buttonContainer} >
					<Button
						testID="PhotosNixplay"
						type="circle"
						color="white"
						size="large"
						shadow="short"
						onPress={props.onCloudAlbumPressed}
					>
						<Button.Icon name="photos-nixplay" color="blue" />
					</Button>
					<Text textStyle="caption2" style={styles.buttonTextStyle}>{i18n.t('albums.cloudAlbum')}</Text>
				</View>
			</ActionSheet.Custom>
			<ActionSheet.Cancel>{i18n.t('common.cancel')}</ActionSheet.Cancel>
		</ActionSheet>
		<ActionSheet
			ref={props.playlistMoreActionSheet}
		>
			{props.playlist.feature.removeContent === true &&
				<ActionSheet.Action onPress={props.toggleSelectModePressed} testID="Select">{i18n.t('common.select')}</ActionSheet.Action>}
			{props.playlist.feature.sort === true &&
				<ActionSheet.Action onPress={props.sortPlaylistPressed} testID="Sort">{i18n.t('common.sortBy')}</ActionSheet.Action>}
			{props.isFrameOwner &&
				<ActionSheet.Action onPress={props.assignToFramePressed} testID="AssignToFrame">{i18n.t('frames.assignToFrame')}</ActionSheet.Action>}
			{props.playlist.feature.rename === true &&
				<ActionSheet.Action onPress={props.renamePlaylistPressed} testID="RenamePlaylist">{i18n.t('playlists.renamePlaylist')}</ActionSheet.Action>}
			<ActionSheet.Action onPress={props.deletePlaylistPressed} color="red" testID="DeletePlaylist">{i18n.t('playlists.deletePlaylist')}</ActionSheet.Action>
			<ActionSheet.Cancel testID="Cancel">{i18n.t('common.cancel')}</ActionSheet.Cancel>
		</ActionSheet>
		<PlaylistActions
			ref={props.playlistActionsRef}
			actions={props.actions}
			playlist={props.playlist}
			route="PlaylistContentV2"
			contentSeqChanged={props.contentSeqChanged}
		/>
	</View>
);

SharedPlaylistActions.propTypes = {
	playlist: PropTypes.object,
	addPhotoRef: PropTypes.func,
	playlistMoreActionSheet: PropTypes.func,
	onPhotoLibraryPressed: PropTypes.func,
	onCloudAlbumPressed: PropTypes.func,
	playlistActionsRef: PropTypes.func,
	assignToFramePressed: PropTypes.func,
	toggleSelectModePressed: PropTypes.func,
	sortPlaylistPressed: PropTypes.func,
	renamePlaylistPressed: PropTypes.func,
	deletePlaylistPressed: PropTypes.func,
	actions: PropTypes.array,
	contentSeqChanged: PropTypes.bool,
	isFrameOwner: PropTypes.bool,
};

SharedPlaylistActions.defaultProps = {
	playlist: {},
	addPhotoRef: () => {},
	playlistMoreActionSheet: () => {},
	onPhotoLibraryPressed: () => {},
	onCloudAlbumPressed: () => {},
	playlistActionsRef: () => {},
	assignToFramePressed: () => {},
	toggleSelectModePressed: () => {},
	sortPlaylistPressed: () => {},
	renamePlaylistPressed: () => {},
	deletePlaylistPressed: () => {},
	actions: [],
	contentSeqChanged: false,
	isFrameOwner: false,
};


export default SharedPlaylistActions;
