import React, {Component} from 'react';
import {Text, View, TouchableOpacity, Image,TouchableHighlight,Vibration}     from 'react-native';
//import Camera from 'react-native-camera';
import {Camera, Permissions,} from 'expo';

const myStyle = {
container: {
    flex: 1,
    flexDirection: 'row',
},
preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center'
},
capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    color: 'red',
    padding: 10,
    margin: 40
},
main2: {
    flex: 1,
    //alignItems: 'flex-start',
    flexDirection: 'row',
    justifyContent: 'space-between',
},
main: {
    flex: 1,
},
borda: {
    //flex: 0.1,
    alignItems: 'flex-end',
    backgroundColor: 'black',
    height: 110,
},
borda2: {
    backgroundColor: 'black',
    width: 60,
},
borda3: {
    width: 60,
    backgroundColor: 'black',
},
borda4: {
    height: 120,
    backgroundColor: 'black',
    //flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent:'space-between',
},
texto:{
    fontSize: 18,
    marginBottom: 40,
    color: 'white',
},
textoButton:{
    fontSize: 18,
    color: 'white',
    marginTop: 5,
},
button:{
    alignSelf: 'flex-end',
    alignItems: 'center',
    backgroundColor:'transparent',
    flexDirection: 'row',
    justifyContent:'space-between'
},
cameraStyle:{
    width: 70,
    height: 57,
    //margin:30,
    alignItems: 'center',
    tintColor: 'white',
},
flipStyle:{
    width: 52,
    height: 57,
    marginLeft:10,
    alignItems: 'center',
    tintColor: 'white',
},
gallerystyle:{
    width: 64,
    height: 57,
    marginLeft:10,
    alignItems: 'center',
    tintColor: 'white',
    marginRight: 10,
},
closeStyle:{
    width: 56,
    height: 57,
    marginTop: 30,
    marginRight: 20,
    alignItems: 'flex-end',
    tintColor: 'white',
    justifyContent:'flex-end'
},
box:{
    width: 'auto',
    justifyContent: 'space-between',
    flexDirection: 'column',
    alignItems: 'center',
},
};

export default class CameraAcess extends Component {
constructor(props) {
    super(props);
    this.state = {hasCameraPermission: null, type: Camera.Constants.Type.back,};
}

async componentWillMount() {
    const {status} = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({hasCameraPermission: status === 'granted'});
}
snap = async function(){
    if (this.camera) {
        this.camera.takePictureAsync().then(data => {
            FileSystem.moveAsync({
                from: data,
                to: '${FileSystem.documentDirectory}photos/Photo_${this.state .photoId}.jpg',
        }).then(() => {
                this.setState({
                    photoId: this.state.photoId + 1,
                });
                Vibration.vibrate();
            })
                .catch((e) => {
                    console.log(e, 'ERROR');
                });
        })
            .catch((e) => {
                console.log(e, 'takePicture ERROR');
            });
    }
    console.log('I took the picture');
};


cameraPhoto = require('./Images/camera.png');
flipPhoto = require('./Images/flip.png');
closePhoto = require('./Images/close.png');
galleryPhoto = require('./Images/gallery.png');

render() {
    const { main,main2, borda, borda2, borda3,borda4,cameraStyle,flipStyle,closeStyle,box,textoButton,gallerystyle} = myStyle;
    const {hasCameraPermission} = this.state;
    if (hasCameraPermission === null) {
        return <View/>;
    } else if (hasCameraPermission === false) {
        return <Text>No access to camera</Text>;
    } else {
        return (
            <View style={main}>
                <Camera style={main} type={this.state.type}>
                        <TouchableHighlight onPress={() => {this.props.navigator.push({id: 'MenuPrincipal'});}}
                                          style={borda} underlayColor={'black'} activeOpacity={0.6}>
                            <Image source={this.closePhoto} style={[closeStyle]}/>
                        </TouchableHighlight>
                        <View style={main2}>
                            <View style={[borda2]}/>
                            <View style={[borda3]}/>
                        </View>
                        <View style={[borda4]}>
                            <TouchableOpacity onPress={() => {this.setState({type: this.state.type === Camera.Constants.Type.back
                                    ? Camera.Constants.Type.front : Camera.Constants.Type.back,});}}>
                                <View style={box}>
                                    <Image source={this.flipPhoto} style={[flipStyle]}/>
                                    <Text style={textoButton}>
                                        Flip
                                    </Text>
                                </View>
                            </TouchableOpacity>

                            <TouchableOpacity onPress={() => {this.snap()}}>
                                <View style={box}>
                                    <Image source={this.cameraPhoto} style={[cameraStyle]}/>
                                    <Text style={textoButton}>
                                        Capture
                                    </Text>
                                </View>
                            </TouchableOpacity>

                            <TouchableOpacity onPress={() => {false}}>
                                <View style={box}>
                                    <Image source={this.galleryPhoto} style={[gallerystyle]}/>
                                    <Text style={textoButton}>
                                        Gallery
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                </Camera>
            </View>
        );
    }
   }
  }