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

import {
  Camera,
  useCameraDevice,
  useCameraPermission,
  useCodeScanner,
  useFrameProcessor,
} from "react-native-vision-camera";

const BarcodeMask = () => {
  // create your barcode mask

  return null;
};

const BarcodeQrCodeScanner = () => {
  const device = useCameraDevice("back");

  const { hasPermission, requestPermission } = useCameraPermission();

  const frameProcessor = useFrameProcessor((frame) => {
    "worklet";
  }, []);

  const codeScanner = useCodeScanner({
    codeTypes: ["qr", "code-128", "code-39", "code-93"],

    onCodeScanned: (codes) => {
      console.log(codes);
    },
  });

  if (!device) {
    return (
      <View style={styles.wrapperCenter}>
        <Text style={styles.centerText}>Camera is not found.</Text>
      </View>
    );
  } else if (!hasPermission) {
    return (
      <View style={styles.wrapperCenter}>
        <Text style={styles.centerText}>
          {`Camera permission must required.\nPlease grant camera permission from app settings.`}
        </Text>
      </View>
    );
  }

  return (
    <>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        frameProcessor={frameProcessor}
        audio={false}
        enableZoomGesture={true}
        codeScanner={codeScanner}
        video={false}
        photo={false}
      />

      <BarcodeMask />
    </>
  );
};

const styles = StyleSheet.create({
  wrapperCenter: {
    alignItems: "center",
    justifyContent: "center",
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "#FFF",
  },
  centerText: {
    fontWeight: "600",
    textAlign: "center",
    lineHeight: 20,
    color: "#000",
  },
});

export default BarcodeQrCodeScanner;