import React from 'react'
import { createStackNavigator } from '@react-navigation/stack';
import { Alert } from 'react-native';
import { CodigoQr } from './QrCamara';
import { useNavigation } from '@react-navigation/native';
import { ValorPagar } from '../ValorPagar';
import { ConfirmarTransaccion } from './ConfirmarTransaccion';
export const RouteCamaraQr = () => {
    const Stack = createStackNavigator();
    const navigate = useNavigation<any>();
    const on = (data: any) => {
      console.log(data)
      let dataJson:string|object|any;
      try{
         
          dataJson = JSON.parse(data.data);
        }
        catch(e){
          console.log('no es un json');
          dataJson = data.data;
        }
        console.log(dataJson["number"])
        data.data && typeof dataJson === 'object' && dataJson.hasOwnProperty('number')
          ? navigate.navigate('ValorPagar', dataJson)
          : Alert.alert('Error', 'No es un codigo valido');
      };
      
  return (
    <Stack.Navigator
    initialRouteName="CodigoQr"
    screenOptions={{
      headerShown: false,
    }}
  >
    <Stack.Screen name="CodigoQr">
      {() => (
        <>
          <CodigoQr on={on}></CodigoQr>
        </>
      )}
    </Stack.Screen>
    <Stack.Screen name="ValorPagar">
      {() => {
        return <ValorPagar/>;
      }}
    </Stack.Screen>
    <Stack.Screen name="ConfirmarTransaccion">
    {() => <ConfirmarTransaccion></ConfirmarTransaccion>}
    </Stack.Screen>
  </Stack.Navigator>
  )
}