import { TouchableOpacity, Text, View } from 'react-native';
import { TTS_PROVIDER_LABEL, type TtsProvider, useTtsProvider } from '../../lib/ttsProvider';

const PROVIDERS: TtsProvider[] = ['openai', 'gemini', 'elevenlabs', 'cartesia', 'google-cloud'];

export function TtsProviderToggle() {
  const [current, set] = useTtsProvider();
  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 6,
        paddingHorizontal: 12,
        paddingVertical: 6,
      }}
    >
      <Text
        style={{
          fontSize: 9,
          color: '#9ca3af',
          textTransform: 'uppercase',
          letterSpacing: 0.5,
          marginRight: 4,
        }}
      >
        TTS
      </Text>
      {PROVIDERS.map((p) => {
        const active = p === current;
        return (
          <TouchableOpacity
            key={p}
            onPress={() => { void set(p); }}
            hitSlop={6}
            activeOpacity={0.7}
            style={{
              paddingHorizontal: 10,
              paddingVertical: 4,
              borderRadius: 999,
              backgroundColor: active ? '#1f2937' : '#e5e7eb',
              borderWidth: 1.5,
              borderColor: active ? '#1f2937' : '#9ca3af',
            }}
          >
            <Text
              style={{
                fontSize: 10,
                fontFamily: 'Nunito_700Bold',
                color: active ? '#ffffff' : '#374151',
              }}
            >
              {TTS_PROVIDER_LABEL[p]}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}