/** Enabling Native Gestures API */
import 'react-native-gesture-handler';
import React from 'react';
import { Easing, LogBox } from 'react-native';
import { enableScreens } from 'react-native-screens';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
import { StackParams, PluggyConnectProps, ConnectProps } from './types';
import {
  WelcomeScreen,
  CountriesScreen,
  InstitutionsScreen,
  ConnectScreen,
  ConnectingScreen,
  ConnectedScreen,
} from './screens';
import { PluggyProvider } from './hoc/withPluggy';
import { ConnectPropsProvider } from './hoc/withConnectProps';
import { Header, LONG_HEADER_HEIGHT, SHORT_HEADER_HEIGHT } from './components/Header';
import { StackHeaderProps, TransitionSpec } from '@react-navigation/stack/lib/typescript/src/types';
import Pluggy from 'pluggy-js';

/** Enabling Native Screens API */
enableScreens();

const Stack = createStackNavigator<StackParams>();

LogBox.ignoreLogs(['Require cycle:']);

const MyTheme = {
  ...DefaultTheme,
  dark: true,
  colors: {
    ...DefaultTheme.colors,
    background: '#ffffff',
  },
};

const customTransitions: {
  open: TransitionSpec;
  close: TransitionSpec;
} = {
  open: {
    animation: 'timing',
    config: { easing: Easing.sin },
  },
  close: {
    animation: 'timing',
    config: { easing: Easing.ease },
  },
};

const PluggyConnect = (props: PluggyConnectProps) => {
  const { token, withSandbox = false, onError, onSuccess } = props;

  const pluggy = new Pluggy(token);

  const connectProps: ConnectProps = {
    onError,
    onSuccess,
    withSandbox,
  };

  return (
    <ConnectPropsProvider value={connectProps}>
      <PluggyProvider value={pluggy}>
        <NavigationContainer independent theme={MyTheme}>
          <Stack.Navigator
            initialRouteName="Welcome"
            headerMode="float"
            screenOptions={{
              header: (headerProps: StackHeaderProps) => <Header {...headerProps} />,
              headerTransparent: true,
              gestureEnabled: true,
              ...TransitionPresets.SlideFromRightIOS,
              transitionSpec: customTransitions,
              gestureDirection: 'horizontal',
              cardOverlayEnabled: false,
              cardShadowEnabled: false,
              cardStyle: { paddingTop: LONG_HEADER_HEIGHT },
            }}
          >
            <Stack.Screen
              name="Welcome"
              component={WelcomeScreen}
              options={{ title: 'MyCompany uses Pluggy to connect with your bank' }}
            />
            <Stack.Screen
              name="Countries"
              component={CountriesScreen}
              options={{
                cardStyle: { paddingTop: SHORT_HEADER_HEIGHT },
              }}
            />
            <Stack.Screen
              name="Institutions"
              options={{
                cardStyle: { paddingTop: SHORT_HEADER_HEIGHT },
              }}
              component={InstitutionsScreen}
            />
            <Stack.Screen name="Connect" component={ConnectScreen} />
            <Stack.Screen name="Connecting" component={ConnectingScreen} />
            <Stack.Screen name="Connected" component={ConnectedScreen} />
          </Stack.Navigator>
        </NavigationContainer>
      </PluggyProvider>
    </ConnectPropsProvider>
  );
};

export { PluggyConnect };