import objectPath from "object-path"
import { ThemeModeComponent } from "@@/vb-dom/theme"
import type LayoutConfigTypes from "@@/types/LayoutConfigTypes"
import layoutConfig from "@@/config/LayoutConfig"
import { localCache } from "@@/utils/cache"

export const LS_CONFIG_NAME_KEY = `config_${import.meta.env.VITE_APP_NAME}_${
	import.meta.env.VITE_APP_VERSION
}`
export const THEME_MODE_LS_KEY = "VB_THEME_MODE_VALUE"
export const THEME_MENU_MODE_LS_KEY = "VB_THEME_MODE_MENU"

export const useBodyConfigStore = defineStore("bodyConfig", () => {
	const classes = ref<any>({})

	function getClasses(key: string) {
		return classes.value[key]
	}

	function addBodyClassname(className: string) {
		document.body.classList.add(className)
	}

	function removeBodyClassName(className: string) {
		document.body.classList.remove(className)
	}

	function addBodyAttribute(payload: { qualifiedName: string; value: string }) {
		const { qualifiedName, value } = payload
		document.body.setAttribute(qualifiedName, value)
	}

	function removeBodyAttribute(payload: { qualifiedName: string }) {
		const { qualifiedName } = payload
		document.body.removeAttribute(qualifiedName)
	}

	function addClassname(payload: { position: string; className: string }) {
		const { position, className } = payload
		if (!classes.value[position]) {
			classes.value[position] = [className]
		} else {
			classes.value[position].push(className)
		}
	}

	const config = ref<LayoutConfigTypes>(layoutConfig)
	const initial = ref<LayoutConfigTypes>(layoutConfig)

	function getLayoutConfig(path: string, defaultValue?: string) {
		return objectPath.get(config.value, path, defaultValue)
	}

	function setLayoutConfigProperty(property: string, value: any) {
		objectPath.set(config.value, property, value)
		localCache.setJSON(LS_CONFIG_NAME_KEY, config.value)
	}

	function resetLayoutConfig() {
		config.value = Object.assign({}, initial.value)
	}
	function removeCacheLayoutConfig() {
		localCache.setJSON(LS_CONFIG_NAME_KEY, layoutConfig)
		overrideLayoutConfig()
	}

	function overrideLayoutConfig() {
		config.value = initial.value = Object.assign(
			{},
			initial.value,
			localCache.getJSON(LS_CONFIG_NAME_KEY) || {}
		)
	}

	const mode = ref<"light" | "dark" | "system">(
		localCache.get(THEME_MODE_LS_KEY) as "light" | "dark" | "system"
	)

	function setThemeMode(payload: "light" | "dark" | "system") {
		let currentMode = payload
		localCache.set(THEME_MODE_LS_KEY, currentMode)
		localCache.set(THEME_MENU_MODE_LS_KEY, currentMode)
		mode.value = currentMode

		if (currentMode === "system") {
			currentMode = ThemeModeComponent.getSystemMode()
		}

		document.documentElement.setAttribute("data-bs-theme", currentMode)
		ThemeModeComponent.init()
	}

	return {
		getClasses,
		addBodyClassname,
		removeBodyClassName,
		addBodyAttribute,
		removeBodyAttribute,
		addClassname,
		config,
		getLayoutConfig,
		setLayoutConfigProperty,
		resetLayoutConfig,
		removeCacheLayoutConfig,
		overrideLayoutConfig,
		mode,
		setThemeMode
	}
})