import React, { forwardRef } from "react";
import { StyleSheet, View } from "react-native";
import { CameraView as ExpoCameraView } from "expo-camera";

type Props = {
  children?: React.ReactNode;
  onBarcodeScanned?: (data: string) => void;
  enableBarcode?: boolean;
};

export const CameraView = forwardRef<ExpoCameraView, Props>(function CameraView(
  { children, onBarcodeScanned, enableBarcode = Boolean(onBarcodeScanned) },
  ref,
) {
  return (
    <View style={styles.wrap}>
      <ExpoCameraView
        ref={ref}
        style={StyleSheet.absoluteFill}
        facing="back"
        barcodeScannerSettings={
          enableBarcode ? { barcodeTypes: ["qr"] } : undefined
        }
        onBarcodeScanned={
          enableBarcode && onBarcodeScanned
            ? ({ data }) => onBarcodeScanned(data)
            : undefined
        }
      />
      {children}
    </View>
  );
});

const styles = StyleSheet.create({
  wrap: { flex: 1, overflow: "hidden", backgroundColor: "#000" },
});