import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
import { useToneDetection } from '../hooks/useToneDetection';
import { ToneListenReactNativeConfig } from '../types/ToneTypes';

interface ToneDetectionComponentProps {
  config?: ToneListenReactNativeConfig;
  onSequenceDetected?: (sequence: string) => void;
}

/**
 * Example React Native component for tone detection
 */
export const ToneDetectionComponent: React.FC<ToneDetectionComponentProps> = ({
  config = {},
  onSequenceDetected
}) => {
  const {
    isListening,
    isInitialized,
    error,
    lastSequence,
    lastDualTone,
    lastBridgeTone,
    startListening,
    stopListening
  } = useToneDetection({
    ...config,
    onSequence: (event) => {
      onSequenceDetected?.(event.sequence);
    }
  });

  const handleStartPress = async () => {
    const started = await startListening();
    if (!started) {
      Alert.alert('Error', 'Failed to start tone detection');
    }
  };

  const handleStopPress = () => {
    stopListening();
  };

  if (error) {
    return (
      <View style={styles.container}>
        <Text style={styles.errorText}>Error: {error.message}</Text>
      </View>
    );
  }

  if (!isInitialized) {
    return (
      <View style={styles.container}>
        <Text style={styles.statusText}>Initializing tone detection...</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tone Detection</Text>
      
      <View style={styles.statusContainer}>
        <Text style={styles.statusText}>
          Status: {isListening ? 'Listening' : 'Stopped'}
        </Text>
      </View>

      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, isListening ? styles.stopButton : styles.startButton]}
          onPress={isListening ? handleStopPress : handleStartPress}
        >
          <Text style={styles.buttonText}>
            {isListening ? 'Stop Listening' : 'Start Listening'}
          </Text>
        </TouchableOpacity>
      </View>

      {lastSequence && (
        <View style={styles.resultContainer}>
          <Text style={styles.resultTitle}>Last Sequence:</Text>
          <Text style={styles.resultText}>{lastSequence}</Text>
        </View>
      )}

      {lastDualTone?.ok && (
        <View style={styles.resultContainer}>
          <Text style={styles.resultTitle}>Last Dual Tone:</Text>
          <Text style={styles.resultText}>
            {lastDualTone.tag} ({lastDualTone.lowFreq}Hz, {lastDualTone.highFreq}Hz)
          </Text>
        </View>
      )}

      {lastBridgeTone?.bridge && (
        <View style={styles.resultContainer}>
          <Text style={styles.resultTitle}>Last Bridge Tone:</Text>
          <Text style={styles.resultText}>
            {lastBridgeTone.bridge}Hz (wide: {lastBridgeTone.wide})
          </Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
    color: '#333',
  },
  statusContainer: {
    marginBottom: 20,
  },
  statusText: {
    fontSize: 16,
    textAlign: 'center',
    color: '#666',
  },
  errorText: {
    fontSize: 16,
    textAlign: 'center',
    color: '#ff0000',
  },
  buttonContainer: {
    marginBottom: 20,
  },
  button: {
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  startButton: {
    backgroundColor: '#4CAF50',
  },
  stopButton: {
    backgroundColor: '#f44336',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
  resultContainer: {
    marginBottom: 10,
    padding: 10,
    backgroundColor: 'white',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#ddd',
  },
  resultTitle: {
    fontSize: 14,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 5,
  },
  resultText: {
    fontSize: 16,
    color: '#666',
  },
});