import React from 'react';
import {
	View,
	StyleSheet,
	TouchableOpacity,
} from 'react-native';
import PropTypes from 'prop-types';
import { Text, NixplayIcon, AnimatedIcon } from 'nixplay-ui-kit';
import { color, transparentize } from '~/styles/variables';

const styles = StyleSheet.create({
	container: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	margin: {
		marginRight: 2,
	},
	textWithShadow: {
		textShadowRadius: 4,
		textShadowOffset: { width: 0, height: 2 },
		textShadowColor: transparentize(color.black, 50),
	},
	textBigger: {
		fontSize: 16,
		lineHeight: 20,
	},
});

const Element = (props) => (
	<View style={styles.container}>
		{props.index > 0 && props.withDot &&
			<NixplayIcon name="dot" testID="Dot" size={props.iconSize} color="grey03" style={styles.margin} />}
		{props.icon !== '' && !props.spin &&
			<NixplayIcon
				name={props.icon}
				testID={props.icon}
				size={props.iconSize}
				color={props.isGoogle ? color.textGrey : props.color}
				style={styles.margin}
			/>
		}
		{props.icon !== '' && props.spin &&
			<AnimatedIcon
				name={props.icon}
				size={props.iconSize}
				color={props.isGoogle ? color.textGrey : props.color}
			/>
		}
		<Text
			textStyle={props.textStyle}
			color={props.isGoogle ? color.textGrey : props.color}
			style={[styles.margin, !props.isGoogle && styles.textWithShadow, props.bigger && styles.textBigger]}
		>
			{props.text}
		</Text>
	</View>
);

Element.propTypes = {
	// index: PropTypes.number.isRequired,
	icon: PropTypes.string,
	color: PropTypes.string,
	text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
	spin: PropTypes.bool,
	isGoogle: PropTypes.bool,
	iconSize: PropTypes.number,
	index: PropTypes.number,
	withDot: PropTypes.bool,
	textStyle: PropTypes.any,
	bigger: PropTypes.bool,
};

Element.defaultProps = {
	bigger: false,
	icon: '',
	color: 'white',
	text: '',
	spin: false,
	isGoogle: false,
	iconSize: 16,
	withDot: false,
	index: 0,
	textStyle: 'caption1',
};

export const ContentCount = (props) => (
	<View {...props} style={[styles.container, { ...props.containerStyle }]}>
		{props.counts.map((count, index) => (typeof count.onPress === 'function' ? (
			<TouchableOpacity onPress={count.onPress} key={count.icon}>
				<Element {...count} iconSize={props.iconSize} textStyle={props.textStyle} isGoogle={props.isGoogle} index={index} />
			</TouchableOpacity>
		) : (
			<Element
				key={count.icon}
				{...count}
				iconSize={props.iconSize}
				textStyle={props.textStyle}
				withDot={props.withDot}
				isGoogle={props.isGoogle}
				index={index}
				bigger={props.bigger}
			/>
		)))}
	</View>
);

ContentCount.propTypes = {
	counts: PropTypes.array,
	isGoogle: PropTypes.bool,
	iconSize: PropTypes.number,
	containerStyle: PropTypes.any,
	withDot: PropTypes.bool,
	textStyle: PropTypes.any,
	bigger: PropTypes.bool,
};

ContentCount.defaultProps = {
	bigger: false,
	counts: [],
	isGoogle: false,
	withDot: false,
	iconSize: 16,
	textStyle: 'caption1',
	containerStyle: {},
};
