import { createStore } from 'vuex';

// The modules to import
import auth, { Store as AuthStore, State as AuthState } from './auth';
import counter, { Store as CounterStore, State as CounterState } from './counter';

// A State type with all the submodules
type State = {
  auth: AuthState;
  counter: CounterState;
}

// And the store is an extension of all the stores but each store receives its own state
export type Store = AuthStore<Pick<State, 'auth'>> & CounterStore<Pick<State, 'counter'>>;

const store = createStore({
  modules: {
    auth,
    counter,
  },
});

export function useStore() {
  // This made the trick to me, i dont love it, but i dont know other way to do it.
  // The compiler kept complaining about it not being compatible with Vuex' store so i casted it to uknnown
  // and after that re-casted as the Store we just defined.
  return store as unknown as Store;
}

export default store;