import { useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { isMyIdError, start } from 'myid-sdk';

// Replace with a sessionId issued by your backend and the hashes from MyID.
const SESSION_ID = '';
const CLIENT_HASH = '';
const CLIENT_HASH_ID = '';

export default function App() {
  const [status, setStatus] = useState('Idle');

  const onPress = async () => {
    setStatus('Starting...');

    try {
      const result = await start({
        config: {
          sessionId: SESSION_ID,
          clientHash: CLIENT_HASH,
          clientHashId: CLIENT_HASH_ID,
          environment: 'DEBUG',
        },
      });

      setStatus(`Code ${result.code}`);
    } catch (error) {
      setStatus(
        isMyIdError(error) ? `${error.code}: ${error.message}` : 'Unknown error'
      );
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.status}>{status}</Text>
      <Button title="Start MyID" onPress={onPress} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 16,
  },
  status: {
    fontSize: 16,
  },
});