import { Text, View, TouchableWithoutFeedback } 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 { Colors } from '../../theme';
import { styles } from './style';
import BlinkingDot from '../BlinkingDot';
import { useNotification } from 'src/contexts/NotificationContext';
import MessagesDot from '../MessagesDot';
import { storage, StoreType } from 'src/storage';
import { WarningModal } from '../WarningModal';
import { useState } from 'react';
import { useMessagesStore } from 'src/stores/unreadMessagesStore';

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_MESSAGES_TAB:
      return MessagesIcon;
    case NAVIGATION_PAGES.MENU_DRAWER:
      return MenuIcon;
    default:
      return null;
  }
};

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

  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={24} height={24} fill={currentColor} />}
          {label === NAVIGATION_PAGES.IN_APP_TRAVELLERS_TAB && isNotificationActive && (
            <BlinkingDot diameter={8} />
          )}
          {label === NAVIGATION_PAGES.IN_APP_MESSAGES_TAB && unreadMessagesCount > 0 && (
            <MessagesDot messagesCount={unreadMessagesCount} />
          )}
          <Text style={[styles.labelStyle, { color: currentColor }]}>{label}</Text>
        </View>
        <WarningModal
          type={'unauthorized'}
          isVisible={isWarningModalVisible}
          onClose={() => setIsWarningModalVisible(false)}
        />
      </View>
    </TouchableWithoutFeedback>
  );
};

export default TabBarButton;