/*
Store for managing theme state.

@copyright (c) Copyright 2013-2017 Dorian Pula
@license AGPL v3
@author Dorian Pula [dorian.pula@amber-penguin-software.ca]
*/

import {observable, action} from 'mobx';

import {UserInfo} from '../user_info';


class ThemeStore {
  @observable currentTheme = ThemeStore.getRegisteredThemes()[0];
  @observable nextTheme = ThemeStore.getRegisteredThemes()[1];

  // TODO: Come with something more generic that works on multiple themes.
  static getRegisteredThemes() {
    return ['daytime', 'evening'];
  }

  @action
  switchTheme() {
    const currentTheme = this.currentTheme;

    let nextTheme = 'daytime';
    if (currentTheme === 'daytime') {
      nextTheme = 'evening';
    }

    let registeredThemes = ThemeStore.getRegisteredThemes();
    if (registeredThemes.indexOf(nextTheme) === -1) {
      console.error(
        `Selected theme '${nextTheme}' is not one of the known themes: 
        '${registeredThemes}'`);
      nextTheme = registeredThemes[0];
    }

    if (currentTheme !== nextTheme) {
      console.log(`Adding '${nextTheme}' and removing '${currentTheme}'`);
      document.body.classList.remove(currentTheme);
      document.body.classList.add(nextTheme);
    }

    UserInfo.setUserInfo('theme', nextTheme);
    this.currentTheme = nextTheme;
    this.nextTheme = currentTheme;
  }
}

export const themeStore = new ThemeStore();
