import Stack from '@pages/globalStackManager';
import {NavigatorScreenParams} from '@react-navigation/native';
import {
  BottomTabBarProps,
  createBottomTabNavigator,
} from '@react-navigation/bottom-tabs';
import CalendarTab, {
  CalendarStackNavigatorParamList,
} from './tabs/main/CalendarTab';
import ChatsTab, {ChatsStackNavigatorParamList} from './tabs/main/ChatsTab';
import MapTab, {MapStackNavigatorParamList} from './tabs/main/MapTab';
import ProfileTab, {
  ProfileStackNavigatorParamList,
} from './tabs/main/ProfileTab';
import {FadeInView} from '@helper/animations';
import {View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {
  RegistrationScreenAnim,
  RegistrationStackNavigatorParamList,
} from './registration/registration';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
import {MyIcon} from '@components/MyIcon';
import {useSelector} from 'react-redux';
import {RootState, store as reduxStore} from '@redux/store';
import {Text} from '@gluestack-ui/themed';
import {MyTouchableOpacity} from '@components/MyTouchableOpacity';

export type RootStackNavigatorParamList = {
  Home: NavigatorScreenParams<HomeStackNavigatorParamList>;
  Registration: NavigatorScreenParams<RegistrationStackNavigatorParamList>;
};

export type RootScreenNavigationProp =
  NativeStackNavigationProp<RootStackNavigatorParamList>;

export default function Navigation() {
  const currentUser =
    reduxStore.getState().appVariables.preferences.selectedAccount;

  console.log('NAVIGATION', currentUser);

  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
      initialRouteName={currentUser === 'none' ? 'Registration' : 'Home'}>
      <Stack.Screen name="Home" component={HomeStack} />
      <Stack.Screen name="Registration" component={RegistrationScreenAnim} />
    </Stack.Navigator>
  );
}

export type HomeStackNavigatorParamList = {
  Profile: NavigatorScreenParams<ProfileStackNavigatorParamList>;
  Calendar: NavigatorScreenParams<CalendarStackNavigatorParamList>;
  Map: NavigatorScreenParams<MapStackNavigatorParamList>;
  Chats: NavigatorScreenParams<ChatsStackNavigatorParamList>;
};

function ProfileTabAnim(props: any) {
  return (
    <FadeInView>
      <ProfileTab {...props} />
    </FadeInView>
  );
}

function CalendarTabAnim(props: any) {
  return (
    <FadeInView>
      <CalendarTab {...props} />
    </FadeInView>
  );
}

function MapTabAnim(props: any) {
  return (
    <FadeInView>
      <MapTab {...props} />
    </FadeInView>
  );
}

function ChatsTabAnim(props: any) {
  return (
    <FadeInView>
      <ChatsTab {...props} />
    </FadeInView>
  );
}

const tabBarIcons = ['account-circle', 'calendar-month', 'map', 'chat'];

function CustomTabBar(props: BottomTabBarProps) {
  const {state, navigation} = props;

  const lang = useSelector(
    (state: RootState) => state.appVariables.lang.navigation.home,
  );

  const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme.colors,
  );

  const tabNames = [
    lang.profile.tabName,
    lang.calendar.tabName,
    lang.map.tabName,
    lang.chats.tabName,
  ];

  return (
    <View style={{backgroundColor: currentTheme.backgroundDark400}}>
      <View
        style={{
          flexDirection: 'row',
          margin: 10,
          backgroundColor: currentTheme.backgroundDark300,
          borderRadius: 20,
          position: 'absolute',
          zIndex: 100,
          bottom: 0,
          borderColor: currentTheme.backgroundDark300,
          borderWidth: 3,
        }}>
        {state.routes.map((route, index) => {
          const isFocused = state.index === index;

          const onPress = () => {
            const event = navigation.emit({
              type: 'tabPress',
              target: route.key,
              canPreventDefault: true,
            });

            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name);
            }
          };

          const onLongPress = () => {
            navigation.emit({
              type: 'tabLongPress',
              target: route.key,
            });
          };

          const gradientColors = isFocused
            ? [currentTheme.secondary200, currentTheme.primary400]
            : [currentTheme.backgroundDark300, currentTheme.backgroundDark300];

          return (
            <MyTouchableOpacity
              key={route.key}
              accessibilityRole="button"
              onPress={onPress}
              onLongPress={onLongPress}
              style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 20,
                marginRight: state.routes.length - 1 !== index ? 4 : 0,
              }}>
              <LinearGradient
                colors={gradientColors}
                start={{x: 0, y: 1}}
                end={{x: 1, y: 0}}
                style={{
                  paddingTop: 4,
                  paddingBottom: 4,
                  borderRadius: 20,
                  width: '100%',
                  alignItems: 'center',
                }}>
                <MyIcon
                  name={tabBarIcons[index]}
                  color={
                    isFocused ? currentTheme.white : currentTheme.textLight100
                  }
                  size={20}
                />
                {isFocused && <Text>{tabNames[index]}</Text>}
              </LinearGradient>
            </MyTouchableOpacity>
          );
        })}
      </View>
    </View>
  );
}

const Tab = createBottomTabNavigator<HomeStackNavigatorParamList>();

function HomeStack() {
  return (
    <Tab.Navigator
      tabBar={props => <CustomTabBar {...props} />}
      screenOptions={{headerShown: false, unmountOnBlur: false}}>
      <Tab.Screen name="Profile" component={ProfileTabAnim} />
      <Tab.Screen name="Calendar" component={CalendarTabAnim} />
      <Tab.Screen name="Map" component={MapTabAnim} />
      <Tab.Screen name="Chats" component={ChatsTabAnim} />
    </Tab.Navigator>
  );
}
