import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { BottomTabsProps } from './types';
import { bottomTabsStyles as styles } from './styles';

const BottomTabs: React.FC<BottomTabsProps> = ({ 
  data, 
  style, 
  onOverlayOpen, 
  onSectionChange, 
  activeSection 
}) => {
  // Define which tabs are section tabs vs overlay tabs
  const sectionTabs = ['home', 'apply', 'cards'];
  const overlayTabs = ['payments', 'search'];
  
  const handleTabPress = (tabId: string, originalOnPress?: () => void) => {
    if (sectionTabs.includes(tabId)) {
      // Section tab: update active state via parent callback
      if (onSectionChange) {
        onSectionChange(tabId);
      }
      originalOnPress?.();
    } else if (overlayTabs.includes(tabId)) {
      // Overlay tab: don't change active state, just open overlay
      if (onOverlayOpen) {
        onOverlayOpen(tabId);
      } else {
        originalOnPress?.();
      }
    } else {
      // Fallback for any other tabs
      originalOnPress?.();
    }
  };

  return (
    <View style={[styles.container, style]}>
      {data.items.map((tab) => {
        // Determine if this tab should be active based on activeSection prop
        const isActive = sectionTabs.includes(tab.id) ? activeSection === tab.id : false;
        
        return (
          <TouchableOpacity
            key={tab.id}
            style={styles.tabItem}
            onPress={() => handleTabPress(tab.id, tab.onPress)}
            activeOpacity={0.7}
          >
            <View style={[
              styles.tabIcon, 
              isActive && styles.tabIconActive
            ]}>
              <Text style={styles.tabIconText}>{tab.icon}</Text>
            </View>
            <Text style={[
              styles.tabLabel,
              isActive && styles.tabLabelActive
            ]}>
              {tab.label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

export default BottomTabs;

// Re-export types for convenience
export * from './types';