import { Text, View, TouchableWithoutFeedback, Dimensions } from 'react-native';
import { SvgProps } from 'react-native-svg';

import { NAVIGATION_PAGES } from '../../types';

import MapIcon from '../../../assets/icons/bottom-navigation/map.svg';
import TravellersIcon from '../../../assets/icons/bottom-navigation/travellers.svg';
import GlobeIcon from '../../../assets/icons/bottom-navigation/globe-solid.svg';
import MenuIcon from '../../../assets/icons/menu.svg';
import MessagesIcon from '../../../assets/icons/bottom-navigation/messages.svg';
import CalendarIcon from 'assets/icons/events/calendar-solid.svg';
import TripIcon from 'assets/icons/travels-section/trip.svg';

import { Colors } from '../../theme';
import { styles } from './style';
import MessagesDot from '../MessagesDot';
import { storage, StoreType } from 'src/storage';
import { WarningModal } from '../WarningModal';
import { useState } from 'react';
import { useMessagesStore } from 'src/stores/unreadMessagesStore';
import { useFriendsNotificationsStore } from 'src/stores/friendsNotificationsStore';
import { useNavigationState, useRoute } from '@react-navigation/native';

const getTabIcon = (routeName: string) => {
  switch (routeName) {
    case NAVIGATION_PAGES.IN_APP_MAP_TAB:
      return MapIcon;
    case NAVIGATION_PAGES.IN_APP_TRAVELLERS_TAB:
      return TravellersIcon;
    case NAVIGATION_PAGES.IN_APP_TRAVELS_TAB:
      return GlobeIcon;
    case NAVIGATION_PAGES.IN_APP_TRIPS_TAB:
      return TripIcon;
    case NAVIGATION_PAGES.IN_APP_EVENTS_TAB:
      return CalendarIcon;
    case NAVIGATION_PAGES.IN_APP_MESSAGES_TAB:
      return MessagesIcon;
    case NAVIGATION_PAGES.MENU_DRAWER:
      return MenuIcon;
    default:
      return null;
  }
};

const TabBarButton = ({
  label,
  onPress,
  navigation
}: {
  label: string;
  onPress: () => void;
  navigation: any;
}) => {
  const IconComponent: React.FC<SvgProps> | null = getTabIcon(label);
  const token = storage.get('token', StoreType.STRING);
  const isNotificationActive = useFriendsNotificationsStore((state) => state.isNotificationActive);
  const unreadMessagesCount = useMessagesStore((state) => state.unreadMessagesCount);
  const [isWarningModalVisible, setIsWarningModalVisible] = useState(false);

  const isSmallScreen = Dimensions.get('window').width < 383;
  const iconSize = isSmallScreen ? 23 : 24;

  const route = useRoute();

  const focused = useNavigationState((state) => {
    const currentRoute = state.routes[state.index];
    return currentRoute.name === route.name;
  });

  let currentColor = focused ? Colors.DARK_BLUE : Colors.LIGHT_GRAY;

  return (
    <TouchableWithoutFeedback
      onPress={() => {
        if (label === NAVIGATION_PAGES.MENU_DRAWER) {
          (navigation as any)?.openDrawer();
        } else if (label === NAVIGATION_PAGES.IN_APP_MESSAGES_TAB && !token) {
          setIsWarningModalVisible(true);
        } else {
          onPress();
        }
      }}
    >
      <View style={styles.buttonStyle}>
        <View style={{ alignItems: 'center' }}>
          {IconComponent && (
            <IconComponent width={iconSize} height={iconSize} fill={currentColor} />
          )}
          {label === NAVIGATION_PAGES.IN_APP_TRAVELLERS_TAB && isNotificationActive > 0 && (
            <MessagesDot messagesCount={isNotificationActive} />
          )}
          {label === NAVIGATION_PAGES.IN_APP_MESSAGES_TAB && unreadMessagesCount > 0 && (
            <MessagesDot messagesCount={unreadMessagesCount} />
          )}
          <Text
            style={[styles.labelStyle, { color: currentColor, fontSize: isSmallScreen ? 8.5 : 10 }]}
            adjustsFontSizeToFit={true}
            minimumFontScale={0.8}
          >
            {label}
          </Text>
        </View>
        <WarningModal
          type={'unauthorized'}
          isVisible={isWarningModalVisible}
          onClose={() => setIsWarningModalVisible(false)}
        />
      </View>
    </TouchableWithoutFeedback>
  );
};

export default TabBarButton;
