components/hooks/useGeneration.ts

import { useMemo, useState } from "react"
import { useUpdateEffect } from "react-use";

import { LENGTHS, STYLES, MOODS, MUSIC_PROMPTS } from "@/utils";

export const useGeneration = () => {
    const [form, setForm] = useState({
    prompt: "80s pop track with bassy drums and synth",
    length: LENGTHS[0].value,
    style: STYLES[5].value,
    mood: MOODS[4].value
  });
  const [loading, setLoading] = useState(false);
  const [results, setResults] = useState<{ cover: string | null, title: string | null }>({
    cover: null,
    title: null,
  });
  const [timeCoverGenerated, setTimeCoverGenerated] = useState(0);

  const formattedPrompt = useMemo(() => {
    const stylePrompt = STYLES.find((style) => style.value === form.style)?.prompt;
    const moodPrompt = MOODS.find((mood) => mood.value === form.mood)?.prompt;

    return `${form.prompt} ${stylePrompt} ${moodPrompt ?? ""}`;
  }, [form])

  useUpdateEffect(() => {
    if (results.cover && results.title) {
      setLoading(false);
    }
  }, [results])

  const generate = async () => {
    setLoading(true);
    let new_results = {
      cover: null,
      title: null,
      track: null
    }

    fetch("/api/generate/cover", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        prompt: formattedPrompt
      })
    }).then((res) => res.json())
    .then((res: any) => {
      new_results.cover = res.image
      setResults({
        ...new_results,
      })
    })

    fetch("/api/generate/title", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        prompt: form.prompt
      })
    }).then((res) => res.json())
    .then((res: any) => {
      new_results.title = res.title
      setResults({
        ...new_results,
      })
    })
  }

  const randomize = () => {
    setForm({
      length: LENGTHS[Math.floor(Math.random() * LENGTHS.length)].value,
      style: STYLES[Math.floor(Math.random() * STYLES.length)].value,
      mood: MOODS[Math.floor(Math.random() * MOODS.length)].value,
      prompt: MUSIC_PROMPTS[Math.floor(Math.random() * MUSIC_PROMPTS.length)]
    })
  }

  return {
    form,
    setForm,
    formattedPrompt,
    generate,
    results,
    loading,
    setResults,
    randomize
  }
}