import { $themeConfig } from '../theme.config';
import store from '@/stores';

export default {
    init() {
        // set default styles
        let val: any = localStorage.getItem('theme'); // light, dark, system
        val = val || $themeConfig.theme;
        store.dispatch('toggleTheme', val);

        val = localStorage.getItem('menu'); // vertical, collapsible-vertical, horizontal
        val = val || $themeConfig.menu;
        store.dispatch('toggleMenu', val);

        val = localStorage.getItem('superMenu'); // vertical, collapsible-vertical, horizontal
        val = val || $themeConfig.superMenu;
        store.dispatch('toggleSuperMenu', val);

        val = localStorage.getItem('companId'); // vertical, collapsible-vertical, horizontal
        val = val || $themeConfig.companId;
        store.dispatch('toggleCompanId', val);

        val = localStorage.getItem('layout'); // full, boxed-layout
        val = val || $themeConfig.layout;
        store.dispatch('toggleLayout', val);

        val = localStorage.getItem('i18n_locale'); // en, da, de, el, es, fr, hu, it, ja, pl, pt, ru, sv, tr, zh
        val = val || $themeConfig.locale;

        const list = store.getters.languageList;
        const item = list.find((item: any) => item.code === val);
        if (item) {
            this.toggleLanguage(item);
        }

        val = localStorage.getItem('rtlClass'); // rtl, ltr
        val = val || $themeConfig.rtlClass;
        store.dispatch('toggleRTL', val);

        val = localStorage.getItem('animation'); // animate__fadeIn, animate__fadeInDown, animate__fadeInUp, animate__fadeInLeft, animate__fadeInRight, animate__slideInDown, animate__slideInLeft, animate__slideInRight, animate__zoomIn
        val = val || $themeConfig.animation;
        store.dispatch('toggleAnimation', val);

        val = localStorage.getItem('navbar'); // navbar-sticky, navbar-floating, navbar-static
        val = val || $themeConfig.navbar;
        store.dispatch('toggleNavbar', val);

        val = localStorage.getItem('semidark');
        val = val === 'true' ? true : $themeConfig.semidark;
        store.dispatch('toggleSemidark', val);
    },

    toggleLanguage(item: any) {
       /*  const store = useStore(); */
        let lang: any = null;
        if (item) {
            lang = item;
        } else {
            let code = store.state.locale || null;
            if (!code) {
                code = localStorage.getItem('i18n_locale');
            }

            item = store.getters.languageList.find((d: any) => d.code === code);
            if (item) {
                lang = item;
            }
        }

        if (!lang) {
            lang = store.getters.languageList.find((d: any) => d.code === 'zh');
        }
        store.dispatch('toggleLocale', lang.code);
        return lang;
    },

    changeAnimation(type = 'add') {
       /*  const store = useStore(); */
        if (store.state.animation) {
            const eleanimation: any = document.querySelector('.animation');
            if (type === 'add') {
                eleanimation?.classList.add('animate__animated');
                eleanimation?.classList.add(store.state.animation);
            } else {
                eleanimation?.classList.remove('animate__animated');
                eleanimation?.classList.remove(store.state.animation);
            }
        }
    },
};