/*
Switches between premade themes for the site.

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

import React from "react";
import FontAwesome from "react-fontawesome";
import {connect} from "react-redux";

import {appStore} from "../stores";
import {switchThemes} from "../actions";


export class ThemeSwitchView extends React.Component {
    static get propTypes() {
        return {
            theme: React.PropTypes.string,
            alternativeTheme: React.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);
