import React, {useCallback} from 'react';
import {StyleSheet, View, Text, Button, TextInput} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import useLogout from '../hooks/useLogout';
import {useNavigation} from '@react-navigation/native';
import useSettings from '../hooks/useSettings';

const Settings = () => {
	const logOut = useLogout();
	const navigation = useNavigation();
	const [
		isLoaded,
		save,
		awsKeyId,
		setAwsKeyId,
		awsSecretAccessKey,
		setAwsSecretAccessKey,
	] = useSettings();

	const onLogout = useCallback(() => {
		logOut().then(() => {
			navigation.reset({index: 0, routes: [{name: 'SignIn'}]});
		});
	}, [logOut]);

	const onSave = useCallback(() => {
		save().then(() => navigation.goBack());
	}, [save, navigation]);

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

	return (
		<KeyboardAwareScrollView style={styles.root}>
			<Text style={styles.label}>AWS Key ID</Text>
			<TextInput
				style={styles.input}
				value={awsKeyId}
				onChangeText={setAwsKeyId}
			/>
			<Text style={styles.label}>AWS Secret Access Key</Text>
			<TextInput
				style={styles.input}
				value={awsSecretAccessKey}
				onChangeText={setAwsSecretAccessKey}
			/>
			<View style={styles.button}>
				<Button onPress={onSave} title="Save" />
			</View>
			<View style={[styles.button, styles.logout]}>
				<Button onPress={onLogout} title="Sign out" />
			</View>
		</KeyboardAwareScrollView>
	);
};

const styles = StyleSheet.create({
	root: {
		flex: 1,
		backgroundColor: '#FEFEFE',
		padding: 10,
	},
	label: {
		fontSize: 14,
		color: '#333333',
	},
	input: {
		height: 40,
		margin: 12,
		marginBottom: 24,
		borderWidth: 1,
		padding: 10,
		borderRadius: 3,
		backgroundColor: '#DDDDDD',
		color: '#000000',
	},
	button: {
		margin: 12,
		marginBottom: 32,
	},
	logout: {
		marginTop: 64,
	},
});

export default Settings;