import { QueryClient } from '@tanstack/react-query';
import {
	PersistQueryClientProvider,
	type PersistedClient,
	type Persister,
} from '@tanstack/react-query-persist-client';
import { del, get, set } from 'idb-keyval';
import React, { type ComponentType } from 'react';
import { createRoot } from 'react-dom/client';

const container = document.getElementById('root') as HTMLElement;
const root = createRoot(container);

const queryClient = new QueryClient({
	defaultOptions: {
		queries: {
			gcTime: 1000 * 60 * 60 * 24, // 24 hours
			staleTime: 1000 * 60 * 1, // 1 min
		},
	},
});

export function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
	return {
		persistClient: async (client: PersistedClient) => {
			set(idbValidKey, client);
		},
		restoreClient: async () => {
			return await get<PersistedClient>(idbValidKey);
		},
		removeClient: async () => {
			await del(idbValidKey);
		},
	} as Persister;
}

function render(App: ComponentType) {
	root.render(
		<PersistQueryClientProvider
			client={queryClient}
			persistOptions={{ persister: createIDBPersister() }}
		>
			<React.StrictMode>
				<App />
			</React.StrictMode>
		</PersistQueryClientProvider>,
	);
}

export default render;