import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { BetType } from '../types';

interface BetTypeSelectorProps {
  selectedType: string;
  onSelect: (type: string) => void;
  simpleBets: BetType[];
  advancedBets: BetType[];
  showAdvanced?: boolean;
}

export const BetTypeSelector: React.FC<BetTypeSelectorProps> = ({
  selectedType,
  onSelect,
  simpleBets,
  advancedBets,
  showAdvanced = false,
}) => {
  const [expanded, setExpanded] = React.useState(showAdvanced);
  
  return (
    <View style={styles.container}>
      <Text style={styles.label}>Bet Type</Text>
      
      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
        <View style={styles.chipsRow}>
          {simpleBets.map((bet) => (
            <TouchableOpacity
              key={bet.id}
              style={[
                styles.chip,
                selectedType === bet.id && styles.chipSelected,
                bet.id === 'best_bet' && styles.chipRecommended,
              ]}
              onPress={() => onSelect(bet.id)}
            >
              {bet.id === 'best_bet' && (
                <Ionicons 
                  name="star" 
                  size={14} 
                  color={selectedType === bet.id ? '#fff' : '#f59e0b'} 
                />
              )}
              <Text style={[
                styles.chipText,
                selectedType === bet.id && styles.chipTextSelected,
              ]}>
                {bet.name}
              </Text>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
      
      <TouchableOpacity 
        style={styles.expandButton}
        onPress={() => setExpanded(!expanded)}
      >
        <Text style={styles.expandText}>
          {expanded ? 'Hide advanced bets' : 'More bet types'}
        </Text>
        <Ionicons 
          name={expanded ? 'chevron-up' : 'chevron-down'} 
          size={16} 
          color="#6b7280" 
        />
      </TouchableOpacity>
      
      {expanded && (
        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
          <View style={styles.chipsRow}>
            {advancedBets.map((bet) => (
              <TouchableOpacity
                key={bet.id}
                style={[
                  styles.chip,
                  selectedType === bet.id && styles.chipSelected,
                ]}
                onPress={() => onSelect(bet.id)}
              >
                <Text style={[
                  styles.chipText,
                  selectedType === bet.id && styles.chipTextSelected,
                ]}>
                  {bet.name}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
        </ScrollView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginBottom: 16,
  },
  label: {
    fontSize: 14,
    fontWeight: '600',
    color: '#374151',
    marginBottom: 10,
  },
  chipsRow: {
    flexDirection: 'row',
    gap: 10,
    paddingRight: 16,
  },
  chip: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 24,
    backgroundColor: '#f3f4f6',
    borderWidth: 2,
    borderColor: 'transparent',
  },
  chipSelected: {
    backgroundColor: '#111827',
    borderColor: '#111827',
  },
  chipRecommended: {
    borderColor: '#f59e0b',
  },
  chipText: {
    fontSize: 14,
    fontWeight: '600',
    color: '#374151',
  },
  chipTextSelected: {
    color: '#fff',
  },
  expandButton: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    paddingVertical: 10,
  },
  expandText: {
    fontSize: 13,
    color: '#6b7280',
  },
});