import React from 'react';
import _ from 'lodash';
import {
	ActivityIndicator,
	Dimensions,
	View,
	StyleSheet,
	// Platform,
	// TouchableOpacity,
} from 'react-native';
import { color, Image } from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import Video from 'react-native-video';
import { TapGestureHandler, State } from 'react-native-gesture-handler';
import Reanimated from 'react-native-reanimated';

import playButton from '~/images/general/play-button.png';
import PhotoContent from './PhotoContent';

const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

const styles = StyleSheet.create({
	container: {
		width: screenWidth,
		height: screenHeight,
		justifyContent: 'center',
		alignItems: 'center',
	},
	image: {
		flex: 1,
	},
	playButtonContainer: {
		position: 'absolute',
		left: (screenWidth / 2) - 50,
		top: (screenHeight / 2) - 50,
		bottom: 0,
		right: 0,
		width: 100,
		height: 100,
		justifyContent: 'center',
		alignItems: 'center',
		padding: 8,
		zIndex: 2000,
	},
	playButton: {
		flex: 1,
		width: 52,
		height: 52,
	},
});

// const isIOS = Platform.OS === 'ios';
// const isAndroid = Platform.OS === 'android';

const bufferConfig = {
	minBufferMs: 5000,
	maxBufferMs: 15000,
	bufferForPlaybackMs: 2000,
	bufferForPlaybackAfterRebufferMs: 5000,
};

export default class VideoContent extends React.Component {
	static propTypes = {
		index: PropTypes.number.isRequired,
		item: PropTypes.object.isRequired,
		onVideoPlay: PropTypes.func,
		onVideoPause: PropTypes.func,
		onVideoError: PropTypes.func,
		onImageLoad: PropTypes.func,
	}

	static defaultProps = {
		onImageLoad: () => { },
		onVideoPlay: () => { },
		onVideoPause: () => { },
		onVideoError: () => { },
	}

	constructor(props) {
		super(props);

		this.state = {
			currentTime: 0,
			isVideoMounted: false,
			isVideoLoading: false,
			isVideoReady: false,
			paused: true,
		};
	}

	componentDidUpdate(prevProps) {
		if (!_.isEqual(prevProps, this.props)) {
			// eslint-disable-next-line react/no-did-update-set-state
			this.setState({ paused: true }, () => {
				if (this.player !== undefined) {
					this.player.seek(0);
				}
			});
		}
	}

	onPreviewLoad = (e) => {
		const { onImageLoad } = this.props;
		onImageLoad(e);
	}

	// onBuffer = () => {
	// 	this.setState({ isVideoBuffering: true });
	// }

	onEnd = () => {
		this.setState({ paused: true, currentTime: 0 }, () => {
			if (this.player !== undefined) {
				this.player.seek(0);
			}
		});
	}

	onLoadStart = () => {
		this.setState({ isVideoLoading: true });
	}

	onLoad = () => {
		this.player.seek(0);
		this.setState({ isVideoLoading: false });
	}

	onProgress = ({ currentTime }) => {
		this.setState({ currentTime });
	}

	pauseVideo = () => {
		this.setState({ paused: true }, () => {
			this.props.onVideoPause();
		});
	}

	playVideo = () => {
		this.setState({ paused: !this.state.paused, isVideoMounted: true }, () => {
			this.props.onVideoPlay(this.pauseVideo);
		});
		if (this.player !== undefined) {
			if (_.isEqual(this.state.currentTime, 0)) {
				this.player.seek(this.state.currentTime);
			}
		}
	}

	render() {
		const {
			isVideoMounted,
			isVideoReady,
			isVideoLoading,
			paused,
		} = this.state;
		const { item, index } = this.props;
		const isLoading = isVideoLoading;
		return (
			<View style={styles.container}>
				{!isVideoReady &&
				<View style={{ position: 'absolute', zIndex: 1000 }}>
					<PhotoContent
						item={item}
						index={index}
						onImageLoad={this.onPreviewLoad}
					/>
				</View>
				}
				{isVideoMounted &&
				<TapGestureHandler
					enabled={!paused}
					onHandlerStateChange={({ nativeEvent }) => {
						if (State.ACTIVE === nativeEvent.state) {
							this.pauseVideo();
						}
					}}
				>
					<Reanimated.View
						style={{ height: screenHeight, width: screenWidth }}
					>
						<Video
							ref={(ref) => {
								this.player = ref;
							}}
							style={{ flex: 1 }}
							bufferConfig={bufferConfig}
							paused={paused}
							source={{ uri: this.props.item.videoUrl, isAssets: false }}
							// onBuffer={this.onBuffer}
							onLoad={this.onLoad}
							onEnd={this.onEnd}
							onError={this.props.onVideoError}
							onProgress={this.onProgress}
							onLoadStart={this.onLoadStart}
							onReadyForDisplay={() => { this.setState({ isVideoReady: true }); }}
							resizeMode="contain"
							useTextureView
						/>
					</Reanimated.View>
				</TapGestureHandler>
				}
				{paused &&
				<TapGestureHandler
					enabled={paused}
					onHandlerStateChange={({ nativeEvent }) => {
						if (State.ACTIVE === nativeEvent.state) {
							this.playVideo();
						}
					}}
				>
					<Reanimated.View
						style={styles.playButtonContainer}
					>
						<Image
							source={playButton}
							style={styles.playButton}
							androidScaleType="center"
							resizeMode="contain"
						/>
					</Reanimated.View>
				</TapGestureHandler>
				}
				{isLoading &&
					<View style={styles.playButtonContainer}>
						<ActivityIndicator size="large" color={color.blue} />
					</View>
				}
			</View>
		);
	}
}
