import {DashboardsProvider} from '@bthlabs/homehub-core';
import {withRango} from '@bthlabs/rango';
import PropTypes from 'prop-types';
import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {setDocumentTitle} from 'redux-doctitle';

import {AppLoader} from 'src/main/components';
import {DashboardContainer, TaskbarContainer} from 'src/main/containers';
import {StateDataSource} from 'src/main/dataSources';

import './AppView.scss';

export class AppView extends React.Component {
  componentDidMount () {
    this.props.actions.setDocumentTitle('Hello!');
  }
  render () {
    return (
      <div id="AppView">
        <DashboardsProvider
          loader={<AppLoader />}
          loadDashboards={StateDataSource.loadState}
          saveDashboards={StateDataSource.saveState}
          settings={this.props.settings}
        >
          <div className="content">
            <DashboardContainer />
          </div>

          <TaskbarContainer />
        </DashboardsProvider>
      </div>
    );
  }
}

AppView.propTypes = {
  actions: PropTypes.shape({
    setDocumentTitle: PropTypes.func.isRequired,
  }),
  settings: PropTypes.shape({
    HOMEHUB: PropTypes.shape({
      version: PropTypes.string.isRequired,
    }),
  }),
};

const mapStateToProps = (state, props) => { // eslint-disable-line no-unused-vars
  return {};
};

const mapDispatchToProps = (dispatch, props) => { // eslint-disable-line no-unused-vars
  const actions = bindActionCreators(
    {
      setDocumentTitle: setDocumentTitle,
    },
    dispatch
  );

  return {
    actions: actions,
  };
};

const reduxContainer = connect(
  mapStateToProps, mapDispatchToProps
)(withRango(AppView));

export default reduxContainer;
