import { writable } from 'svelte/store';
import { browser } from '$app/environment';

/** @typedef {'obsidian' | 'paper' | 'midnight'} ThemeName */

const STORAGE_KEY = 'opal-theme';

/** @type {ThemeName} */
const DEFAULT_THEME = 'obsidian';

/** @type {ThemeName[]} */
export const THEMES = ['obsidian', 'paper', 'midnight'];

/**
 * Read stored theme, falling back to default
 * @returns {ThemeName}
 */
function getInitial() {
	if (!browser) return DEFAULT_THEME;
	const stored = localStorage.getItem(STORAGE_KEY);
	if (stored && THEMES.includes(/** @type {ThemeName} */ (stored))) {
		return /** @type {ThemeName} */ (stored);
	}
	return DEFAULT_THEME;
}

function createThemeStore() {
	const { subscribe, set, update } = writable(getInitial());

	/** Apply theme to the document */
	function apply(/** @type {ThemeName} */ theme) {
		if (browser) {
			document.documentElement.dataset.theme = theme;
			localStorage.setItem(STORAGE_KEY, theme);
		}
	}

	// Apply on every change
	subscribe(apply);

	return {
		subscribe,
		/** @param {ThemeName} theme */
		set(theme) {
			set(theme);
		},
		/** Cycle to the next theme */
		cycle() {
			update(current => {
				const idx = THEMES.indexOf(current);
				return THEMES[(idx + 1) % THEMES.length];
			});
		}
	};
}

export const themeStore = createThemeStore();