"use client";

import { useEffect, useMemo } from "react";
import { useNoteDesignsStore } from "@/stores/note-designs-store";
import { NOTE_COVERS, type NoteCover } from "@/lib/notes/note-covers";

// Merges Mindavio's built-in cover catalog with user-uploaded designs
// published to the marketplace, so every surface that shows/selects a cover
// (note page, cover picker, marketplace) sees the same combined list.
export function useNoteDesigns() {
  const { customCovers, loading, initialized, refetch } = useNoteDesignsStore();

  useEffect(() => {
    if (!initialized) void refetch();
  }, [initialized, refetch]);

  const allCovers: NoteCover[] = useMemo(() => [...NOTE_COVERS, ...customCovers], [customCovers]);

  function getCover(id: string | null | undefined): NoteCover | null {
    if (!id) return null;
    return allCovers.find((cover) => cover.id === id) ?? null;
  }

  return { allCovers, customCovers, loading, getCover, refetch };
}