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

export enum EPathsFromHome {
  compatibility,
  breath,
  navbar,
}

interface ISiteConfig {
  home: {
    isShowNavbar: boolean;
    pathFromHome: EPathsFromHome;
  };
  openAiToken: string;
  trialChoiceArrowOptions: {
    left?: string;
  },
  darkTheme: boolean;
}

const initialState: ISiteConfig = {
  home: {
    isShowNavbar: false,
    pathFromHome: EPathsFromHome.compatibility,
  },
  openAiToken: "",
  trialChoiceArrowOptions: {},
  darkTheme: false,
};

const siteConfigSlice = createSlice({
  name: "siteConfig",
  initialState,
  reducers: {
    update(state, action: PayloadAction<Partial<ISiteConfig>>) {
      return { ...state, ...action.payload };
    },
    updateTrialChoiceArrowOptions(state, action: PayloadAction<Partial<ISiteConfig['trialChoiceArrowOptions']>>) {
      return { ...state, trialChoiceArrowOptions: { ...state.trialChoiceArrowOptions, ...action.payload } }
    },
    updateDarkTheme(state, action: PayloadAction<boolean>) {
      return { ...state, darkTheme: action.payload }
    }
  },
  extraReducers: (builder) => builder.addCase("reset", () => initialState),
});

export const { actions } = siteConfigSlice;
export const selectHome = createSelector(
  (state: { siteConfig: ISiteConfig }) => state.siteConfig.home,
  (siteConfig) => siteConfig
);
export const selectOpenAiToken = createSelector(
  (state: { siteConfig: ISiteConfig }) => state.siteConfig.openAiToken,
  (siteConfig) => siteConfig
);
export const selectTrialChoiceArrowOptions = createSelector(
  (state: { siteConfig: ISiteConfig }) => state.siteConfig.trialChoiceArrowOptions,
  (siteConfig) => siteConfig
);
export const selectDarkTheme = createSelector(
  (state: { siteConfig: ISiteConfig }) => state.siteConfig.darkTheme,
  (siteConfig) => siteConfig
);
export default siteConfigSlice.reducer;
