import React,{useState,useEffect,useRef} from 'react';
import Container from '../components/container';
import { useRoute } from '@react-navigation/native';
import { globalStyles,customStyles,GetPageTheme } from "../styles/Global";
import {StatusBar,Image,TextInput,View,Text,ScrollView,TouchableOpacity,Platform,PermissionsAndroid,FlatList, Alert, Animated, DeviceEventEmitter} from 'react-native';
import { ReactReduxContext,connect,useSelector, useDispatch  } from 'react-redux';
import { mapStateToProps,mapDispatchToProps } from '../reducers/contextProvider';
import {notify} from '../components/notify';
import moment from 'moment';
import CustomCamera from '../components/Camera';

function CameraScreen(props) { 
    const route = useRoute();
  
    // get all theme styles acc to current theme set 
    const PageTheme=GetPageTheme(props.DarkMode,route.name);
    const customStyle=customStyles(props.DarkMode,route.name);
    
    const [processing, setProcessing] = useState(false);
    const [loaderTitle, setLoaderTitle] = useState('loading...');
    const [params, setParams] = useState({'cameraType':'back'});
    const [showCamera, setShowCamera] = useState(true);
    const [hasUnsavedChanges,setHasUnsavedChanges] = useState(false);

    const d1=new Date();
    const d2=moment(d1).format('MM/DD/YYYY');
    
  
    useEffect(() => {
        let params1=props.route.params? props.route.params:{};
        setParams(params1);
    }, []);

    function closeCamera(){
        console.log('closeCamera in camera screen');
        props.navigation.goBack();
    }

    async function onImageCaptured(imgData){
        console.log('onImageCaptured in camera screen',imgData.uri);
        imgData['storeData']=params.storeData
        // emit onImageCaptured in the screen from where this screen is opened
        DeviceEventEmitter.emit("onImageCaptured",imgData);
        props.navigation.goBack();
    }
  
    return ( 
    <Container {...props} pt={0} avoidSafeArea={(Platform.OS=='ios'?true:false)}>
        {/* {processing && <CustomLoader fullHeight={true} title={loaderTitle}/>} */}
        {/* <CustomCamera cameraType={(params.cameraType!=null?params.cameraType:'back')} onImageCaptured={(imgData)=>{onImageCaptured(imgData)}} showCamera={showCamera} onHideCamera={()=>{closeCamera()}}/>    */}
        <CustomCamera isCameraScreen={true} BottomText={'Store Name:'+params?.storeData?.StoreName+' | Store Id:'+params?.storeData?.StoreId+' | User Id:'+params?.storeData?.EmpId+' | Image Type: Check In'} enableCameraFlip={(props.route.params.enableCameraFlip!=null?props.route.params.enableCameraFlip:false)} cameraType={(props.route.params.cameraType!=null?props.route.params.cameraType:'back')} enableGallerForScreen={(props.route.params.CheckInCameraGallery!=null?props.route.params.CheckInCameraGallery:false)} onImageCaptured={onImageCaptured} showCamera={true} onHideCamera={()=>{closeCamera()}}/>  
    </Container>   
    ); 
}
  
  

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