import React from 'react';
import {OnboardingStack} from './OnboardingStackNavigator';
import {
  Login,
  InvitationCodeVerification,
  RegistrationOne,
  RegistrationTwo,
  RegistrationThree,
  Verification,
  ProfileOnboarding,
  Checkpoint,
  SocialMedia,
  PasswordResetRequest,
  PasswordReset,
  WelcomeScreen,
  CategorySelection,
  AddWaitlistUserScreen,
  WaitlistSuccessScreen,
} from '../../screens';
import {StackCardInterpolationProps} from '@react-navigation/stack';
import TaggPopup from '../../components/common/TaggPopup';

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,
        }}
      />
      <OnboardingStack.Screen
        name="PasswordResetRequest"
        component={PasswordResetRequest}
        options={{
          gestureEnabled: false,
        }}
      />
      <OnboardingStack.Screen
        name="WelcomeScreen"
        component={WelcomeScreen}
        options={{
          gestureEnabled: false,
        }}
      />
      <OnboardingStack.Screen
        name="CategorySelection"
        component={CategorySelection}
        options={{
          gestureEnabled: false,
        }}
      />
      <OnboardingStack.Screen
        name="TaggPopup"
        component={TaggPopup}
        options={{
          gestureEnabled: false,
          cardStyle: {
            backgroundColor: 'transparent',
          },
          cardOverlayEnabled: true,
          cardStyleInterpolator: ({current: {progress}}) => ({
            cardStyle: {
              opacity: progress.interpolate({
                inputRange: [0, 0.5, 0.9, 1],
                outputRange: [0, 0.25, 0.7, 1],
              }),
            },
            overlayStyle: {
              backgroundColor: '#505050',
              opacity: progress.interpolate({
                inputRange: [0, 1],
                outputRange: [0, 0.9],
                extrapolate: 'clamp',
              }),
            },
          }),
        }}
      />
      <OnboardingStack.Screen
        name="PasswordReset"
        component={PasswordReset}
        options={{
          gestureEnabled: false,
        }}
      />
      <OnboardingStack.Screen
        name="InvitationCodeVerification"
        component={InvitationCodeVerification}
      />
      <OnboardingStack.Screen
        name="AddWaitlistUser"
        component={AddWaitlistUserScreen}
      />
      <OnboardingStack.Screen
        name="WaitlistSuccess"
        component={WaitlistSuccessScreen}
      />
      <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;
