import { writable, type Writable } from "svelte/store";
import { browser } from "$app/environment";

export const persistentStore = <T>(key: string, initial: T): Writable<T> => {
	const store = writable<T>(initial);

	if (browser)
		import("localforage").then(async (localforage) => {
			let hydrated = false;
			let pendingValue = initial;

			store.subscribe((value) => {
				pendingValue = value;

				if (hydrated) localforage.default.setItem(key, value);
			});

			const value = await localforage.default.getItem<T>(key);

			if (value !== null) store.set(value);

			hydrated = true;

			await localforage.default.setItem(key, pendingValue);
		});

	return store;
};