File Handling

import React, { useCallback, useEffect, useRef, useState } from 'react';
import { View, Text, Button, ScrollView } from 'react-native';
import RNFS from 'react-native-fs';
import LiveAudioStream from '@fugood/react-native-audio-pcm-stream';
import { Buffer } from 'buffer';
import { initWhisper } from 'whisper.rn';
import type { WhisperContext } from 'whisper.rn';
import { WavFileWriter } from 'whisper.rn/utils/WavFileWriter';

const recordFile = `${RNFS.DocumentDirectoryPath}/recording.wav`;

const audioOptions = {
  sampleRate: 16000,
  channels: 1,
  bitsPerSample: 16,
  audioSource: 6,
  wavFile: recordFile,
  bufferSize: 16 * 1024,
};

export default function RecordAndTranscribe() {
  const contextRef = useRef<WhisperContext | null>(null);
  const recordedDataRef = useRef<Uint8Array | null>(null);
  
  const [logs, setLogs] = useState<string[]>([]);
  const [result, setResult] = useState<string | null>(null);
  const [isRecording, setIsRecording] = useState(false);

  const log = useCallback((...messages: any[]) => {
    setLogs((prev) => [...prev, messages.join(' ')]);
  }, []);

  useEffect(() => {
    return () => {
      contextRef.current?.release();
    };
  }, []);

  const initialize = async () => {
    log('Initializing context...');
    const ctx = await initWhisper({
      filePath: require('../assets/ggml-base.bin'),
    });
    contextRef.current = ctx;
    log('Context initialized');
  };

  const startRecording = async () => {
    try {
      recordedDataRef.current = null;

      LiveAudioStream.init(audioOptions);
      LiveAudioStream.on('data', (data: string) => {
        const newData = new Uint8Array(Buffer.from(data, 'base64'));
        if (!recordedDataRef.current) {
          recordedDataRef.current = newData;
        } else {
          const combined = new Uint8Array(
            recordedDataRef.current.length + newData.length
          );
          combined.set(recordedDataRef.current);
          combined.set(newData, recordedDataRef.current.length);
          recordedDataRef.current = combined;
        }
      });

      LiveAudioStream.start();
      setIsRecording(true);
      log('Recording started...');
    } catch (error) {
      log('Error starting recording:', error);
    }
  };

  const stopRecording = async () => {
    try {
      await LiveAudioStream.stop();
      setIsRecording(false);
      log('Recording stopped');

      if (!recordedDataRef.current) {
        log('No recorded data');
        return;
      }
      if (!contextRef.current) {
        log('Context not initialized');
        return;
      }

      // Save as WAV file
      const wavWriter = new WavFileWriter(RNFS, recordFile, audioOptions);
      await wavWriter.initialize();
      await wavWriter.appendAudioData(recordedDataRef.current);
      await wavWriter.finalize();
      log(`Saved ${recordedDataRef.current.length} bytes as WAV`);

      // Transcribe using base64 data
      const base64Data = Buffer.from(recordedDataRef.current).toString('base64');
      log('Starting transcription...');

      const startTime = Date.now();
      const { promise } = contextRef.current.transcribeData(base64Data, {
        language: 'en',
        onProgress: (progress) => {
          log(`Progress: ${progress}%`);
        },
      });

      const { result } = await promise;
      const endTime = Date.now();

      setResult(
        `Result: ${result}\n` +
        `Transcribed in ${endTime - startTime}ms`
      );
      log('Transcription complete');
    } catch (error) {
      log('Error:', error);
    }
  };

  return (
    <ScrollView style={{ padding: 20 }}>
      <Button title="Initialize" onPress={initialize} />
      
      <View style={{ marginTop: 10 }}>
        <Button
          title={isRecording ? 'Stop Recording' : 'Start Recording'}
          onPress={isRecording ? stopRecording : startRecording}
          disabled={!contextRef.current}
        />
      </View>

      <View style={{ marginTop: 20 }}>
        <Text>Logs:</Text>
        {logs.map((log, i) => (
          <Text key={i}>{log}</Text>
        ))}
      </View>

      {result && (
        <View style={{ marginTop: 20 }}>
          <Text>Result:</Text>
          <Text>{result}</Text>
        </View>
      )}
    </ScrollView>
  );
}