mancala/src/theme/ThemeManager.ts

import lightTheme from "./LightTheme";
import greyTheme from "./GreyTheme";
import { Theme } from "./Theme";
import darkTheme from "./DarkTheme";

export const themes = [lightTheme, darkTheme, greyTheme];

const THEME_ID = "theme_id";

export default class ThemeManager {
  _theme: Theme;
  onThemeChange: (theme: Theme) => void;
  constructor() {
    this._theme = this.readFromLocalStorage() || lightTheme;
  }

  public get theme() {
    return this._theme;
  }

  public set theme(value: Theme) {
    this._theme = value;
    this.onThemeChange?.(value);
    this.writetToLocalStorage(value);
  }

  private writetToLocalStorage(value: Theme) {
    localStorage.setItem(THEME_ID, value.id);
  }

  private readFromLocalStorage(): Theme {
    const themeID = localStorage.getItem(THEME_ID);
    const theme = themes.find((eachTheme: Theme) => themeID === eachTheme.id);
    return theme;
  }

  public get themes(): Theme[] {
    return themes;
  }
}