// Data Store Pattern
/*
This pattern has a few parts:
A global state singleton
Exporting some or all of this state
Methods to access and modify the state
*/


import { reactive, toRefs, readonly } from 'vue';
import { themes } from './utils';

// 1. Create global state in module scope, shared every
//    time we use this composable
const state = reactive({
  darkMode: false,
  sidebarCollapsed: false,
  // 2. This theme value is kept private to this composable
  theme: 'nord',
});

export default () => {
  // 2. Expose only some of the state
  //    Using toRefs allows us to share individual values
  const { darkMode, sidebarCollapsed } = toRefs(state);

  // 3. Modify our underlying state
  const changeTheme = (newTheme) => {
    if (themes.includes(newTheme)) {
      // Only update if it's a valid theme
      state.theme = newTheme;
    }
  }

  return {
    // 2. Only return some of the state
    darkMode,
    sidebarCollapsed,
    // 2. Only expose a readonly version of state
    theme: readonly(state.theme),
    // 3. We return a method to modify underlying state
    changeTheme,
  }
}