import React from 'react';
import _ from 'lodash';
import {
	StyleSheet,
	View,
	TouchableOpacity,
} from 'react-native';
import { Text, NixplayIcon as Icon, color, transparentize } from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import i18n from '~/locale/i18n';

const styles = StyleSheet.create({
	headerViewStyle: {
		backgroundColor: color.mistBlue03,
		flexDirection: 'row',
		paddingLeft: 16,
		paddingRight: 16,
		justifyContent: 'space-between',
		alignItems: 'center',
	},
	headerContainer: {
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		flex: 1,
	},
	textInput: {
		display: 'none',
	},
	header: {
		flexDirection: 'column',
	},
});

export const PlayListSelectionHeader = (props) => {
	const { action, playlist, isConnected } = props;
	const buttonStyle = isConnected ? 'blue' : transparentize(color.grey04, 50);
	return (
		<View style={styles.header}>
			<View style={[styles.headerViewStyle]}>
				<Text color="mistBlue05" style={{ marginLeft: 4 }} textStyle="footnote">{ i18n.t('playlists.sendToNewPlaylist') }</Text>
			</View>
			<View style={[styles.headerViewStyle, { height: 50, backgroundColor: 'white' }]}>
				<TouchableOpacity
					style={{ justifyContent: 'center', flex: 1 }}
					onPress={action}
					disabled={!isConnected}
				>
					<View style={styles.headerContainer}>
						<Icon name="plus-thick-small" testID="PlusThick" color={buttonStyle} />
						<Text color={buttonStyle} style={{ marginLeft: 10 }}>{ i18n.t('playlists.addNewPlaylist') }</Text>
					</View>
				</TouchableOpacity>
			</View>
			{ (!_.isEmpty(playlist)) ?
				<View style={styles.headerViewStyle}>
					<Text color="mistBlue05" style={{ marginLeft: 4 }} textStyle="footnote">{ i18n.t('common.orSendTo') }</Text>
				</View> : <View />
			}
		</View>
	);
};

PlayListSelectionHeader.propTypes = {
	action: PropTypes.func.isRequired,
	playlist: PropTypes.array.isRequired,
	isConnected: PropTypes.bool.isRequired,
};
