import React, { useContext, useEffect } from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Text } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { InformacionSabiasQue } from './InformacionSabiasQue';
import { ValorPagar } from './ValorPagar';
import { VistaPreviaValoPagar } from './VistaPreviaValoPagar';
import { ConfirmarTransaccion } from './ConfirmarTransaccion';
import { NavigationContainer } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { RouteCamaraQr } from './componetsQr/RouteCamara';
import { AuthContext } from '../context/Auth/AuthContext';
import { tokenValidator } from '../utility/tokenValidator';
import { ContactosPagar } from './ContactosPagar';
import { Loader } from './Loader';
export interface IconoPropiedades {
  label: string;
  name: string;
  color?: string;
  size?: number;
}
export interface ComponenteIcono {
  name: string;
  component: React.FC;
  icono?: IconoPropiedades;
  prop?: object;
}
export type PropsDuna = {
  componentes: ComponenteIcono[];
  tok?: string | null;
  pasarToken?: (token: string | null | undefined|object) => void;
};
export type Props = {
  componentes: ComponenteIcono[];
};
export function NavigationContainerS({ componentes }: any): JSX.Element {
  return (
    <NavigationContainer>
      {componentes}
    </NavigationContainer>
  )
}
export function DeUnaNavigate({ componentes, tok, pasarToken }: PropsDuna): JSX.Element {
  const { cargarToken,setDataBank,isTransaccion } = useContext(AuthContext);
  const [, setValidateTokenJwt] = React.useState<boolean>(false);
  const [isLoader, setIsLoader] = React.useState<boolean>(false);
  useEffect(() => {
    validateToken(tok!)
  }, [tok]);
  useEffect(() => {
    if(isTransaccion==true){
      pasarToken!({"mensaje":"realizado la transaccion","token":tok})
    }
  }, [isTransaccion]);
  const validateToken = async (token: string) => {
    setIsLoader(true);
    const validToken = await tokenValidator(token);
    console.log(validToken)
    if (token == null || validToken === false){
      pasarToken!(null);
      setValidateTokenJwt(false);
      setIsLoader(false);
    }
    else {
      pasarToken!(token);
      setValidateTokenJwt(true);
      cargarToken(token)
      setDataBank(validToken.data);
      setIsLoader(false);
    }
  }


if(isLoader){
  return (
    <Loader testID={''}/>
  )
}

  const Stack = createStackNavigator();
  return (
    <Stack.Navigator
      initialRouteName="Tabs"
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="Prueba">
        {() => (
          <>
            <Text>SEE</Text>
          </>
        )}
      </Stack.Screen>
      <Stack.Screen name="Tabs">
        {() => {
          return <TabNavigation componentes={componentes} />;
        }}
      </Stack.Screen>
      <Stack.Screen name="InformacionCard">
        {() => {
          return <InformacionSabiasQue />;
        }}
      </Stack.Screen>
      <Stack.Screen name="PayRecibe">{() => <ValorPagar />}</Stack.Screen>
      <Stack.Screen name="Confirmacion">
        {() => <VistaPreviaValoPagar />}
      </Stack.Screen>
      <Stack.Screen name="ConfirmarTransaccion">
        {() => <ConfirmarTransaccion />}
      </Stack.Screen>
      <Stack.Screen name="CamaraQrNavigate">
        {() => <RouteCamaraQr />}
      </Stack.Screen>
      <Stack.Screen name="ContactosPagar">
        {() => <ContactosPagar />}
      </Stack.Screen>
    </Stack.Navigator>
  );
}
export const TabNavigation = ({ componentes }: Props) => {

  const { token} = useContext(AuthContext);
  const Tab = createBottomTabNavigator();

  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      {componentes &&
        componentes.map((item: ComponenteIcono) => (
          <Tab.Screen

            key={item.name}
            name={item.name}
            listeners={{
              tabPress: async () => {
                if (token) {
                  if (token == null || ! await tokenValidator(token)) {
                    console.log("se volvio indefinido" + token);
                  }
                }
              },
            }}
            options={{
              tabBarLabel: item.icono!.label,
              tabBarIcon: ({ color, size }) => (
                <Icon name={item.icono!.name} size={size} color={color} />

              )
            }}

          >
            {() => <item.component {...item.prop} />}
          </Tab.Screen>
        ))}
    </Tab.Navigator>
  );
};