// VoiceHandler.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import Voice from '@react-native-voice/voice';
import Config from 'react-native-config';

class VoiceHandler extends Component {
  constructor(props) {
    super(props);
    this.state = {
      recognized: '',
      started: '',
      results: [],
      isRecording: false,
    };

    Voice.onSpeechStart = this.onSpeechStart.bind(this);
    Voice.onSpeechRecognized = this.onSpeechRecognized.bind(this);
    Voice.onSpeechResults = this.onSpeechResults.bind(this);
  }

  componentWillUnmount() {
    Voice.destroy().then(Voice.removeAllListeners);
  }

  onSpeechStart(e) {
    this.setState({
      started: '√',
    });
  }

  onSpeechRecognized(e) {
    this.setState({
      recognized: '√',
    });
  }

  onSpeechResults(e) {
    this.setState({
      results: e.value,
    });
  }

  async _startRecognizing(e) {
    this.setState({
      recognized: '',
      started: '',
      results: [],
      isRecording: true,
    });

    try {
      await Voice.start('en-US'); // Start the voice recognition
    } catch (error) {
      console.error('There was an error starting voice recognition:', error);
      this.setState({
        isRecording: false, 
      });
    }
  }
  async _stopRecognizing() {
    try {
      await Voice.stop();
      this.setState({
        isRecording: false,
      });
      // Assuming you have the audio data, send it to your backend
      this._sendAudioToBackend(this.state.results); 
    } catch (e) {
      console.error(e);
    }
  }
  _sendAudioToBackend(results) {
    // Placeholder: Convert `results` or actual audio data to a format acceptable by your backend
    const formData = new FormData();
    // formData.append('audio', {uri: 'path_to_audio_file', type: 'audio/x-m4a', name: 'audio.m4a'});
    
    fetch(process.env.TTS_BACKEND_URL, {
      method: 'POST',
      body: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
    .then(response => response.text())
    .then(body => {
      console.log('Audio sent to backend, response:', body);
    })
    .catch(error => {
      console.error('Failed to send audio:', error);
    });
  }
  render() {
    return (
      <View>
        <Text>Press the button and start speaking.</Text>
        <Button
          onPress={() => this.state.isRecording ? this._stopRecognizing() : this._startRecognizing()}
          title={this.state.isRecording ? "Stop Recognizing" : "Start Recognizing"}
        />
        <Text>Recognized: {this.state.recognized}</Text>
        <Text>Started: {this.state.started}</Text>
        <Text>Results: {this.state.results.join(' ')}</Text>
      </View>
    );
  }
}

export default VoiceHandler;