/*
Switches between premade themes for the site.

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

import {h, Component} from 'preact';  /** @jsx h*/

import PropTypes from 'prop-types';
import FontAwesome from 'react-fontawesome';
import {observer} from 'mobx-observer';

import {themeStore} from './store';


@observer export class ThemeSwitcher extends Component {
  static get propTypes() {
    return {
      styler: PropTypes.object,
    }
  }

  constructor(props) {
    super(props);
    this.handleSwitchTheme = this.handleSwitchTheme.bind(this);
  }

  handleSwitchTheme() {
    themeStore.switchTheme();
  }

  render() {
    return (
      <div
        className='text-center muted hoverable'
        onClick={ this.handleSwitchTheme }
        style={ this.props.styler }
      >
        <FontAwesome name='eye' />&nbsp;&nbsp;
        Change to { themeStore.nextTheme } theme
      </div>
    );
  }
}
