import React from "react";
import { StyleSheet, View, Button } from "react-native";
import {
  FaceConfigPreset,
  FaceConfigType,
  FaceEvent,
  buildCameraView,
  FaceCameraLensDirection,
} from "@biopassid/face-sdk-react-native";

export function App() {
  const config = FaceConfigPreset.getConfig(
    FaceConfigType.FACE_CAPTURE
  )
    .setLicenseKey("your-license-key")
    .setDefaultCameraPosition(FaceCameraLensDirection.FRONT)
    .setShowFlipCameraButton(true)
    .setStringsScreenTitle("Capturando Face")
    .setStylesOverlayColor("#CC000000");

  function callback(event: FaceEvent) {
    // handle Face return
    console.log(event.photo);
  }

  function handleButton() {
    buildCameraView(config, callback);
  };

  return (
    <View style={styles.container}>
      <Button onPress={handleButton} title="Capture Face" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: '#FFFFFF',
  },
});

import React from 'react';
import {StyleSheet, View, Button} from 'react-native';
import {
  FaceConfigPreset,
  FaceConfigType,
  FaceEvent,
  buildCameraView,
} from '@biopassid/face-sdk-react-native';
import {Base64} from './utils/Base64';

export default function App() {
  // Instantiate Face config by passing your license key
  const config = FaceConfigPreset.getConfig(
    FaceConfigType.FACE_CAPTURE,
  ).setLicenseKey('your-license-key');

  // Handle Face callback
  async function callback(event: FaceEvent) {
    // Encode image to base64 string
    const imageBase64 = Base64.arrayBufferToBase64(event.photo);

    // Create headers passing your api key
    const headers = {
      'Content-Type': 'application/json',
      'Ocp-Apim-Subscription-Key': 'your-api-key',
    };

    // Create json body
    const body = JSON.stringify({
      Person: {
        CustomID: 'your-customID',
        Face: [{'Face-1': imageBase64}],
      },
    });

    // Execute request to BioPass ID API
    const response = await fetch(
      'https://api.biopassid.com/multibiometrics/enroll',
      {
        method: 'POST',
        headers,
        body,
      },
    );
    const data = await response.json();

    // Handle API response
    console.log('Response status: ', response.status);
    console.log('Response body: ', data);
  }

  // Build Face camera view
  function handleButton() {
    buildCameraView(config, callback);
  }

  return (
    <View style={styles.container}>
      <Button onPress={handleButton} title="Capture Face" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#FFFFFF',
  },
});

const chars =
  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';

export const Base64 = {
  btoa: (input: string = '') => {
    let str = input;
    let output = '';

    for (
      let block = 0, charCode, i = 0, map = chars;
      str.charAt(i | 0) || ((map = '='), i % 1);
      output += map.charAt(63 & (block >> (8 - (i % 1) * 8)))
    ) {
      charCode = str.charCodeAt((i += 3 / 4));

      if (charCode > 0xff) {
        throw new Error(
          "'btoa' failed: The string to be encoded contains characters outside of the Latin1 range.",
        );
      }

      block = (block << 8) | charCode;
    }

    return output;
  },

  arrayBufferToBase64: (buffer: ArrayBuffer) => {
    var binary = '';
    var bytes = new Uint8Array(buffer);
    bytes.forEach((item: number) => {
      binary += String.fromCharCode(item);
    });
    return Base64.btoa(binary);
  },
};

function callback(event: FaceEvent) {
  console.log('photo: ', event.photo);
  doSomething(event);
}

const config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
  .setLicenseKey('your-license-key');

const config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
  .setStylesFontFamily("roboto_mono_bold_italic");

const config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
    .setStylesCustomFont("RobotoMono-BoldItalic")

const config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
  // changing back button icon
  .setStylesBackButtonIcon("ic_baseline_camera")
  // changing flash button icon
  .setStylesFlashButtonIcon("ic_baseline_camera")
  // changing flip camera button icon
  .setStylesFlipCameraButtonIcon("ic_baseline_camera")
  // changing capture button icon
  .setStylesCaptureButtonIcon("ic_baseline_camera");

const config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
    // changing back button icon
    .setStylesBackButtonIcon("photo_camera")
    // changing flash button icon
    .setStylesFlashButtonIcon("photo_camera")
    // changing flip camera button icon
    .setStylesFlipCameraButtonIcon("photo_camera")
    // changing capture button icon
    .setStylesCaptureButtonIcon("photo_camera")

const config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
  .setCaptureButtonType(FaceCaptureButtonType.CUSTOM)
  .setStylesCustomButtonBackgroundColor("#FFFF00")
  .setStylesCustomButtonTextColor("#FF00FF")
  .setStringsCustomButtonText("Capture");

const config = FaceConfigPreset.getConfig(FaceConfigType.FACE_CAPTURE)
    .setCaptureButtonType(FaceCaptureButtonType.ICON)
    .setStylesCaptureButtonIcon("ic_baseline_camera")
    .setStylesCaptureButtonColor("#FF0000")
    .setStylesCaptureButtonSize({width: 76, height: 76});