import {StackCardInterpolationProps} from '@react-navigation/stack';
import React from 'react';
import {
  BasicInfoOnboarding,
  InvitationCodeVerification,
  Login,
  PasswordReset,
  PasswordResetRequest,
  PasswordVerification,
  PhoneVerification,
  ProfileInfoOnboarding,
  WelcomeScreen,
} from '../../screens';
import {modalStyle} from '../main';
import {OnboardingStack} from './OnboardingStackNavigator';

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

const Onboarding: React.FC = () => {
  return (
    <OnboardingStack.Navigator
      initialRouteName="Login"
      screenOptions={{headerShown: false}}>
      <OnboardingStack.Screen
        name="Login"
        component={Login}
        options={{
          gestureEnabled: false,
          cardStyleInterpolator: forFade,
          ...modalStyle,
        }}
      />
      <OnboardingStack.Screen
        name="PasswordResetRequest"
        component={PasswordResetRequest}
        options={{
          gestureEnabled: false,
        }}
      />
      <OnboardingStack.Screen name="WelcomeScreen" component={WelcomeScreen} />
      <OnboardingStack.Screen
        name="BasicInfoOnboarding"
        component={BasicInfoOnboarding}
      />
      <OnboardingStack.Screen
        name="PasswordReset"
        component={PasswordReset}
        options={{
          gestureEnabled: false,
          ...modalStyle,
        }}
      />
      <OnboardingStack.Screen
        name="PasswordVerification"
        component={PasswordVerification}
        options={{
          ...modalStyle,
        }}
      />
      <OnboardingStack.Screen
        name="PhoneVerification"
        component={PhoneVerification}
        options={{...modalStyle}}
      />
      <OnboardingStack.Screen
        name="ProfileInfoOnboarding"
        component={ProfileInfoOnboarding}
        options={{...modalStyle}}
      />
      <OnboardingStack.Screen
        name="InvitationCodeVerification"
        component={InvitationCodeVerification}
        options={{
          ...modalStyle,
        }}
      />
    </OnboardingStack.Navigator>
  );
};

export default Onboarding;