// import React, { PureComponent } from 'react';
// import { AppRegistry, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RNCamera } from 'react-native-camera';
import React, { Fragment, useState, useCallback, useRef,PureComponent } from 'react';
// import { StyleSheet, View, SafeAreaView, Text, Image, Modal } from 'react-native';
import { StyleSheet, View, SafeAreaView, Text, Image, Modal,TouchableOpacity } from 'react-native';

// import Btn from 'react-native-camera/example/src/Btn';
// import Desc from 'react-native-camera/example/src/Desc';

import Btn from './Btn';
import Desc from './Desc';




class ExampleApp extends PureComponent {
  render() {

  	var rn_cam_styles_z = tglob_au.run_dev_cbs("rn_cam_styles",{that:this}) || {}
  	var rn_cam_styles  = rn_cam_styles_z.o
    return (
      <View style={rn_cam_styles.container || {}}>
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          style={rn_cam_styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
          androidCameraPermissionOptions={{
            title: 'Permission to use camera',
            message: 'We need your permission to use your camera',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
          /*
          androidRecordAudioPermissionOptions={{
            title: 'Permission to use audio recording',
            message: 'We need your permission to use your audio',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
          */
          onGoogleVisionBarcodesDetected={({ barcodes }) => {
            console.log(barcodes);
          }}
        />
        <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
          <TouchableOpacity onPress={this.takePicture.bind(this)} style={rn_cam_styles.capture}>
            <Text style={{ fontSize: 14 }}> SNAP </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  takePicture = async () => {
    if (this.camera) {
      const options = { quality: 0.5, base64: true };
      const data = await this.camera.takePictureAsync(options);
      console.log(data.uri);
    }
  };
}










const styles0 = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
});




const styles = StyleSheet.create({
  root: {
    padding: 50,
  },
  preview: {
    marginTop: 20,
    width: 200,
    height: 200,
    borderWidth: 1,
    borderColor: '#aaa',
  },
  modal: {
    alignSelf: 'flex-end',
    padding: 20,
    backgroundColor: '#eee',
  },
  buttons: {
    flexDirection: 'row',
  },
});

const ModalExample = () => {
  const [opened, setOpened] = useState(false);
  const [source, setSource] = useState(null);
  const modalRef = useRef();

  const onOpenModal = useCallback(() => setOpened(true), []);

  const onCapture = useCallback(uri => {
    setSource({ uri });
    setOpened(false);
  }, []);

  const onPressCapture = useCallback(() => {
    captureScreen().then(onCapture);
  }, [onCapture]);

  const onPressCaptureModalContent = useCallback(() => {
    captureRef(modalRef).then(onCapture);
  }, [onCapture]);

  return (
    <Fragment>
      <SafeAreaView>
        <View style={styles.root}>
          <Desc
            desc="We can notice that, in current implementation, react-native-view-shot does not
            screenshot Modal as part of a captureScreen."
          />
          <Btn onPress={onOpenModal} label="Open Modal" />
          <Image fadeDuration={0} source={source} style={styles.preview} resizeMode="contain" />
        </View>
      </SafeAreaView>

      <Modal transparent animated animationType="slide" visible={opened}>
        <SafeAreaView>
          <View ref={modalRef} style={styles.modal}>
            <Text>This is a modal</Text>
            <View style={styles.buttons}>
              <Btn onPress={onPressCapture} label="Capture Screen" />
              <Btn onPress={onPressCaptureModalContent} label="Capture This" />
            </View>
          </View>
        </SafeAreaView>
      </Modal>
    </Fragment>
  );
};

ModalExample.navigationOptions = {
  title: 'Modal',
};

















export {ExampleApp,ModalExample}