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.svg';
import ProfileIcon from '../../../assets/icons/bottom-navigation/profile.svg';

import { Colors } from '../../theme';
import { styles } from './style';

const getTabIcon = (routeName: string) => {
  switch (routeName) {
    case NAVIGATION_PAGES.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_PROFILE:
      return ProfileIcon;
    default:
      return null;
  }
};

const TabBarButton = ({
  label,
  onPress,
  focused
}: {
  label: string;
  onPress: () => void;
  focused: boolean;
}) => {
  const IconComponent: React.FC<SvgProps> | null = getTabIcon(label);

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

  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={styles.buttonStyle}>
        {IconComponent && <IconComponent width={24} height={24} fill={currentColor} />}
        <Text style={[styles.labelStyle, { color: currentColor }]}>{label}</Text>
      </View>
    </TouchableWithoutFeedback>
  );
};

export default TabBarButton;