import React from 'react';
import PropTypes from 'prop-types';
import { Text, StyleSheet, View } from 'react-native';
import { color } from '~/styles/variables';

import i18n from '~/locale/i18n';

const styles = StyleSheet.create({
	container: {
		borderRadius: 4,
		marginTop: 2,
		paddingHorizontal: 8,
		paddingVertical: 2,
	},
	containerStandard: {
		backgroundColor: color.gray,
	},
	containerShared: {
		backgroundColor: color.greenLabel,
	},
	containerFull: {
		backgroundColor: color.yellow,
	},
	containerGoogle: {
		backgroundColor: color.blue,
	},
	containerDropbox: {
		backgroundColor: color.blue,
	},
	containerNew: {
		backgroundColor: color.greenLabel,
	},
	text: {
		color: 'white',
		fontSize: 10,
	},
});

const types = {
	standard: {
		translationDir: 'playlists.standard',
		styles: {
			container: styles.containerStandard,
		},
	},
	shared: {
		translationDir: 'playlists.shared',
		styles: {
			container: styles.containerShared,
		},
	},
	sharedByMe: {
		translationDir: 'playlists.sharedByMe',
		styles: {
			container: styles.containerShared,
		},
	},
	full: {
		translationDir: 'playlists.playlistFull',
		styles: {
			container: styles.containerFull,
		},
	},
	google: {
		translationDir: 'common.from',
		translationParam: { source: 'Google Photos' },
		styles: {
			container: styles.containerGoogle,
		},
	},
	googlePhotos: {
		translationDir: 'common.googlePhotos',
		styles: {
			container: styles.containerGoogle,
		},
	},
	googlePhotosAssign: {
		translationDir: 'common.googlePhotos',
		styles: {
			container: styles.containerGoogle,
		},
	},
	dropbox: {
		translationDir: 'common.from',
		translationParam: { source: 'Dropbox' },
		styles: {
			container: styles.containerDropbox,
		},
	},
	new: {
		translationDir: 'common.new',
		styles: {
			container: styles.containerNew,
		},
	},
};
const playlistTypeLabel = (props) => {
	const type = (props.type && types[props.type]) || types.standard;
	return (
		<View style={[styles.container, type.styles.container, props.containerStyle]}>
			<Text style={[styles.text, type.styles.text, props.textStyle]}>
				{i18n.t(type.translationDir, type.translationParam)}
			</Text>
		</View>
	);
};


playlistTypeLabel.propTypes = {
	type: PropTypes.string,
	containerStyle: PropTypes.object,
	textStyle: PropTypes.object,
};

playlistTypeLabel.defaultProps = {
	type: 'standard',
	containerStyle: {},
	textStyle: {},
};

export default playlistTypeLabel;
