/*
Deprecated
but lot of useful implementation here
animation icon, progress view
*/
import React, { Component } from 'react';
import { Image, TouchableOpacity, StyleSheet } from 'react-native';
// import { NixplayIcon as Icon } from 'nixplay-ui-kit';
import RNNixplayCore from 'react-native-nixplay-core';
// import * as Animatable from 'react-native-animatable';
import PropTypes from 'prop-types';
// import * as Progress from 'react-native-progress';
// import { ToasterService } from 'nixplay-ui-kit';
import icon from '~/images/home/icon.gif';
import { deprecate } from 'util';
// import i18n from '~/locale/i18n';

export const styles = StyleSheet.create({
	headerViewParent: {
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		width: 30,
		height: 30,
	},
	headerViewChild: {
		flex: 1,
		position: 'absolute',
		flexDirection: 'column',
		justifyContent: 'center',
		alignItems: 'center',
		alignSelf: 'center',
	},
});
@deprecate
export default class NavBarProgressView extends Component {
	static propTypes = {
		onPress: PropTypes.func,
	}
	static defaultProps = {
		onPress: () => {},
	}
	constructor(props) {
		super(props);
		this.state = {
			showUploadIndicator: false,
			// indeterminate: false,
			// progress: 0,
		};
		this.nixplayCoreCompletedListener = this.nixplayCoreCompletedListener.bind(this);
		this.nixplayCoreProgressListener = this.nixplayCoreProgressListener.bind(this);
		// this.nixplayCoreErrorListener = this.nixplayCoreErrorListener.bind(this);
		// this.bounce = this.bounce.bind(this);
	}

	componentDidMount() {
		RNNixplayCore.addListener('progress', this.nixplayCoreProgressListener);
		RNNixplayCore.addListener('completed', this.nixplayCoreCompletedListener);
		// RNNixplayCore.addListener('error', this.nixplayCoreErrorListener);
		// this.bounce();
	}

	componentWillUnmount() {
		RNNixplayCore.removeListener('progress', this.nixplayCoreProgressListener);
		RNNixplayCore.removeListener('completed', this.nixplayCoreCompletedListener);
		// RNNixplayCore.removeListener('error', this.nixplayCoreErrorListener);
	}

	nixplayCoreCompletedListener = (data) => {
		if (data.event === RNNixplayCore.didFinishUploading) {
			this.setState({ showUploadIndicator: false });
			// ToasterService.toast({ text: i18n.t('uploadMonitor.elapsed') });
		} else if (data.event === RNNixplayCore.didFinishUploadingWithError) {
			this.setState({ showUploadIndicator: false });
		}
	}
	nixplayCoreProgressListener = () => {
		if (!this.state.showUploadIndicator) {
			this.setState({ showUploadIndicator: true });
			// ToasterService.toast({
			// 	text: i18n.t('contents.uploadBegin'),
			// });
		}
	}
	// nixplayCoreProgressListener = (data) => {
	// 	if (data.event === RNNixplayCore.uploadingWithBytesSent) {
	// 		this.setState((state) => {
	// 			const itemProgress = (data.bytesSent / data.totalBytes);
	// 			const progress = ((itemProgress + data.currentIndex) / data.total);
	// 			if (!state.showUploadIndicator) {
	// 				return {
	// 					showUploadIndicator: true,
	// 					progress,
	// 				};
	// 			} else if (progress === 0) {
	// 				return { indeterminate: true };
	// 			}
	// 			return { progress };
	// 		});
	// 	}
	// }
	// nixplayCoreErrorListener = (data) => {
	//	console.log('nixplayCoreErrorListener', data);
	// }

	render() {
		return (
			<TouchableOpacity
				style={styles.headerViewParent}
				onPress={() => {
					if (this.state.showUploadIndicator) {
						this.props.onPress();
					}
				}}
			>
				{/* { this.state.showUploadIndicator &&
					<Progress.Circle
						style={styles.headerViewChild}
						size={34}
						progress={this.state.progress}
						indeterminate={this.state.indeterminate}
					/>
				} */}
				{
					this.state.showUploadIndicator &&
					<Image style={{ width: 22, height: 22 }}source={icon} />
				}
				{/* {
					this.state.showUploadIndicator &&
					<Animatable.Text
						animation={
							{
								from: {
									translateY: -8,
								},
								to: {
									translateY: 0,
								},
							}
						}
						iterationCount="infinite"
						direction="alternate"
					>
						<Icon
							style={[styles.headerViewChild]}
							name="upload"
							size={22}
							color="blue"
						/>
					</Animatable.Text>
				} */}
			</TouchableOpacity>
		);
	}
}

