'use client';

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

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

const SpeechGenerator: React.FC = () => {
  const [text, setText] = useState<string>('');
  const audioRef = useRef<HTMLAudioElement | null>(null);

  // Create an audio element and attach it to the ref
  if (!audioRef.current) {
    audioRef.current = new Audio();
  }

  const handleGenerateSpeech = async () => {
    if (!text) {
      alert('Please enter some text to generate speech.');
      return;
    }

    try {
      // Assuming `client.getSpeech` is an existing function that handles API requests
      const response = await client?.getSpeech({
        input: text,
        model: 'tts-1',
        voice: 'alloy'
      });

      if (!response.ok) {
        throw new Error('Failed to generate speech');
      }

      const blob = await response.blob();
      const url = URL.createObjectURL(blob);
      if (audioRef.current) {
        audioRef.current.src = url;
        audioRef.current.play().catch(err => console.error('Error playing the audio:', err));
      }
    } catch (error: any) {
      console.error('Error:', error.message);
      alert(`Error: ${error.message}`);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={e => setText(e.target.value)}
        placeholder="Enter text here..."
      />
      <button onClick={handleGenerateSpeech}>Generate Speech</button>
    </div>
  );
};

function ChatActionStory() {
  return (
    <div>
      <h1>Hello</h1>
      <SpeechGenerator />
    </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 = {
  // harded code values for now 😬
  args: {},
};