import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { STORAGE_KEY_SIDEBAR } from '../../constants';

interface UiState {
  sidebarOpen: boolean;
}

const initialState: UiState = {
  sidebarOpen: window.localStorage.getItem(STORAGE_KEY_SIDEBAR) !== 'false',
};

const uiSlice = createSlice({
  name: 'ui',
  initialState,
  reducers: {
    toggleSidebar: (state) => {
      state.sidebarOpen = !state.sidebarOpen;
      window.localStorage.setItem(STORAGE_KEY_SIDEBAR, String(state.sidebarOpen));
    },
    setSidebarOpen: (state, action: PayloadAction<boolean>) => {
      state.sidebarOpen = action.payload;
      window.localStorage.setItem(STORAGE_KEY_SIDEBAR, String(action.payload));
    },
  },
});

export const { toggleSidebar, setSidebarOpen } = uiSlice.actions;
export const selectSidebarOpen = (state: { ui: UiState }) => state.ui.sidebarOpen;
export default uiSlice.reducer;