// components/VideoRecording.js

import React, { useState, useRef } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Alert, ActivityIndicator } from 'react-native';
import { Camera } from 'expo-camera';
import { useMedia } from '../context/MediaContext'; // Assuming you have a MediaContext
import { MaterialIcons } from '@expo/vector-icons';
import { Video } from 'expo-av';

const VideoRecording = () => {
  const cameraRef = useRef(null);
  const [isRecording, setIsRecording] = useState(false);
  const [videoUri, setVideoUri] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const { addVideo } = useMedia(); // Function to add video to context

  const startRecording = async () => {
    if (cameraRef.current) {
      try {
        setIsLoading(true);
        const videoRecordPromise = cameraRef.current.recordAsync({
          maxDuration: 60, // Maximum duration in seconds
          quality: Camera.Constants.VideoQuality['480p'],
        });

        if (videoRecordPromise) {
          setIsRecording(true);
          const data = await videoRecordPromise;
          setVideoUri(data.uri);
          addVideo(data.uri); // Add video URI to context
          setIsRecording(false);
          setIsLoading(false);
          Alert.alert('Success', 'Video recorded successfully!');
        }
      } catch (error) {
        console.warn(error);
        Alert.alert('Error', 'An error occurred while recording the video.');
        setIsRecording(false);
        setIsLoading(false);
      }
    }
  };

  const stopRecording = () => {
    if (cameraRef.current && isRecording) {
      cameraRef.current.stopRecording();
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Video Recording</Text>
      <View style={styles.cameraContainer}>
        <Camera
          style={styles.camera}
          type={Camera.Constants.Type.back}
          ref={cameraRef}
          ratio="16:9"
        >
          {isRecording && (
            <View style={styles.recordingIndicator}>
              <MaterialIcons name="fiber-manual-record" size={24} color="red" />
              <Text style={styles.recordingText}>REC</Text>
            </View>
          )}
        </Camera>
      </View>

      {isLoading && <ActivityIndicator size="large" color="#0000ff" style={styles.loader} />}

      {videoUri && (
        <View style={styles.videoContainer}>
          <Video
            source={{ uri: videoUri }}
            rate={1.0}
            volume={1.0}
            isMuted={false}
            resizeMode="cover"
            shouldPlay
            isLooping
            style={styles.video}
          />
        </View>
      )}

      <TouchableOpacity
        style={isRecording ? styles.stopButton : styles.recordButton}
        onPress={isRecording ? stopRecording : startRecording}
      >
        <MaterialIcons
          name={isRecording ? 'stop' : 'fiber-manual-record'}
          size={30}
          color="#fff"
        />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginVertical: 20,
    alignItems: 'center',
  },
  header: {
    fontSize: 20,
    fontWeight: '600',
    marginBottom: 10,
  },
  cameraContainer: {
    width: '100%',
    height: 200,
    borderRadius: 10,
    overflow: 'hidden',
    backgroundColor: '#000',
  },
  camera: {
    flex: 1,
  },
  recordingIndicator: {
    position: 'absolute',
    top: 10,
    left: 10,
    flexDirection: 'row',
    alignItems: 'center',
  },
  recordingText: {
    color: 'red',
    marginLeft: 5,
    fontWeight: 'bold',
  },
  recordButton: {
    marginTop: 15,
    backgroundColor: 'red',
    borderRadius: 35,
    width: 70,
    height: 70,
    justifyContent: 'center',
    alignItems: 'center',
  },
  stopButton: {
    marginTop: 15,
    backgroundColor: 'grey',
    borderRadius: 35,
    width: 70,
    height: 70,
    justifyContent: 'center',
    alignItems: 'center',
  },
  videoContainer: {
    width: '100%',
    height: 200,
    marginTop: 20,
    borderRadius: 10,
    overflow: 'hidden',
  },
  video: {
    width: '100%',
    height: '100%',
  },
  loader: {
    marginTop: 10,
  },
});

export default VideoRecording;

 ERROR  TypeError: 0, _MediaContext.useMedia is not a function (it is undefined)

This error is located at:
    in VideoRecording (created by App)
    in RCTView (created by View)
    in View (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by App)
    in MediaProvider (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes