import React, { useState, useRef } from 'react';

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

import { Camera } from 'expo-camera';

import { Video } from 'expo-av';

export default function App() {

  const [hasPermission, setHasPermission] = useState(null);

  const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);

  const [isRecording, setIsRecording] = useState(false);

  const cameraRef = useRef(null);

  const videoRef = useRef(null);

  const startRecord = async () => {

    if (cameraRef.current) {

      try {

        const { uri } = await cameraRef.current.recordAsync();

        console.log('Recording started:', uri);

        setIsRecording(true);

      } catch (error) {

        console.error('Error starting recording:', error);

      }

    }

  };

  const stopRecord = async () => {

    if (cameraRef.current) {

      try {

        const { uri } = await cameraRef.current.stopRecording();

        console.log('Recording stopped:', uri);

        setIsRecording(false);

      } catch (error) {

        console.error('Error stopping recording:', error);

      }

    }

  };

  const takePicture = async () => {

    if (cameraRef.current) {

      try {

        const { uri } = await cameraRef.current.takePictureAsync();

        console.log('Picture taken:', uri);

      } catch (error) {

        console.error('Error taking picture:', error);

      }

    }

  };

  const switchCamera = () => {

    setCameraType(

      cameraType === Camera.Constants.Type.back

        ? Camera.Constants.Type.front

        : Camera.Constants.Type.back

    );

  };

  const onCameraPermission = async () => {

    const { status } = await Camera.requestPermissionsAsync();

    setHasPermission(status === 'granted');

  };

  if (hasPermission === null) {

    return <View />;

  }

  if (hasPermission === false) {

    return <Text>No access to camera</Text>;

  }

  return (

    <View style={styles.container}>

      <Camera

        style={styles.camera}

        type={cameraType}

        ref={cameraRef}

        onCameraReady={() => console.log('Camera ready')}

      >

        <View style={styles.controls}>

          <TouchableOpacity

            style={styles.button}

            onPress={isRecording ? stopRecord : startRecord}

          >

            <Text style={styles.text}>{isRecording ? 'Stop' : 'Record'}</Text>

          </TouchableOpacity>

          <TouchableOpacity style={styles.button} onPress={takePicture}>

            <Text style={styles.text}>Take Picture</Text>

          </TouchableOpacity>

          <TouchableOpacity style={styles.button} onPress={switchCamera}>

            <Text style={styles.text}>Switch Camera</Text>

          </TouchableOpacity>

        </View>

      </Camera>

      {isRecording && (

        <Video

          ref={videoRef}

          style={styles.videoPreview}

          source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}

          useNativeControls

        />

      )}

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

  },

  camera: {

    flex: 1,

  },

  controls: {

    flex: 1,

    flexDirection: 'row',

    justifyContent: 'center',

    alignItems: 'flex-end',

    marginBottom: 20,

  },

  button: {

    backgroundColor: 'white',

    borderRadius: 5,

    padding: 15,

    marginHorizontal: 10,

  },

  text: {

    fontSize: 16,

  },

  videoPreview: {

    flex: 1,

    position: 'absolute',

    top: 0,

    left: 0,

    right: 0,

    bottom: 0,

  },

});