import React from "react";
import { connect } from "react-redux";
import { push } from "redux-router";

import AppBar from "material-ui/AppBar";

import { Actions } from "./redux/actions";

import { ActionKeyStore as ConfigurationsActionKeyStore } from "../../services/configurations/redux/actions";

import graph1 from "../../images/graph1.png"
import graph2 from "../../images/graph2.png"
import graph3 from "../../images/graph3.png"
import graph4 from "../../images/graph4.png"

import {theme} from "../../theme"

const style = {
    navBar: {
        background: theme.palette.primary2Color,
    },
    card: {
        border: theme.palette.thinBorder + theme.palette.primary2Color,
        borderRadius: theme.palette.smallBorderRadius,
    }
};

function getGraph(name) {
    switch(name) {
        case "graph1":
            return graph1;
        case "graph2":
            return graph2;
        case "graph3":
            return graph3;
        case "graph4":
        default:
            return graph4;
    }
};


class VisualizationView extends React.Component {

    componentWillMount() {
        // Not setting the title here because this component
        // may be either instantiated within a dashboard
        // OR in an individual visualization page.
        //this.props.setPageTitle("Visualization");
    };

    render() {
        let { id, title } = this.props;
        return (
            <div style={style.card}>
                <AppBar
                    title={title}
                    showMenuIconButton={false}
                    style={style.navBar}
                    />
                <div>
                    <img src={getGraph(id)} alt={id} width="100%" height="100%" />
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state, ownProps) => ({
    title: state.configurations.getIn([
        ConfigurationsActionKeyStore.VISUALIZATIONS,
        ownProps.id,
        ConfigurationsActionKeyStore.DATA,
        "title"
    ])
});


const actionCreators = (dispatch) => ({
    setPageTitle: function(aTitle) {
        dispatch(Actions.updateTitle(aTitle));
    },
    goTo: function(link, filters) {
        dispatch(push({pathname:link, query:filters}));
    }
 });


export default connect(mapStateToProps, actionCreators)(VisualizationView);

@@ -1110,166 +1110,172 @@
   //
- Not setting the title here because this component%0A        // may be either instantiated within a dashboard%0A        // OR in an individual visualiz
+const %7B configuration, isFetching, id, fetchConfiguration %7D = this.props;%0A        //if(!(configuration %7C%7C isFetching))%7B%0A        //    fetchConfigur
 ation
- page.
+(params.id);
 %0A   
@@ -1285,56 +1285,15 @@
   //
-this.props.setPageTitle(%22Visualization%22);
+%7D
 %0A    %7D
-;
 %0A%0A  
@@ -1317,18 +1317,20 @@
     
-le
+cons
 t %7B id, 
 titl
@@ -1325,21 +1325,29 @@
 t %7B id, 
-title
+configuration
  %7D = thi
@@ -1347,32 +1347,113 @@
 %7D = this.props;%0A
+        const title = configuration ? configuration.get(%22title%22) : %22Loading...%22;%0A
         return (
@@ -1874,25 +1874,34 @@
 ) =%3E (%7B%0A
+%0A
     
-title
+configuration
 : state.
@@ -1964,111 +1964,423 @@
 ore.
-VISUALIZATIONS,%0A        ownProps.id,%0A        ConfigurationsActionKeyStore.DATA,%0A        %22title%22
+DASHBOARDS,%0A        ownProps.id,%0A        ConfigurationsActionKeyStore.DATA%0A    %5D),%0A%0A    fetching: state.configurations.getIn(%5B%0A        ConfigurationsActionKeyStore.DASHBOARDS,%0A        ownProps.id,%0A        ConfigurationsActionKeyStore.IS_FETCHING%0A    %5D),%0A%0A    error: state.configurations.getIn(%5B%0A        ConfigurationsActionKeyStore.DASHBOARDS,%0A        ownProps.id,%0A        ConfigurationsActionKeyStore.ERROR
 %0A    %5D)%0A
 %7D);%0A
@@ -2375,16 +2375,17 @@
 %0A    %5D)%0A
+%0A
 %7D);%0A%0A%0Aco

Refactor Visualization component