import Stack from '@pages/globalStackManager';
import {NavigatorScreenParams} from '@react-navigation/native';
import {
  BottomTabBarProps,
  createBottomTabNavigator,
} from '@react-navigation/bottom-tabs';
import CalendarTab from './tabs/main/CalendarTab';
import ChatsTab from './tabs/main/ChatsTab';
import MapTab from './tabs/main/MapTab';
import ProfileTab, {
  ProfileStackNavigatorParamList,
} from './tabs/main/ProfileTab';
import {FadeInView, SlideFromLeftView} from '@helper/animations';
import {Text, TouchableOpacity, 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';

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

export type RootScreenNavigationProp =
  NativeStackNavigationProp<RootStackNavigatorParamList>;

export default function Navigation() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
      initialRouteName="Registration">
      <Stack.Screen name="Home" component={HomeStack} />
      <Stack.Screen name="Registration" component={RegistrationScreenAnim} />
    </Stack.Navigator>
  );
}

export type HomeStackNavigatorParamList = {
  Profile: NavigatorScreenParams<ProfileStackNavigatorParamList>;
};

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

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

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

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

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

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

  return (
    <View
      style={{
        flexDirection: 'row',
        margin: 10,
        backgroundColor: '#26263f',
        borderRadius: 20,
      }}>
      {state.routes.map((route, index) => {
        const {options} = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        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,
          });
        };

        // TODO: retrieve colors from theme
        const gradientColors = isFocused
          ? ['#931278', '#6030da']
          : ['#26263f', '#26263f'];

        return (
          <TouchableOpacity
            key={route.key}
            accessibilityRole="button"
            //accessibilityState={isFocused ? ['selected'] : []}
            //accessibilityLabel={options.tabBarAccessibilityLabel}
            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 ? '#fff' : '#ccc'}
                size={20} />
              {isFocused && (
                <Text style={{color: '#fff'}}>{label.toString()}</Text>
              )}
            </LinearGradient>
          </TouchableOpacity>
        );
      })}
    </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>
  );
}
