mancala/frontend/src/theme/ThemeManager.ts

import lightTheme from "./LightTheme";
import greyTheme from "./GreyTheme";
import { Theme } from "./Theme";
import darkTheme from "./DarkTheme";
import EventEmitter2, { Listener } from "eventemitter2";

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

const THEME_ID = "theme_id";

export type ThemeManagerEvents = "themechange";

export default class ThemeManager extends EventEmitter2 {
  private _theme: Theme;
  constructor() {
    super();
    this._theme = this.readFromLocalStorage() || lightTheme;
  }

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

  public set theme(value: Theme) {
    this._theme = value;
    this.emit("themechange", value);
    this.writetToLocalStorage(value);
  }

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

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

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

  public on(event: ThemeManagerEvents, callback: (...value: any[]) => void): Listener | this {
    return super.on(event, callback);
  }
  public off(event: ThemeManagerEvents, callback: (...value: any[]) => void): this {
    return super.off(event, callback);
  }
}