import React, {useState, useEffect} from 'react';
import {
	StyleSheet,
	ScrollView,
	Text,
	Button,
	ToastAndroid,
	PermissionsAndroid,
} from 'react-native';
import {useRoute} from '@react-navigation/native';
import prettyBytes from 'pretty-bytes';
import useS3 from '../hooks/useS3';

const FileDetails = () => {
	const route = useRoute();
	const s3 = useS3();
	const [data, setData] = useState(null);

	useEffect(() => {
		if (s3 && !data) {
			s3.getObject(
				{
					Bucket: route.params.bucket,
					Key: route.params.file,
					Range: 'bytes=0-1',
				},
				(err, data) => {
					if (err) {
						ToastAndroid.show('Failed to fetch file info', ToastAndroid.SHORT);
						return;
					}

					setData(data);
				},
			);
		}
	}, [s3]);

	if (!data) {
		return <Text>Loading...</Text>;
	}

	return (
		<ScrollView style={styles.root}>
			<Text style={styles.bucket}>Bucket: {route.params.bucket}</Text>
			<Text style={styles.fileName}>Key: {route.params.file}</Text>
			<Text style={styles.info}>
				Last modified: {data.LastModified.toISOString()}
			</Text>
			<Text style={styles.info}>Size: {prettyBytes(data.ContentLength)}</Text>
			<Text style={styles.info}>Content type: {data.ContentType}</Text>
		</ScrollView>
	);
};

const styles = StyleSheet.create({
	root: {
		flex: 1,
		padding: 12,
	},
	bucket: {
		fontSize: 14,
		marginBottom: 12,
		color: '#000000',
	},
	fileName: {
		fontSize: 16,
		fontWeight: 'bold',
		marginBottom: 12,
		color: '#000000',
	},
	info: {
		fontSize: 14,
		marginBottom: 12,
	},
	download: {
		marginTop: 16,
	},
});

export default FileDetails;