import Stack from '@pages/globalStackManager';
import {NavigatorScreenParams} from '@react-navigation/native';
import {
  BottomTabBarProps,
  createBottomTabNavigator,
} from '@react-navigation/bottom-tabs';

import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
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';

export type RootStackNavigatorParamList = {
  Home: NavigatorScreenParams<HomeStackNavigatorParamList>;
  //Register: NavigatorScreenParams<LoginStackNavigatorParamList>;
};

export default function Navigation() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}>
      <Stack.Screen name="Home" component={HomeStack} />
      <Stack.Screen name="Register" component={RegisterStack} />
    </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>
  );
}

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

        console.log('isFocused', isFocused);

        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',
              //backgroundColor: '#26263f',
              backgroundColor: 'red',
              padding: 10,
              borderRadius: 20,
              marginRight: state.routes.length - 1 !== index ? 4 : 0,*/

              flex: 1,
              alignItems: 'center',
              justifyContent: 'center',
              //backgroundColor: '#26263f',
              //backgroundColor: 'red',
              // padding: 10,
              borderRadius: 20,
              marginRight: state.routes.length - 1 !== index ? 4 : 0,
            }}>
            <LinearGradient
              colors={gradientColors}
              start={{x: 0, y: 1}}
              end={{x: 1, y: 0}}
              style={{
                padding: 10,
                borderRadius: 20,
                width: '100%',
                alignItems: 'center',
                //marginRight: state.routes.length - 1 !== index ? 4 : 0,
              }}>
              <Text
                style={{
                  color: isFocused ? '#fff' : '#ccc',
                }}>
                {label}
              </Text>
            </LinearGradient>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

function HomeStack() {
  return (
    <Tab.Navigator
      tabBar={props => <CustomTabBar {...props} />}
      screenOptions={{headerShown: false, unmountOnBlur: false}}>
      <Tab.Screen
        name="Profile"
        component={ProfileTabAnim}
        options={{
          tabBarIcon: ({color, size}) => (
            <MaterialIcon name="chat" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Calendar"
        component={CalendarTabAnim}
        options={{
          tabBarIcon: ({color, size}) => (
            <MaterialIcon name="account-circle" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Map"
        component={MapTabAnim}
        options={{
          tabBarIcon: ({color, size}) => (
            <MaterialIcon name="map" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Chats"
        component={ChatsTabAnim}
        options={{
          tabBarIcon: ({color, size}) => (
            <MaterialIcon name="map" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

function RegisterStack() {
  return <></>;
}

const Tab = createBottomTabNavigator<HomeStackNavigatorParamList>();
