/*
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 FontAwesome from 'react-fontawesome';
import {connect} from 'preact-redux';
import PropTypes from 'prop-types';

import appStore from '../store';
import {switchThemes} from '../actions';


export class ThemeSwitchView extends Component {
  static get propTypes() {
    return {
      theme: PropTypes.string,
      alternativeTheme: PropTypes.string
    };
  }

  handleSwitchTheme() {
    appStore.dispatch(switchThemes());
  }

  render() {
    let changeThemeText = `Change to ${this.props.alternativeTheme} theme`;
    return (
      <div className='text-center muted hoverable' onClick={ this.handleSwitchTheme }>
        <FontAwesome name='eye' />&nbsp;&nbsp;
        { changeThemeText }
      </div>
    );
  }
}

export const ConnectedThemeSwitchView = connect(
  (state) => {
    return {
      'theme': state.theme.theme,
      'alternativeTheme': state.theme.alternativeTheme
    };
  })(ThemeSwitchView);
