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

interface IOnboardingConfig {
    home: {
      isShown: boolean;
    };
    compatibility: {
      isShown: boolean;
    };
    breath: {
      isShown: boolean;
    };
    navbarFooter: {
      isShown: boolean;
    }
}

const initialState: IOnboardingConfig = {
    home: {
      isShown: false,
    },
    compatibility: {
      isShown: false,
    },
    breath: {
      isShown: false,
    },
    navbarFooter: {
      isShown: false
    }
};

const onboardingConfigSlice = createSlice({
  name: "onboardingConfig",
  initialState,
  reducers: {
    update(state, action: PayloadAction<Partial<IOnboardingConfig>>) {
      return { ...initialState, ...state, ...action.payload };
    },
  },
  extraReducers: (builder) => builder.addCase("reset", () => initialState),
});

export const { actions } = onboardingConfigSlice;
export const selectOnboarding = createSelector(
  (state: { onboardingConfig: IOnboardingConfig }) => {
    return state.onboardingConfig
  },
  (onboardingConfig) => onboardingConfig
);
export const selectOnboardingHome = createSelector(
  (state: { onboardingConfig: IOnboardingConfig }) => state.onboardingConfig.home,
  (onboardingConfig) => onboardingConfig
);
export const selectOnboardingNavbarFooter = createSelector(
  (state: { onboardingConfig: IOnboardingConfig }) => state.onboardingConfig.navbarFooter,
  (onboardingConfig) => onboardingConfig
);
export const selectOnboardingCompatibility = createSelector(
  (state: { onboardingConfig: IOnboardingConfig }) =>
    state.onboardingConfig.compatibility,
  (onboardingConfig) => onboardingConfig
);
export const selectOnboardingBreath = createSelector(
  (state: { onboardingConfig: IOnboardingConfig }) => state.onboardingConfig.breath,
  (onboardingConfig) => onboardingConfig
);
export default onboardingConfigSlice.reducer;