import { RootState } from 'app/rootReducer';

import { PaletteType } from '@material-ui/core';
import { createMuiTheme } from '@material-ui/core/styles';
import { createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit';

import themes, { Themes } from './themes';

type ThemeBanner = keyof Themes;
type ThemeState = {
  banner: ThemeBanner;
  preferredType: PaletteType;
  selectedType?: PaletteType;
};

const initialState: ThemeState = {
  banner: 'EDG',
  preferredType: 'light',
};

const themeSlice = createSlice({
  name: 'theme',
  initialState,
  reducers: {
    setBanner(state, { payload }: PayloadAction<ThemeBanner>) {
      state.banner = payload;
    },
    setPreferredType(state, { payload }: PayloadAction<PaletteType>) {
      state.preferredType = payload;
    },
    setSelectedType(state, { payload }: PayloadAction<PaletteType>) {
      state.selectedType = payload;
    },
  },
});

export const {
  setBanner,
  setPreferredType,
  setSelectedType,
} = themeSlice.actions;

const selectStateTheme = ({ theme }: RootState) => theme;
export const selectBanner = createSelector(
  selectStateTheme,
  ({ banner }) => banner,
);
const selectPreferredType = createSelector(
  selectStateTheme,
  ({ preferredType }) => preferredType,
);
const selectSelectedType = createSelector(
  selectStateTheme,
  ({ selectedType }) => selectedType,
);
export const selectType = createSelector(
  selectPreferredType,
  selectSelectedType,
  (preferredType, selectedType) => selectedType || preferredType,
);
export const selectTheme = createSelector(
  selectBanner,
  selectType,
  (banner, type) =>
    createMuiTheme({
      ...themes[banner],
      palette: { ...themes[banner].palette, type },
    }),
);

export default themeSlice.reducer;