import {
  ReducerType,
  configureStore,
  createAction,
  createReducer,
} from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/query";
import { AuthApi, User } from "../slice/AuthApi";
import { QueueApi } from "../slice/QueueApi";
import { NewsApi } from "../slice/NewsApi";

export type AuthDataType = {
  token: string | null;
  user: { name: string | null; username: string } | null;
};

const initialAuthDataState: AuthDataType = {
  token: null,
  user: null,
};

export type SettingsType = {
  language: string | undefined;
};

const initialSettingsState: SettingsType = {
  language: undefined,
};

export type StorePrototype = {
  AuthApi: ReducerType;
  auth: AuthDataType;
  settings: SettingsType;
};

export const updateToken = createAction<string>("auth/updateToken");
export const getLocalToken = createAction("auth/getLocalToken");
export const updateUser = createAction<User>("auth/updateUser");
export const logOut = createAction("auth/logOut");

export const setLanguage = createAction<string>("settings/setLanguage");
export const loadLanguage = createAction("settings/loadLanguage");

export const store = configureStore({
  reducer: {
    // Add the generated reducer as a specific top-level slice
    [AuthApi.reducerPath]: AuthApi.reducer,
    [QueueApi.reducerPath]: QueueApi.reducer,
    [NewsApi.reducerPath]: NewsApi.reducer,
    auth: createReducer(initialAuthDataState, (builder) => {
      builder.addCase(updateToken, (state, action) => {
        state.token = action.payload;
        localStorage.setItem("token", action.payload);
      });
      builder.addCase(getLocalToken, (state) => {
        const token: string | null = localStorage.getItem("token");
        if (token) {
          state.token = token;
        }
      });
      builder.addCase(updateUser, (state, action) => {
        state.user = action.payload;
      });
      builder.addCase(logOut, (state) => {
        localStorage.removeItem("token");
        state.token = null;
        state.user = null;
      });
    }),
    settings: createReducer(initialSettingsState, (builder) => {
      builder.addCase(setLanguage, (state, action) => {
        state.language = action.payload || "en";
        localStorage.setItem("language", action.payload || "en");
      });
      builder.addCase(loadLanguage, (state) => {
        const language: string | null = localStorage.getItem("language");
        if (language) {
          state.language = language;
        } else {
          state.language = "en";
        }
      });
    }),
  },
  // Adding the api middleware enables caching, invalidation, polling,
  // and other useful features of `rtk-query`.
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware()
      .concat(AuthApi.middleware)
      .concat(QueueApi.middleware)
      .concat(NewsApi.middleware),
});

// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
// see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
setupListeners(store.dispatch);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;