import React, { useEffect, useState, useRef } from 'react';
import { View, Button, StyleSheet, Alert, Text, Linking } from 'react-native';
import { Camera, useCameraDevices } from 'react-native-vision-camera';
import { useNavigation } from '@react-navigation/native';

const CameraScreen = () => {
    const [hasPermission, setHasPermission] = useState(false);
    const [isDeviceReady, setIsDeviceReady] = useState(false);
    const devices = useCameraDevices();
    const device = devices.front;
    const camera = useRef(null);
    const navigation = useNavigation();

    // Function to check and request camera permission
    const checkPermission = async () => {
        const cameraPermission = await Camera.getCameraPermissionStatus();
        console.log(cameraPermission)
        if (cameraPermission === 'granted') {
            setHasPermission(true);
            setIsDeviceReady(true);
        } else if (cameraPermission === 'not-determined') {
            const newCameraPermission = await Camera.requestCameraPermission();
            if (newCameraPermission === 'granted') {
                setHasPermission(true);
                setIsDeviceReady(true);
            } else {
                setHasPermission(false);
                Alert.alert('카메라 권한 필요', '카메라 권한이 필요합니다.', [
                    { text: '설정으로 이동', onPress: () => Linking.openSettings() },
                    { text: '취소', style: 'cancel' },
                ]);
            }
        } else {
            setHasPermission(false);
            Alert.alert('카메라 권한 필요', '카메라 권한이 필요합니다.', [
                { text: '설정으로 이동', onPress: () => Linking.openSettings() },
                { text: '취소', style: 'cancel' },
            ]); 
        }
    };

    useEffect(() => {
        // Check permission once on component mount
        checkPermission();
    }, []);

    useEffect(() => {
        // Update the device readiness when the camera device changes
        if (device) {
            setIsDeviceReady(true);
        } else {
            setIsDeviceReady(false);
        }
    }, [device]);

    const handleCapture = async () => {
        if (camera.current) {
            try {
                const photo = await camera.current.takePhoto({
                    flash: 'off',
                    qualityPrioritization: 'speed',
                });
                console.log('Photo taken:', photo);
                navigation.navigate('Gps'); // Move to the next screen after capturing photo
            } catch (error) {
                console.error('Photo capture error:', error.message);
                Alert.alert('오류', '사진 캡처 중 오류가 발생했습니다.');
            }
        }
    };

    if (!hasPermission) {
        return (
            <View style={styles.permissionContainer}>
                <Text>카메라 권한을 요청 중입니다...</Text>
            </View>
        );
    }

    return (
        <View style={styles.container}>
            {isDeviceReady && device ? (
                <Camera
                    ref={camera}
                    style={StyleSheet.absoluteFill}
                    device={device}
                    photo={true}
                    video={false}
                    isActive={true}
                />
            ) : (
                <View style={styles.buttonContainer}>
                    <Text>카메라 장치 준비 중...</Text>
                    <Button title="다음 페이지로 이동" onPress={() => navigation.navigate('Gps')} />
                </View>
            )}
            <Button title="Capture" onPress={handleCapture} style={styles.captureButton} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    buttonContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
    },
    captureButton: {
        position: 'absolute',
        bottom: 20,
        alignSelf: 'center',
    },
    permissionContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

export default CameraScreen;