'use client';

import React, { useState } from 'react';
import type { Meta, StoryObj } from "@storybook/react";
import { getPublicClient } from "../api";

const client = getPublicClient('f5d86791-d513-48de-8fd2-b6dbdd4abe9b');

interface TranscriptionResponse {
  text: string;
}

const TranscriptionGenerator: React.FC = () => {
  const [transcription, setTranscription] = useState<string>('');
  const [isRecording, setIsRecording] = useState<boolean>(false);

  const handleAudioCapture = async () => {
    setIsRecording(true);
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    // Logic to capture audio and convert it to a blob
    const audioChunks: Blob[] = [];
    const recorder = new MediaRecorder(stream);
    recorder.ondataavailable = (e: BlobEvent) => audioChunks.push(e.data);
    recorder.onstop = async () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/mp3' });
      const transcription = await client?.getTranscription({
        input: audioBlob,
        model: 'whisper-1',
      }) as TranscriptionResponse;
      setTranscription(transcription.text);
      setIsRecording(false);
    };
    recorder.start();
    setTimeout(() => {
      recorder.stop();
      stream.getTracks().forEach(track => track.stop());
    }, 3000); // Record for 3 seconds
  };

  return (
    <div>
      <button onClick={handleAudioCapture}>
        {isRecording ? 'Recording...' : 'Start Recording'}
      </button>
      <p>Transcription: {transcription}</p>
    </div>
  );
};

const ChatActionStory: React.FC = () => {
  return (
    <div>
      <h1>Hello</h1>
      <TranscriptionGenerator />
    </div>
  );
};

//👇 This default export determines where your story goes in the story list
const meta: Meta<typeof ChatActionStory> = {
  component: ChatActionStory,
};

export default meta;
type Story = StoryObj<typeof ChatActionStory>;

export const FirstStory: Story = {
  // hardcoded values for now 😬
  args: {},
};