import { CameraView, useCameraPermissions } from 'expo-camera';
import { useRef, useState } from 'react';
import { Button, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export default function App() {
    const [permission, requestPermission] = useCameraPermissions();
    const [photo, setPhoto] = useState('');
    const cameraRef = useRef<CameraView>(null);

    async function _takePhoto() {
        if (cameraRef.current) {
            const pic = await cameraRef.current.takePictureAsync()
            setPhoto(pic.uri);
            console.debug(photo)
        }
    }

    if (!permission) {
        // Camera permissions are still loading.
        return <View />;
    }

    if (!permission.granted) {
        // Camera permissions are not granted yet.
        return (
            <View style={styles.container}>
                <Text style={styles.message}>We need your permission to show the camera</Text>
                <Button onPress={requestPermission} title="grant permission" />
            </View>
        );
    }

    return (
        <View style={styles.container}>
            {photo ? (
                <View style={styles.cameraContainer}>
                    <Image source={{ uri: photo }} style={styles.camera} />
                    <View style={styles.buttonContainer}>
                        <TouchableOpacity style={styles.button} onPress={() => setPhoto('')}>
                                <Text style={styles.text}>Retake</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.button} onPress={_takePhoto}>
                                <Text style={styles.text}>Continue</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            ) : (
                <>
                    <View style={styles.cameraContainer}>
                        <CameraView style={styles.camera} facing={'back'} ref={cameraRef}>
                        </CameraView>
                    </View>
                    <View style={styles.buttonContainer}>
                        <TouchableOpacity style={styles.button} onPress={_takePhoto}>
                            <Text style={styles.text}>Take Photo</Text>
                        </TouchableOpacity>
                    </View>
                </>)}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#25292e',
        justifyContent: 'center',
        paddingHorizontal: 25,
        paddingVertical: 200
    },
    cameraContainer: {
        flex: 1,
    },
    message: {
        textAlign: 'center',
        paddingBottom: 10,
    },
    camera: {
        flex: 1,
    },
    buttonContainer: {
        flex: 0.2,
        flexDirection: 'row',
        backgroundColor: 'orange',
        marginTop: 15,
        borderRadius: 5,
    },
    button: {
        flex: 1,
        alignSelf: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 24,
        fontWeight: 'bold',
        color: 'white',
    },
});