import { createRoot } from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { LinksLibrary } from './LinksLibrary';
import type { ViewMode } from './types';

const queryClient = new QueryClient({
    defaultOptions: {
        queries: { refetchOnWindowFocus: false, staleTime: 30_000 },
    },
});

const root = document.getElementById('biblioteca-root');

if (root) {
    createRoot(root).render(
        <QueryClientProvider client={queryClient}>
            <LinksLibrary
                apiUrl={root.dataset.apiUrl ?? '/api/links'}
                metaUrl={root.dataset.metaUrl ?? '/api/links/filters-meta'}
                initialView={(root.dataset.view as ViewMode) ?? 'biblioteca'}
                readUrl={root.dataset.readUrl ?? '/enlaces/:id/leer'}
                editUrl={root.dataset.editUrl ?? '/enlaces/:id/editar'}
            />
        </QueryClientProvider>,
    );
}