/* jshint esversion: 2024, module: true */

import { ThemeMode } from "./enums.js";

/**
 * Static Theme Utilities
 * @class ThemeUtils
 */
class ThemeUtils {
	/**
	 * Get theme from localStorage
	 * @static
	 * @returns {Symbol} Theme mode
	 */
	static getStoredTheme() {
		const stored = localStorage.getItem("network-ui-theme");
		return stored === "light" ? ThemeMode.LIGHT : ThemeMode.DARK;
	}

	/**
	 * Store theme in localStorage
	 * @static
	 * @param {Symbol} theme - Theme mode
	 */
	static storeTheme(theme) {
		const themeString = theme === ThemeMode.LIGHT ? "light" : "dark";
		localStorage.setItem("network-ui-theme", themeString);
	}

	/**
	 * Get theme icon based on theme mode
	 * @static
	 * @param {Symbol} theme - Theme mode
	 * @returns {string} Icon character
	 */
	static getThemeIcon(theme) {
		return theme === ThemeMode.DARK ? "☀️" : "🌙";
	}

	/**
	 * Apply theme to document
	 * @static
	 * @param {Symbol} theme - Theme mode
	 */
	static applyThemeToDocument(theme) {
		const themeString = theme === ThemeMode.LIGHT ? "light" : "dark";
		document.documentElement.setAttribute("data-theme", themeString);
	}

	/**
	 * Toggle theme mode
	 * @static
	 * @param {Symbol} currentTheme - Current theme mode
	 * @returns {Symbol} New theme mode
	 */
	static toggleTheme(currentTheme) {
		return currentTheme === ThemeMode.DARK ? ThemeMode.LIGHT : ThemeMode.DARK;
	}
}

/**
 * Theme Manager for handling light/dark themes
 * @class ThemeManager
 */
class ThemeManager {
	#elements;
	#theme;

	/**
	 * @param {Object} elements - DOM elements
	 */
	constructor(elements) {
		this.#elements = elements;
		this.#theme = ThemeMode.DARK;
	}

	/**
	 * Initialize theme manager
	 * @method init
	 */
	init() {
		this.#theme = ThemeUtils.getStoredTheme();
		this.#applyTheme(this.#theme);
		this.#setupEventListeners();
	}

	/**
	 * Set up theme event listeners
	 * @private
	 */
	#setupEventListeners() {
		this.#elements.themeToggle?.addEventListener("click", () =>
			this.#handleThemeToggle(),
		);
	}

	/**
	 * Handle theme toggle
	 * @private
	 */
	#handleThemeToggle() {
		const newTheme = ThemeUtils.toggleTheme(this.#theme);
		this.#applyTheme(newTheme);
	}

	/**
	 * Apply theme to UI
	 * @private
	 * @param {Symbol} theme - Theme mode
	 */
	#applyTheme(theme) {
		this.#theme = theme;

		// Apply to document
		ThemeUtils.applyThemeToDocument(theme);

		// Store preference
		ThemeUtils.storeTheme(theme);

		// Update theme icon
		this.#updateThemeIcon();
	}

	/**
	 * Update theme icon
	 * @private
	 */
	#updateThemeIcon() {
		if (this.#elements.themeIcon) {
			this.#elements.themeIcon.textContent = ThemeUtils.getThemeIcon(
				this.#theme,
			);
		}
	}

	/**
	 * Get current theme
	 * @method getCurrentTheme
	 * @returns {Symbol} Current theme mode
	 */
	getCurrentTheme() {
		return this.#theme;
	}

	/**
	 * Set theme programmatically
	 * @method setTheme
	 * @param {Symbol} theme - Theme mode
	 */
	setTheme(theme) {
		if (theme === ThemeMode.LIGHT || theme === ThemeMode.DARK) {
			this.#applyTheme(theme);
		} else {
			console.warn("Invalid theme mode:", theme);
		}
	}

	/**
	 * Check if dark theme is active
	 * @method isDarkTheme
	 * @returns {boolean} True if dark theme is active
	 */
	isDarkTheme() {
		return this.#theme === ThemeMode.DARK;
	}

	/**
	 * Check if light theme is active
	 * @method isLightTheme
	 * @returns {boolean} True if light theme is active
	 */
	isLightTheme() {
		return this.#theme === ThemeMode.LIGHT;
	}
}

export { ThemeManager, ThemeUtils };