import { ref, computed } from 'vue';
import { defineStore } from 'pinia';

export const useThemeStore = defineStore('theme', () => {
    const theme = ref('light'); // 초기 상태는 light

    const isDarkMode = computed(() => theme.value === 'dark');

    const customClass = '.custom-css'; // custom.css 경로
    const coreClass = '.core-css';
    const themeClass = '.theme-css';

    const switchToDarkMode = () => {
        theme.value = 'dark';
        document.documentElement.classList.add('dark-style');
        document.documentElement.classList.remove('light-style');
        document.querySelector(customClass).setAttribute('href', '/css/custom-dark.css');
        document.querySelector(coreClass).setAttribute('href', '/vendor/css/rtl/core-dark.css');
        document.querySelector(themeClass).setAttribute('href', '/vendor/css/rtl/theme-default-dark.css');
    };

    const switchToLightMode = () => {
        theme.value = 'light';
        document.documentElement.classList.remove('dark-style');
        document.documentElement.classList.add('light-style');
        document.querySelector(customClass).setAttribute('href', '/css/custom.css');
        document.querySelector(coreClass).setAttribute('href', '/vendor/css/rtl/core.css');
        document.querySelector(themeClass).setAttribute('href', '/vendor/css/rtl/theme-default.css');
    };

    return {
        theme,
        isDarkMode,
        switchToDarkMode,
        switchToLightMode,
    };
}, {
    persist: {
        enabled: true,
        strategies: [
            {
                storage: localStorage
            }
        ],
    }

});