import config from "@/config.js";

const system = {
    namespaced: true,

    state: {
        theme: localStorage.getItem("darkTheme") ? true : false,
        darkThemeOverrides: {
            Layout: {
                color: '#01364D'
            },
            DataTable: {
                thColor: '#012C3F',
                thTextColor: '#669DB4',
                tdColor: '#023B53',
                borderColor: '#214959',
                tdColorStriped: '#012C3F',
                tdColorHover: '#012C3F',
                thColorModal: '#012C3F',
                tdColorModal: '#023B53',
                borderColorModal: '#214959',
                tdColorHoverModal: '#012C3F',
                tdColorStripedModal: '#012C3F',
            },
            Button: {
                textColor: "#fff"
            },
            Input: {
                textColor: '#01CAC0'
            },
            Card: {
                colorModal: '#012C3F'
            },
            DatePicker: {
                panelColor: '#023B53'
            },
            TreeSelect: {
                menuColor: 'red'
            },
            Popover: {
                color: '#062F38'
            },
            Dialog: {
                color: '#012C3F'
            }
            // Checkbox:{
            //     textColor:"#fff"
            // }

        },
        lightThemeOverrides: {
            Layout: {
                color: '#ffffff'
            },
            DataTable: {
                thColor: '#DEF3F5',
                thTextColor: '#426E87',
                tdColor: '#FAFAFA',
                borderColor: '#D9DCDC',
                tdColorStriped: '#DEF3F5',
                tdColorHover: '#DEF3F5'
            },
            Input: {
                textColor: '#6D92A9'
            },
        },
        themeColor: {
            common: {
                primaryColor: localStorage.getItem("primaryColor") || config.primaryColor,
                primaryColorHover: '#669DB4'
            },
            DataTable: {
                thFontWeight: 'bold'
            },
        }
    },

    mutations: {
        TOGGLE_THEME: (state) => {
            let darkTheme = localStorage.getItem("darkTheme");
            if (!darkTheme) localStorage.setItem("darkTheme", "yes");
            else localStorage.clear("darkTheme");
            state.theme = !state.theme;
        },
    },
};

export default system;