import { createSlice, type PayloadAction } from '@reduxjs/toolkit';

interface UiState {
    sidebarOpen: boolean;
    darkMode: boolean;
    currentPage: string;
    loading: {
        [key: string]: boolean;
    };
}

const initialState: UiState = {
    sidebarOpen: true,
    darkMode: false,
    currentPage: '/',
    loading: {},
};

export const uiSlice = createSlice({
    name: 'ui',
    initialState,
    reducers: {
        toggleSidebar: (state) => {
            state.sidebarOpen = !state.sidebarOpen;
        },
        setSidebarOpen: (state, action: PayloadAction<boolean>) => {
            state.sidebarOpen = action.payload;
        },
        toggleDarkMode: (state) => {
            state.darkMode = !state.darkMode;
        },
        setDarkMode: (state, action: PayloadAction<boolean>) => {
            state.darkMode = action.payload;
        },
        setCurrentPage: (state, action: PayloadAction<string>) => {
            state.currentPage = action.payload;
        },
        setLoading: (state, action: PayloadAction<{ key: string; isLoading: boolean }>) => {
            const { key, isLoading } = action.payload;
            state.loading[key] = isLoading;
        },
    },
});

export const { toggleSidebar, setSidebarOpen, toggleDarkMode, setDarkMode, setCurrentPage, setLoading } = uiSlice.actions;

export default uiSlice.reducer;