import React, { useState, useEffect } from 'react';
import { View, Text, Modal, TouchableOpacity, Vibration, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { CameraView, useCameraPermissions } from 'expo-camera';
import { X, ScanLine } from 'lucide-react-native';
interface QrScanModalProps {
visible: boolean;
onClose: () => void;
onScan: (data: string) => void;
}
export default function QrScanModal({ visible, onClose, onScan }: QrScanModalProps) {
const [permission, requestPermission] = useCameraPermissions();
const [scanned, setScanned] = useState(false);
// Gestione Permessi e Reset Stato
useEffect(() => {
if (visible) {
setScanned(false);
if (permission && !permission.granted && permission.canAskAgain) {
requestPermission();
}
}
}, [visible, permission]);
const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => {
if (scanned) return;
setScanned(true);
Vibration.vibrate();
console.log(`Bar code with type ${type} and data ${data} has been scanned!`);
onScan(data);
onClose();
};
if (!permission) {
return ;
}
if (!permission.granted && visible) {
requestPermission();
}
return (
{/* Camera Full Screen */}
{/* Overlay Oscuro con "buco" trasparente (Simulato visivamente con bordi o opacity) */}
{/* Header Overlay */}
Scansiona QR Code
Inquadra il codice nel riquadro
{/* Area Centrale (Trasparente per la camera) */}
{/* Angoli decorativi */}
{/* Linea scansione animata o icona */}
{!scanned && }
{/* Footer Overlay */}
Chiudi
);
}