import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import {useSelector} from 'react-redux';
import {RootState} from '@redux/store';
import {MyIconButton} from '@components/MyButton';
import {useNavigation} from '@react-navigation/native';
import {
  ProfileOverview,
  ProfileSettings,
  UpdatePassword,
  UpdateUsername,
} from '@pages/profile/profile';
import {Help} from '@pages/profile/help';
import {About} from '@pages/profile/about';

export const ProfileTabName = 'Profile';

export type ProfileStackNavigatorParamList = {
  Overview: undefined;
  Settings: undefined;
  UpdateUsername: undefined;
  UpdatePhoneNumber: undefined;
  VerifyUpdatedPhoneNumber: undefined;
  UpdatePassword: undefined;
  Help: undefined;
  About: undefined;
};

const ProfileStack =
  createNativeStackNavigator<ProfileStackNavigatorParamList>();

export type ProfileScreenNavigationProp =
  NativeStackNavigationProp<ProfileStackNavigatorParamList>;

export default function ProfileTab() {
  const navigation = useNavigation<ProfileScreenNavigationProp>();
  const lang = useSelector(
    (state: RootState) => state.appVariables.lang.navigation.home.profile,
  );
  const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme.colors,
  );

  const headerStyle = {
    backgroundColor: currentTheme.backgroundDark400,
  };

  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen
        name="Overview"
        options={{
          animation: 'slide_from_left',
          title: lang.overview,
          headerShown: true,
          headerStyle: headerStyle,
          headerShadowVisible: false,
          headerRight: () => (
            <MyIconButton
              MyIconProps={{name: 'settings', size: 24}}
              onPress={() => navigation.navigate('Settings')}
            />
          ),
        }}
        component={ProfileOverview}
      />

      <ProfileStack.Screen
        name="Settings"
        options={{
          animation: 'slide_from_right',
          title: lang.settings,
          headerShown: true,
          headerStyle: headerStyle,
          headerShadowVisible: false,
          headerTitleAlign: 'center',
        }}
        component={ProfileSettings}
      />

      <ProfileStack.Screen
        name="UpdateUsername"
        options={{
          animation: 'slide_from_right',
          title: lang.updateUsername,
          headerShown: true,
          headerStyle: headerStyle,
          headerShadowVisible: false,
          headerTitleAlign: 'center',
        }}
        component={UpdateUsername}
      />

      <ProfileStack.Screen
        name="UpdatePassword"
        options={{
          animation: 'slide_from_right',
          title: lang.updatePassword,
          headerShown: true,
          headerStyle: headerStyle,
          headerShadowVisible: false,
          headerTitleAlign: 'center',
        }}
        component={UpdatePassword}
      />

      <ProfileStack.Screen
        name="Help"
        options={{
          animation: 'slide_from_right',
          title: lang.help,
          headerShown: true,
          headerStyle: headerStyle,
          headerShadowVisible: false,
          headerTitleAlign: 'center',
        }}
        component={Help}
      />

      <ProfileStack.Screen
        name="About"
        options={{
          animation: 'slide_from_right',
          title: lang.about,
          headerShown: true,
          headerStyle: headerStyle,
          headerShadowVisible: false,
          headerTitleAlign: 'center',
        }}
        component={About}
      />
    </ProfileStack.Navigator>
  );
}
