import React, { useRef, useCallback, useState, useEffect, useMemo } from "react";
import { Dimensions, Image, Platform, StatusBar, Text, TouchableOpacity, View,Animated, Alert } from "react-native";
import Reanimated, { Extrapolate, interpolate, useAnimatedProps, useSharedValue } from 'react-native-reanimated';

import { StyleSheet} from "react-native";  
import { customCamera, customStyles, deffontfamily, GetPageTheme, WP } from "../styles/Global";
import { useRoute } from '@react-navigation/native';
import { notify } from "./notify";
import { hasCameraPermission } from "./geolocation";
import { Entypo, MaterialCommunityIcons, MaterialIcons } from "./icons";
import { connect } from 'react-redux';
import { mapStateToProps, mapDispatchToProps } from '../reducers/contextProvider';
import { launchImageLibrary } from 'react-native-image-picker';
import Orientation from 'react-native-orientation-locker';
import { PORTRAIT } from "react-native-orientation-locker";
import moment from "dayjs";
import * as RNFS from 'react-native-fs';
import ViewShot  from "react-native-view-shot";
import CustomModal from "./CustomModal";
// import QRCodeScanner from "react-native-qrcode-scanner";
import { PERMISSIONS, request, check, RESULTS } from 'react-native-permissions';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';


const VC_OR={
    "landscapeLeft":"landscapeLeft",
    "landscapeRight":"landscapeRight",
    "portraitUpsideDown":"portraitUpsideDown",
    "portrait":"portrait",
}


import {
    Camera,
    useCameraDevice,
    useCameraDevices,
    useFrameProcessor
  } from 'react-native-vision-camera'
  import {
    useFaceDetector
  } from 'react-native-vision-camera-face-detector'
  
  import { Worklets } from 'react-native-worklets-core'

  const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window')

  

function CustomCamera(props) {
    const route = useRoute();
    const PageTheme = GetPageTheme(props.DarkTheme, route.name);
    const cameraStyle = customCamera(props.DarkMode, route.name);
    const customStyle = customStyles(props.DarkMode, route.name);

    const camera = useRef(null)

    // const camera = useRef<Camera>(null) 
    const viewShort = useRef();
    const viewShotRef = useRef();
    const svgRef = useRef();
    const faceDetecRef = useRef(false);
    const faceDetecDataRef = useRef([]);

    const devices = useCameraDevices();
    const supportsCameraFlipping = useMemo(() => devices.back != null && devices.front != null, [devices.back, devices.front]);
    const dim = Dimensions.get("window");
    const format = device?.formats.find(f => f.supportedColorSpaces?.length > 0) || device?.formats[0];
    console.log("Available Formats:", device?.formats.map(f => ({
        width: f.photoWidth,
        height: f.photoHeight,
        colorSpaces: f.supportedColorSpaces
    })));
    const [barcode, setBarcode] = React.useState({});
    const [isScanned, setIsScanned] = React.useState(false);
    const [qrCodeEnable, setQRCodeEnable] = useState(false);
    const orAnim=useRef(new Animated.Value(0)).current;
    const [showImage, setshowImage] = useState(false);
    const [imgurl, setimgurl] = useState('');
    const [temp_imgurl, setTemp_imgurl] = useState('');
    const [BottomText, setBottomText] = useState(props.BottomText || '');
    const [BottomSubText, setBottomSubText] = useState('');
    const [BottomSubText2, setBottomSubText2] = useState('');
    const [TopText, setTopText] = useState('');
    const [photoObj, setPhotoObj] = useState({});
    const [isActive, setisActive] = useState(false);
    const [isPhotoTaken, setIsPhotoTaken] = useState(false);
    const [isCameraActive, setIsCameraActive] = useState(false);
    const [activeFlashMode, setActiveFlashMode] = useState('off');

    const [orientation, setOrientation] = useState(PORTRAIT.toLowerCase());
    const [islandscape, setIslandscape] = useState(false);
    const [showCameraForScreen, setShowCameraForScreen] = useState(true);
    const [gridEnable, setGridEnable] = useState(false);
    const [showCapLandsImgAlert, setShowCapLandsImgAlert] = useState(false);
    const [count, setCount] = useState(0);
    const [ImageExtraSPace, setImageExtraSPace] = useState(1.06);
    const [ImgLoading, setImgLoading] = useState(false);
    const layoutProcessedCount=useRef(0);
    const [cameraPosition, setCameraPosition] = useState((props.cameraType == 'front'?'front':'back'));
    const [detectedFaces, setDetectedFaces] = useState([]) 
    const [faceData, setFaceData] = useState([]);


    const device = useCameraDevice(cameraPosition)

    const lastBlinkTime = useRef(0);
    const blinkCount = useRef(0);


    const faceDetectionOptions = useRef({
        // landmarkMode: 'none',
        landmarkMode: 'all', 
        performanceMode: 'fast',
        // classificationMode: 'none',
        classificationMode: 'all',
        minFaceSize: 0.1,
        mode: 'fast'
    }).current


    const { detectFaces } = useFaceDetector( faceDetectionOptions )

    useEffect(() => {
        (async () => {
        const status = await Camera.requestCameraPermission()
        await Camera.configure({
            ...(Platform.OS === "ios" ? { colorSpace: undefined } : {}), // Remove colorSpace on iOS
          });
        })()
    }, [device])

    const handleDetectedFaces = Worklets.createRunOnJS((faces) => { 
        faceDetecRef.current = faces?.length > 0
        faceDetecDataRef.current=[...faces]
        setDetectedFaces(faces) 
    })


    const handleBlinkDetected = Worklets.createRunOnJS(() => {
        console.log("Blink detected! Count:", blinkCount.current);
        
        const now = Date.now();
        // Simple debounce - only consider blinks > 300ms apart
        if (now - lastBlinkTime.current > 300) {
          lastBlinkTime.current = now;
          blinkCount.current += 1;
          
          // Take photo after 2 blinks (adjust as needed)
          if (blinkCount.current >= 2) {
            blinkCount.current = 0;
            takePhoto();
          }
        }
      });

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet'
    // Detect faces in the frame (this is synchronous)
    const faces = detectFaces(frame)
    // Send the detected faces to the JS thread
    handleDetectedFaces(faces)
    if (faces.length > 0) {
        const face = faces[0];
        if (face.leftEyeOpenProbability < 0.3 && face.rightEyeOpenProbability < 0.3) {
          // Simple debounce - only consider blinks > 300ms apart
            handleBlinkDetected()
        }
      }
  }, [handleDetectedFaces])


    const ReanimatedCamera = Reanimated.createAnimatedComponent(Camera)
    Reanimated.addWhitelistedNativeProps({
      zoom: true,
    })
    const zoom = useSharedValue(0)
    // zoom.value=0
    // const minZoom = device?.minZoom ?? 1;
    const minZoom = device?.minZoom ?? 1;
    const maxZoom = Math.min(device?.maxZoom ?? 1, 20);
  
    const onZoomPress = useCallback(() => {
        // setCount(count+1)
      zoom.value = withSpring(count)
    }, [count])


    const SCALE_FULL_ZOOM = 3;
    const BUTTON_SIZE = 40;


 const pinchGesture = Gesture.Pinch()
   .onStart(() => {
     pinchGesture.startZoom = zoom.value;
   })
   .onUpdate((event) => {
     const startZoom = pinchGesture.startZoom ?? 0;
     const scale = interpolate(
       event.scale,
       [1 - 1 / SCALE_FULL_ZOOM, 1, SCALE_FULL_ZOOM],
       [-1, 0, 1],
       Extrapolate.CLAMP
     );
     zoom.value = interpolate(
       scale,
       [-1, 0, 1],
       [minZoom, startZoom, maxZoom],
       Extrapolate.CLAMP
     );
   });

 
    const animatedProps = useAnimatedProps(
      () => ({ zoom: zoom.value }),
      [zoom]
    )

const requestCameraPermission = async () => {
  const result = await request(PERMISSIONS.IOS.CAMERA);

  if (result === RESULTS.GRANTED) {
    console.log('Camera permission granted');
  } else {
    Alert.alert(
      'Permission Required',
      'Camera permission is required to use this feature. Please enable it in Settings.',
      [{ text: 'OK' }]
    );
  }
};

const checkCameraPermission = async () => {
  const result = await check(PERMISSIONS.IOS.CAMERA);
  
  if (result === RESULTS.GRANTED) {
    console.log('Camera permission already granted');
  } else {
    await requestCameraPermission();
  }
};

    useEffect(() => {
       if(Platform.OS =="ios") checkCameraPermission();
    }, []);
  
    useEffect(() => {
        let showGrid = props.gridEnable != null ? (props.gridEnable) : false;
        setGridEnable(showGrid);
    },[props.gridEnable])

    useEffect(() => {
        let showQRCam = props.QRCodeEnable != null ? (props.QRCodeEnable) : false;
        setQRCodeEnable(showQRCam);
    },[props.QRCodeEnable])

    useEffect(() => {

        console.log('CameraGallery in camera :', props.CameraGallery, 'for screen:', props.enableGallerForScreen);
        let showScreenCam = props.enableGallerForScreen != null ? (props.enableGallerForScreen) : true;
        

        setShowCameraForScreen(showScreenCam);
        hasCameraPermission();
        
        Orientation.addDeviceOrientationListener((orientation) => {
            let or=orientation.toLowerCase();
            if(or=='unknown') or='portrait';
           
            let isLS=(or == 'landscape-left' || or == 'landscape-right' || or == 'landscape');
            let or_VC= or=='landscape-left'?VC_OR.landscapeRight:(or=='landscape-right'?VC_OR.landscapeLeft:(or=='portrait-upside-down'?VC_OR.portraitUpsideDown:VC_OR.portrait));
            setOrientation(or_VC);
            setIslandscape(isLS);
            Animated.timing(orAnim, {
                toValue: isLS?1:0,
                duration:400,
                useNativeDriver:false,
            }).start();

            console.log("onchange:",orientation,or_VC);
        });

        return () => {
            Orientation.removeOrientationListener((orientation) => { console.log("or listener removed") });
            Orientation.removeAllListeners();
        }

    }, []);

    useEffect(() => {
        console.log('showCamera changed:', props.showCamera);
        if (props.showCamera == true) {
            showCamera();
        }
        else {
            hideCamera();
        }
    }, [props.showCamera]);

    function showCamera() {
        console.log('showCamera customcamera');
        if(props.cameraType != 'front' ){
            setShowCapLandsImgAlert(true);
            setTimeout(() => {
                setShowCapLandsImgAlert(false);
            }, 1000);
        }
        setIsCameraActive(true);
        setisActive(true);
    }

    async function hideCamera(type='') {
        setIsCameraActive(false);
        setisActive(false);
        setimgurl('');
        setIsPhotoTaken(false);
        setshowImage(true);
        if(props.isCameraScreen!=null && props.isCameraScreen==true){
            // Don't call onHideCamera if it is a camera screen
            if(type=='cancel'){
                props.onHideCamera();
            }
        }
        else{
            if (props.onHideCamera != null && typeof props.onHideCamera === 'function') {
                props.onHideCamera();
            }
        }
    }

    function closeCamera() {
        setIsCameraActive(false);
    }


    const onFlipCameraPressed = useCallback(() => {
        setCameraPosition((p) => (p === 'back' ? 'front' : 'back'));
    }, []);


    async function takePhoto() {
            if (camera?.current != null && typeof camera?.current === 'object') {

                const photo = await camera?.current?.takePhoto({
                    flash: activeFlashMode,
                    // qualityPrioritization: 'speed'
                })
                

                console.log("taken photo params:",photo)
                if (photo != null) {
                    let path = photo?.path?.includes('file://') ? photo.path :'file://' + photo.path;
                    let picture_clicked_time=moment().format('DD-MM-YYYY HH:mm:ss');
                    let ExtraSpace=1.1; 


                    if(photo.width>photo.height){
                        // landscape image 
                        ExtraSpace=1.2
                    }
                    console.log("takephhoto:w x h",photo.width,photo.height,photo);

                    let obj = { uri: path,original_path: photo.path, width: parseInt(photo.width), height: parseInt(photo.height), ExtendedHeight: parseInt(photo.height*ExtraSpace),or_Mode:orientation };
                    
                    setImageExtraSPace(ExtraSpace);
                    setPhotoObj(obj);
                    setTemp_imgurl(path)

                    let bText=props.BottomText+" | Date: "+picture_clicked_time;
                    setBottomText(bText);
                    setTopText(picture_clicked_time);
                    setIsPhotoTaken(true);
                    setImgLoading(false);
                }
                else {
                    notify('Something went wrong! Cannot take picture.');
                    setisActive(false);
                    setImgLoading(false);
                }
            }
            else {
                notify('Camera not found!.');
                setisActive(false);
                setImgLoading(false);
            }

            closeCamera();
        
    }

    async function onRetake() {
        await RNFS.unlink(temp_imgurl);
        // setTemp_imgurl('');
        setIsPhotoTaken(false);
        setshowImage(false);
        setIsCameraActive(true);
        setisActive(true);
        // setTopText('');
        // setBottomText('');
    }
    async function onCameraImgOk() {
        zoom.value=0

        let obj = photoObj;
        
        obj.viewShotRef=viewShotRef;
        setPhotoObj(obj);
        setisActive(false);
        setIsPhotoTaken(false);
        setshowImage(true);

        if (props.onImageCaptured != null && typeof props.onImageCaptured === 'function') {
            props.onImageCaptured(obj);
        }
        hideCamera();
    }

    async function onQRScanned(qrData){
        console.log("qrData:",qrData.data);
        setisActive(false);
        if (props.onImageCaptured != null && typeof props.onImageCaptured === 'function') {
            let QR_withValidChars=qrData.data!=null && qrData.data!=''?qrData.data.replace(/["']/g,''):'';
            props.onImageCaptured(QR_withValidChars);
        }
        hideCamera();
    }

    function flashOnOff(type = '') {
        console.log('setflashmode:', type);
        if (type != '' && type != null) {
            setActiveFlashMode(type);
            if (type == 'on') {

            }
            else if (type == 'off') {

            }
            else if (type == 'auto') {

            }
        }
    }

    function pickGalleryImage(img) {
        console.log('pickGalleryImage:', img, typeof img.assets);
        if (img != null && img.assets != null && typeof img.assets === 'object' && img.assets.length > 0 && img.assets[0].uri != null) {
            let photo = img.assets[0];
            let path = photo.uri;
            console.log(path);
            let times = photo.timestamp != null && photo.timestamp != '' ? photo.timestamp : new Date();
            let obj = { uri: path, width: photo.width, height: photo.height, 'fromGallery': true, 'datetime': times };
            setPhotoObj(obj);
            setTemp_imgurl(path)
            let picture_clicked_time=moment().format('DD-MM-YYYY HH:mm:ss');
            let bText=props.BottomText+" | "+picture_clicked_time;

            setTopText(picture_clicked_time);
            setBottomText(bText);
            setIsPhotoTaken(true);
        }
        else {
            notify('Something went wrong! Cannot take picture.');
            setisActive(false);
        }
    }

    function getImageFromGallery() {
        launchImageLibrary({ mediaType: 'photo', selectionLimit: 1, includeExtra: true, cameraType: 'front' }, pickGalleryImage)
    }

    function _renderCaptureBtn() {
        return (
            <>
            <TouchableOpacity style={[cameraStyle.customCamera_capbtn]} onPress={() => { takePhoto(); }}>
                <View style={cameraStyle.customCamera_capbtn_Outer}><View style={cameraStyle.customCamera_capbtn_Inner} /></View>
            </TouchableOpacity>
            </>
        )
    }

    function _renderGalleryBtn() {
        return (
            <TouchableOpacity style={cameraStyle.customCamera_Gallerybtn} onPress={() => { getImageFromGallery() }}>
                <View style={cameraStyle.customCamera_Gallerybtn_Outer}>
                    <View style={cameraStyle.customCamera_Gallerybtn_Inner}>
                        <Entypo name='images' size={32} color={PageTheme.$text_color} style={cameraStyle.customCamera_Gallerybtn_Icon} />
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

    function _renderBottomControls() {
        return (
            <View style={[cameraStyle.customCamera_bottomBar,{marginBottom:"4%"}]}>
                {_renderCaptureBtn()}
                {props.CameraGallery == true && showCameraForScreen == true &&
                    _renderGalleryBtn()
                }
            </View>
        )
    }
    function _renderOrientationIcon() {
        let deg=0;
        if(orAnim!=null ){
            deg=orAnim.interpolate({
                inputRange:[0,1],
                outputRange:['0deg', '90deg'],
            });
        }
    }

    function _renderCancelBtn() {
        return (
            <TouchableOpacity style={cameraStyle.imgControls_btnCon} onPress={() => { hideCamera('cancel') }}>
                <View style={cameraStyle.imgControls_btn}>
                    <MaterialCommunityIcons name='cancel' color={'#fff'} size={18} />
                    <Text style={[cameraStyle.imgControls_btnText, cameraStyle.icbtTop]}>Cancel</Text>
                </View>
            </TouchableOpacity>
        )
    }

    function _renderRetakeBtn() {
        return (
            <TouchableOpacity style={cameraStyle.imgControls_centerBtn} onPress={() => { onRetake() }}>
                <View style={cameraStyle.imgControls_btn}>
                    <View style={cameraStyle.imgControls_retakeBtn}>
                        <MaterialCommunityIcons name='camera-retake' color={'#000'} size={30} />
                    </View>
                    <Text style={[cameraStyle.imgControls_btnText, cameraStyle.icbtTop]}>Retake</Text>
                </View>
            </TouchableOpacity>
        )
    }



    function _renderSaveImgBtn() {
        return (
            <TouchableOpacity style={cameraStyle.imgControls_btnCon} onPress={() => { onCameraImgOk() }}>
                <View style={cameraStyle.imgControls_btn}>
                    <MaterialCommunityIcons name='check' color={'#fff'} size={18} />
                    <Text style={[cameraStyle.imgControls_btnText, cameraStyle.icbtTop]}>Ok</Text>
                </View>
            </TouchableOpacity>
        )
    }



    function _renderImageControls() {
        return (
            <View style={[cameraStyle.customCamera_bottomBar2,{marginBottom:"5%"}]}>
                <View style={cameraStyle.imgControls}>
                    {_renderCancelBtn()}
                    {_renderRetakeBtn()}
                    {_renderSaveImgBtn()}
                </View>
            </View>
        )
    }

    function _renderFlashBtn(type = 'on') {
        return (
            <TouchableOpacity style={cameraStyle.flashBtn} onPress={() => { flashOnOff(type) }}>
                {type == 'on' && <MaterialCommunityIcons name='flash' color={(activeFlashMode == 'on' ? '#ffe600' : '#fff')} size={24} />}
                {type == 'off' && <MaterialCommunityIcons name='flash-off' color={(activeFlashMode == 'off' ? '#ffe600' : '#fff')} size={24} />}
                {type == 'auto' && <MaterialCommunityIcons name='flash-auto' color={(activeFlashMode == 'auto' ? '#ffe600' : '#fff')} size={24} />}
            </TouchableOpacity>
        )
    }

    function _renderCameraSwapMode() {
        return (
            <TouchableOpacity style={cameraStyle.flashBtn} onPress={() => { onFlipCameraPressed() }}>
                {cameraPosition == 'front' && <MaterialIcons name='flip-camera-ios' color={'#ffe600'} size={24} />}
                {cameraPosition == 'back' && <MaterialIcons name='flip-camera-android' color={'#fff'} size={24} />}
            </TouchableOpacity>
        )
    }

    function _renderTopControls() {
        return (
            <View style={cameraStyle.topControls}>
                <View style={cameraStyle.topControlsInner}>
                    {_renderFlashBtn('on')}
                    {_renderFlashBtn('off')}
                </View>
            </View>
        )
    }

    function _renderSideControls() {
        
        let enableCameraFlip = props.enableCameraFlip != null ? (props.enableCameraFlip) : false;
        return (
            <View style={(cameraStyle.sideControls)}>
                <View style={cameraStyle.sideControlsInner}>
                    {_renderFlashBtn('on')}
                    {_renderFlashBtn('off')}
                    {supportsCameraFlipping && enableCameraFlip==true &&
                    _renderCameraSwapMode()
                    }
                </View>
            </View>
        )
    }
    const cameraAnimatedProps = useAnimatedProps(() => {
        const z = Math.max(Math.min(zoom.value, maxZoom), minZoom);
        return {
          zoom: z,
        };
      }, [maxZoom, minZoom, zoom]);

    

    const cameraView = () =>{
        return (
            <>
            {/* <QRCodeScanner
                 onRead={onQRScanned}
                 showMarker={true}
                 cameraStyle={[cameraStyle.customCamera, (islandscape || props.cameraType == 'front' ? cameraStyle.customCameraLS : {})]} //(props.cameraType!='front'?{}:cameraStyle.customCameraTop)
             /> */}
            </>
        )
    }

    function _render_AutoAlertModal(){
        return (
          <CustomModal
            style={customStyle.storelVisitM_Style}
            title={"Please click image in landscape mode!"}
            titleStyle={customStyle.storelVisitM_titleStyle}
            showModal={showCapLandsImgAlert}
          >
            <View />
          </CustomModal>
        )
    }

    function _renderSCreenSHotView(){
        let is_photo_mode_LS=(photoObj.or_Mode==VC_OR.landscapeLeft || photoObj.or_Mode==VC_OR.landscapeRight)
        let imgSIze=(photoObj.or_Mode!=null && photoObj.or_Mode!='' ?(is_photo_mode_LS?{width:'100%'}:{height:'100%'}):{});
        let vieshotStyle={}; 
        let itemW=photoObj.width,itemH=photoObj.height;

        let hR=(itemH/itemW )*100;
        let screenWidth=WP('100%');
        let ht=screenWidth*(hR/100);
        vieshotStyle ={width:'100%',height:ht};
            
        return(
            <View style={[cameraStyle.customCamera_Wrap,{justifyContent:'center',alignItems:'center'}]}>
                {temp_imgurl!=null && temp_imgurl!='' && 
                <View style={[vieshotStyle]}   >
                    <Image source={{ uri: temp_imgurl }} style={[imgSIze,cameraStyle.cameraImgCaptured]}  resizeMode={'contain'}/>
                </View>}
                {_renderImageControls()}
            </View>
        )
    }

    const convertToScreenCoordinates = (bounds) => {
        const xRatio = SCREEN_WIDTH / 1080; // Assuming 1080p image from the camera
        const yRatio = SCREEN_HEIGHT / 1920; // Assuming 1920p image from the camera
        return {
          x: bounds.x * xRatio,
          y: bounds.y * yRatio,
          width: bounds.width * xRatio,
          height: bounds.height * yRatio,
        };
      };
    
      let enableFacDet = route.params?.facDet != null ? (route.params?.facDet) : false;

    return (
        <View style={[cameraStyle.CameraWrapper
        ,(props.showCamera == true && isActive == true?{}:cameraStyle.CameraWrapperHide)
        ]} >
            {temp_imgurl!=null && temp_imgurl!='' && 
            <View style={{position:'absolute',left:0,top:0,opacity:0}}>
                <ViewShot ref={viewShotRef}  options={{ format: "jpg", quality: 1.0 }} >
                    <View collapsable={false} style={{width:photoObj.width,height:parseInt(photoObj.height*ImageExtraSPace),backgroundColor:'#fff'}} >
                    <Image source={{ uri: temp_imgurl }} style={[{width:photoObj.width,height:photoObj.height},cameraStyle.cameraImgCaptured, (props.cameraType == 'front' ? { transform: [{ scaleX: -1 }] } : {})]} />
                    {TopText!=null && TopText!='' && <Text style={{position:'absolute',left:10,top:10,fontFamily:deffontfamily,color:'red',fontSize:parseInt(photoObj.width*0.04)}} >{TopText}</Text>}
                    {BottomText!=null && BottomText!='' && <Text style={{position:'absolute',left:0,paddingHorizontal:5,top:(photoObj.height+5),fontFamily:deffontfamily,color:'red',fontSize:parseInt(photoObj.width*0.03),flexWrap:'wrap'}} >{BottomText}</Text>}
                    </View>
                </ViewShot>
            </View>
            }
            {props.showCamera == true && isActive == true && 
            <View style={cameraStyle.scrollMain}>
               
                <StatusBar translucent={true} hidden={true} />
                {
                    Platform.OS == 'ios' &&
                    <View style={cameraStyle.IOS_StatusBar} />
                }

                {device != null && isActive && 
                    <View style={[cameraStyle.customCamera_Wrap]}>
                    {!!device && enableFacDet ? <Camera
                        ref={camera}
                        style={[StyleSheet.absoluteFill]}
                        device={device}
                        isActive={true}
                        //format={format!='undefined' ? format : 'back'}
                        photo={true} 
                        frameProcessor={frameProcessor}
                        frameProcessorFps={5} 
                        onFacesDetected={({ faces }) => setFaceData(faces)}
                        onError={(error) => console.log('Camera Error:', error)}

                    /> :
                    (qrCodeEnable==true? cameraView() : 
                    <>
                    {_render_AutoAlertModal()}
                     <GestureDetector gesture={pinchGesture}>
                        <Reanimated.View style={StyleSheet.absoluteFill}>
                            <ReanimatedCamera
                            ref={camera}
                            style={[cameraStyle.customCamera,{width:'100%',height:'100%'}, (islandscape || props.cameraType == 'front' ? cameraStyle.customCameraLS : {})]}
                            device={device}
                            isActive={true}
                            photo={true}
                            focusable={true}
                            orientation={orientation}
                            enableZoomGesture={true}
                            animatedProps={cameraAnimatedProps}
                            />
                        </Reanimated.View>
                    </GestureDetector>
                    </> )}
                    

                        {(faceDetecRef.current ? true  :!enableFacDet) && _renderOrientationIcon()}
                        {(faceDetecRef.current ? true : !enableFacDet) && _renderBottomControls()}
                        {props.cameraType != 'front' && _renderSideControls()}
                    </View>
                }

                {!isPhotoTaken && faceDetecDataRef.current?.map((face, index) => {
                    const screenBounds = convertToScreenCoordinates(face.bounds);
                    return (
                    <View
                        key={index}
                        style={[
                        styles.boundingBox,
                        {
                            top: screenBounds.y, 
                            left: screenBounds.x, 
                            width: screenBounds.width, 
                            height: screenBounds.height,
                        }
                        ]}
                    />
                    );
                })}
                {device != null && (temp_imgurl != null && temp_imgurl != '') && isPhotoTaken &&
                _renderSCreenSHotView()
                }
            </View>
            }
        </View>
    )

};

const styles = StyleSheet.create({
    boundingBox: {
        position: 'absolute',
        borderWidth: 2,
        borderColor: 'green',
        // backgroundColor: 'rgba(255, 0, 0, 0.2)',
        zIndex: 9999999,
        borderRadius: 10,
      }    
    
  })

export default connect(mapStateToProps, mapDispatchToProps)(CustomCamera);