import React from 'react';
import {OnboardingStack} from './OnboardingStack';
import {
  Login,
  InvitationCodeVerification,
  RegistrationOne,
  RegistrationTwo,
  RegistrationThree,
  Verification,
  ProfileOnboarding,
  Checkpoint,
  Splash,
  SocialMedia,
} from '../../screens';
import {StackCardInterpolationProps} from '@react-navigation/stack';

const forFade = ({current}: StackCardInterpolationProps) => ({
  cardStyle: {
    opacity: current.progress,
  },
});

const Onboarding: React.FC = () => {
  return (
    <OnboardingStack.Navigator
      initialRouteName="Splash"
      screenOptions={{headerShown: false}}>
      <OnboardingStack.Screen name="Splash" component={Splash} />
      <OnboardingStack.Screen
        name="Login"
        component={Login}
        options={{
          gestureEnabled: false,
          cardStyleInterpolator: forFade,
        }}
      />
      <OnboardingStack.Screen
        name="InvitationCodeVerification"
        component={InvitationCodeVerification}
      />
      <OnboardingStack.Screen
        name="RegistrationOne"
        component={RegistrationOne}
      />
      <OnboardingStack.Screen
        name="RegistrationTwo"
        component={RegistrationTwo}
      />
      <OnboardingStack.Screen
        name="RegistrationThree"
        component={RegistrationThree}
      />
      <OnboardingStack.Screen name="Checkpoint" component={Checkpoint} />
      <OnboardingStack.Screen name="Verification" component={Verification} />
      <OnboardingStack.Screen
        name="ProfileOnboarding"
        component={ProfileOnboarding}
        options={{
          gestureEnabled: false,
        }}
      />
      <OnboardingStack.Screen name="SocialMedia" component={SocialMedia} />
    </OnboardingStack.Navigator>
  );
};

export default Onboarding;