// template/src/components/BottomTabs/index.tsx
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { useTheme } from '../../theme/ThemeProvider';
import { bottomTabsStyles } from './styles';
import { Icon } from '../Icon';

import { BottomTabsProps } from './types';
import { ThemedText } from '@components/ThemedText';

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 { theme } = useTheme();
  const styles = bottomTabsStyles(theme);

  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,
              isActive && styles.tabItemActive
            ]}
            onPress={() => handleTabPress(tab.id, tab.onPress)}
            activeOpacity={0.7}
          >
            <View style={styles.tabIcon}>
              <Icon
                name={isActive ? `${tab.id}-filled` : tab.id}
                color={isActive ? theme.colors.accent : theme.colors.text}
              />
            </View>
            <ThemedText style={[
              styles.tabLabel,
              isActive && styles.tabLabelActive
            ]}>
              {tab.label}
            </ThemedText>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

export default BottomTabs;

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