import { Dispatch } from 'redux';
import { SetThemeAction } from '../actions/theme';
import { ActionType } from '../action-types';
import { Theme } from '../../interfaces/Theme';
import { themes } from '../../components/Settings/Themer/themes.json';

export const setTheme =
  (name: string, remeberTheme: boolean = true) =>
  (dispatch: Dispatch<SetThemeAction>) => {
    const theme = themes.find((theme) => theme.name === name);

    if (theme) {
      if (remeberTheme) {
        localStorage.setItem('theme', name);
      }

      loadTheme(theme);

      dispatch({
        type: ActionType.setTheme,
        payload: theme,
      });
    }
  };

export const loadTheme = (theme: Theme): void => {
  for (const [key, value] of Object.entries(theme.colors)) {
    document.body.style.setProperty(`--color-${key}`, value);
  }
};