import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

import { mapStateToProps, mapDispatchToProps } from '../propMaps.js';

import NavigationDrawerCollectionProv from '../pagelets/NavigationDrawerCollectionProv.jsx';
import NewsFeedProv from '../pagelets/NewsFeedProv.jsx';

import { TwitterTimeline } from 'catalyst-ui';

class AdmissionsTabProvider extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {
      navigationCollection,
      newsFeed,
    } = this.props.storeStates;

    const {
      fetchNews,
      invalidateNews,
      fetchNavigationCollection,
      invalidateNavigationCollection,
    } = this.props.storeDispatchers;

    return (
      <div key="TabProvider">
        <div className="">
          <div className="small-12 medium-4 large-3 columns ">
            <NavigationDrawerCollectionProv
              navigationCollection={navigationCollection}
              pageletName="ADMN_ADMISSIONS_RELATE1095582"
              pageletTitle="Admissions Related Links"
              fetch={fetchNavigationCollection}
              invalidate={invalidateNavigationCollection}
            />
            <br/>
            <NavigationDrawerCollectionProv
              navigationCollection={navigationCollection}
              pageletName="ADMN_LINKS_TO_GET_YOU_1094131"
              pageletTitle="Links To Get You Started"
              fetch={fetchNavigationCollection}
              invalidate={invalidateNavigationCollection}
            />
            <br/>
            <NavigationDrawerCollectionProv
              navigationCollection={navigationCollection}
              pageletName="ADMN_INTERNATIONAL_STU1029637"
              pageletTitle="International Students"
              fetch={fetchNavigationCollection}
              invalidate={invalidateNavigationCollection}
            />
            <br/>
          </div>
          <div className="small-12 medium-8 large-5 columns">
            <TwitterTimeline
              id="684092524168933377"
              title="Tweets by @UCAdmissions"
              username="UCAdmissions"
            />
            <br/>
          </div>
          <div className="small-12 medium-8 large-4 columns">
          </div>
        </div>
      </div>
    );
  }
}

AdmissionsTabProvider.propTypes = {
  storeStates: PropTypes.object,
  storeDispatchers: PropTypes.object,
};

export default connect(mapStateToProps, mapDispatchToProps)(AdmissionsTabProvider);
export { AdmissionsTabProvider as AdmissionsTabProviderDumb };