import {StackCardInterpolationProps} from '@react-navigation/stack';
import React from 'react';
import TaggPopup from '../../components/common/TaggPopup';
import {
  InvitationCodeVerification,
  Login,
  OnboardingStepThree,
  OnboardingStepTwo,
  PasswordReset,
  PasswordResetRequest,
  PhoneVerification,
  Verification,
  WelcomeScreen,
} from '../../screens';
import OnboardingStepOne from '../../screens/onboarding/OnboardingStepOne';
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="TaggPopup"
        component={TaggPopup}
        options={{
          gestureEnabled: false,
          ...modalStyle,
        }}
      />
      <OnboardingStack.Screen
        name="PasswordReset"
        component={PasswordReset}
        options={{
          gestureEnabled: false,
          ...modalStyle,
        }}
      />
      <OnboardingStack.Screen
        name="Verification"
        component={Verification}
        options={{
          ...modalStyle,
        }}
      />
      <OnboardingStack.Screen
        name="OnboardingStepOne"
        component={OnboardingStepOne}
      />
      <OnboardingStack.Screen
        name="PhoneVerification"
        component={PhoneVerification}
        options={{...modalStyle}}
      />
      <OnboardingStack.Screen
        name="OnboardingStepTwo"
        component={OnboardingStepTwo}
        options={{...modalStyle}}
      />
      <OnboardingStack.Screen
        name="OnboardingStepThree"
        component={OnboardingStepThree}
        options={{...modalStyle}}
      />
      <OnboardingStack.Screen
        name="InvitationCodeVerification"
        component={InvitationCodeVerification}
        options={{
          ...modalStyle,
        }}
      />
    </OnboardingStack.Navigator>
  );
};

export default Onboarding;
