import React, { PureComponent } from 'react';
import {
	Image,
	TouchableOpacity,
	Platform,
	View,
	StyleSheet,
} from 'react-native';
import { Text, NixplayIcon as Icon } from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import DeviceInfo from 'react-native-device-info';
import { color, fontSizes } from '~/styles/variables';
import { isValidVideo } from '~/lib/validate';

const isiOS = Platform.OS === 'ios';
const sysVersion = parseFloat(DeviceInfo.getSystemVersion());

const styles = StyleSheet.create({
	thumbContainer: {
		justifyContent: 'space-around',
		width: 64,
		height: 56,
	},
	thumb: {
		width: 56,
		height: 56,
		borderRadius: 10,
		backgroundColor: 'black',
	},
	thumbHighlight: {
		width: 56,
		height: 56,
		borderWidth: 2,
		borderColor: color.blue,
		borderRadius: 10,
		backgroundColor: 'black',
	},
	videoIconBackground: {
		position: 'absolute',
		bottom: 5,
		left: 5,
		right: 15,
		backgroundColor: color.white,
		borderRadius: 10,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-around',
	},
	videoIcon: {
		shadowColor: color.black,
		shadowOffset: { width: 1, height: 1 },
		shadowOpacity: 0.3,
		shadowRadius: 1,
		paddingLeft: 4,
	},
	videoDuration: {
		paddingRight: 4,
		color: color.gray,
		fontSize: fontSizes.small,
	},
	invalidIconBackground: {
		position: 'absolute',
		top: 0,
		right: 3,
		backgroundColor: color.red,
		borderRadius: 12,
		flexDirection: 'column',
		alignItems: 'center',
		width: 24,
		height: 24,
		justifyContent: 'center',
	},
	invalidIcon: {
		shadowColor: color.black,
		shadowOffset: { width: 1, height: 1 },
		shadowOpacity: 0.3,
		shadowRadius: 1,
	},
});
export class AssetThumbnail extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			// fixed portrait image
			thumbnailPath: (!isiOS)
				? props.item.fullFilePath
				: props.item.uri,
			duration: `${(props.item.endTime - props.item.startTime).toFixed(0)}s`,
		};
	}

	componentWillReceiveProps(nextProps) {
		this.setState({ duration: `${(nextProps.item.endTime - nextProps.item.startTime).toFixed(0)}s` });
	}

	isVideo = () => isValidVideo(this.props.item.type);

	isAndroidVideo = () => !isiOS && this.isVideo();

	render() {
		/**
		 * Defect issue on the ios 9.3 iPad Mini for RN Image resizeMode cover
		*/
		const resizeMode = ((isiOS) && sysVersion <= 9.3) ? 'contain' : 'cover';
		const additionalStyle = ((isiOS) && sysVersion <= '9.3') ? { backgroundColor: 'black' } : {};
		return (
			<View style={styles.thumbContainer} testID={`thumb${this.props.index}`}>
				<TouchableOpacity
					onPress={() => this.props.thumbPressHandle(this.props.index)}
					onShowUnderlay={this.props.separators.highlight}
					onHideUnderlay={this.props.separators.unhighlight}
				>
					<View>
						<Image
							style={[this.props.selected ? styles.thumbHighlight : styles.thumb, additionalStyle]}
							key={this.props.item.uri}
							source={{
								uri: (this.isAndroidVideo())
									? this.props.item.fullFilePath
									: this.state.thumbnailPath,
							}}
							resizeMethod="resize"
							resizeMode={resizeMode}
						/>
						{ this.isVideo() &&
							<View style={styles.videoIconBackground}>
								<Icon
									name="video-solid"
									color="textGrey"
									style={styles.videoIcon}
									size={fontSizes.small}
								/>
								<Text textStyle="caption2" color="grey03" >{this.state.duration}</Text>
							</View>
						}
					</View>
				</TouchableOpacity>
				{ (this.props.broken) &&
					<View style={styles.invalidIconBackground}>
						<Icon
							name="invalid"
							color="textWhite"
							style={styles.invalidIcon}
							size={24}
						/>
					</View>
				}
			</View>
		);
	}
}


AssetThumbnail.propTypes = {
	item: PropTypes.object.isRequired,
	index: PropTypes.number.isRequired,
	selected: PropTypes.bool,
	thumbPressHandle: PropTypes.func,
	separators: PropTypes.object,
	broken: PropTypes.bool,
};

AssetThumbnail.defaultProps = {
	separators: {
		highlight: '#AA000000',
		unhighlight: '#AAAAAAAA',
	},
	selected: false,
	thumbPressHandle: () => {},
	broken: false,
};
