import darkGreyTheme from "./DarkGrey";
import darkTheme from "./DarkTheme";
import defaultTheme from "./DefaultTheme";
import oldTheme from "./OldTheme";
import { Theme } from "./Theme";

export const themes = [defaultTheme, darkGreyTheme, darkTheme, oldTheme];

const THEME_ID = "theme_id";

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

  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;
  }
}