import { useState, useRef, useEffect } from "react";
import { View, Pressable, Text, StyleSheet } from "react-native";
import { CameraView, useCameraPermissions } from "expo-camera";

export function CameraScreen() {
  const [permission, requestPermission] = useCameraPermissions();
  const ref = useRef<CameraView>(null);
  const [facing, setFacing] = useState<"back" | "front">("back");

  if (!permission) return <View />;
  if (!permission.granted) {
    return (
      <Pressable onPress={requestPermission}>
        <Text>Grant camera access</Text>
      </Pressable>
    );
  }

  return (
    <View style={styles.flex}>
      <CameraView ref={ref} style={styles.flex} facing={facing} />
      <Pressable
        style={styles.btn}
        onPress={async () => {
          const photo = await ref.current?.takePictureAsync();
          console.log(photo?.uri);
        }}
      >
        <Text>Capture</Text>
      </Pressable>
      <Pressable
        onPress={() => setFacing((f) => (f === "back" ? "front" : "back"))}
      >
        <Text>Flip</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  flex: { flex: 1 },
  btn: { padding: 16, backgroundColor: "#fff" },
});