import React, {useEffect, useState} from 'react';
import {
  View,
  Button,
  NativeModules,
  NativeEventEmitter,
  Image,
  StyleSheet,
} from 'react-native';

const {MyIdModule} = NativeModules;

type SuccessEvent = {
  code: string;
  comparison: number;
  image: string;
};

type ErrorEvent = {
  message: string;
  code: number;
};

const clientId = '';
const clientHash = '';
const clientHashId = ''
const passportData = '';
const dateOfBirth = '';
const buildMode = 'PRODUCTION';

const App = () => {
  const [imageBase64, setImageBase64] = useState('');

  useEffect(() => {
    if (MyIdModule) {
      const myidEvents = new NativeEventEmitter(MyIdModule);

      const onSuccess = (event: SuccessEvent) => {
        console.log('onSuccess received', event.code, event.comparison);
        setImageBase64(event.image);
      };
      const onError = (event: ErrorEvent) =>
        console.log('onError received', event);
      const onUserExited = (event: any) =>
        console.log('onUserExited received', event);

      myidEvents.addListener('onSuccess', onSuccess);
      myidEvents.addListener('onError', onError);
      myidEvents.addListener('onUserExited', onUserExited);

      return () => {
        myidEvents.removeAllListeners('onSuccess');
        myidEvents.removeAllListeners('onError');
        myidEvents.removeAllListeners('onUserExited');
      };
    }
  }, []);

  const startSdk = () => {
    if (MyIdModule) {
      console.log('Calling startMyId');
      MyIdModule.startMyId(
        clientId,
        clientHash,
        clientHashId,
        passportData,
        dateOfBirth,
        buildMode,
      );
      console.log('Called startMyId');
    } else {
      console.log('Module is not available');
    }
  };

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      {imageBase64 ? (
        <Image
          style={styles.image}
          source={{uri: `data:image/jpeg;base64,${imageBase64}`}}
        />
      ) : null}
      <Button title="Start MyID" color="#841584" onPress={startSdk} />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
  },
});