import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { mapStateToProps, mapDispatchToProps } from '../propMaps.js';

import TodoListProv from '../pagelets/TodoListProv.jsx';
import ServiceIndicatorsProv from '../pagelets/ServiceIndicatorsProv.jsx';
import NavigationDrawerCollectionProv from '../pagelets/NavigationDrawerCollectionProv.jsx';
import FinancialAidProv from '../pagelets/FinancialAidProv.jsx';
import AccountSummaryProv from '../../src/pagelets/AccountSummaryProv.jsx';
import NewsFeedProv from '../pagelets/NewsFeedProv.jsx';
import { Card, CardTitle } from 'material-ui';
import catalystLogo from '../content/catalystlogo.png';

class FinanceTabProvider extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    const {
      activityGuide,
      checklist,
      financialAid,
      navigationCollection,
      serviceIndicators,
      studentAccount,
      newsFeed,
    } = this.props.storeStates;

    const {
      fetchActivityGuide,
      invalidateActivityGuide,
      fetchChecklist,
      invalidateChecklist,
      fetchNavigationCollection,
      invalidateNavigationCollection,
      fetchFinancialAid,
      invalidateFinancialAid,
      fetchServiceIndicators,
      invalidateServiceIndicators,
      fetchStudentAccount,
      invalidateStudentAccount,
      fetchNews,
      invalidateNews,
    } = this.props.storeDispatchers;

    return (
      <div key="TabProvider">
        <div className="">
          <div className="small-12 medium-4 large-3 columns ">
            <NavigationDrawerCollectionProv
              navigationCollection={navigationCollection}
              pageletName="ADMN_BILLING_RELATED_H1006706"
              pageletTitle="Billing Related"
              fetch={fetchNavigationCollection}
              invalidate={invalidateNavigationCollection}
            />
            <br/>
            <NavigationDrawerCollectionProv
              navigationCollection={navigationCollection}
              pageletName="ADMN_FINANCIAL_AID_HMP1067316"
              pageletTitle="Financial Aid"
              fetch={fetchNavigationCollection}
              invalidate={invalidateNavigationCollection}
            />
            <br/>
          </div>
          <div className="small-12 medium-8 large-5 columns ">
            <AccountSummaryProv
              summary={studentAccount}
              fetch={fetchStudentAccount}
              invalidate={invalidateStudentAccount}
              />
            <br/>
            <FinancialAidProv
              financialAid={financialAid}
              fetch={fetchFinancialAid}
              invalidate={invalidateFinancialAid}
            />
            <br/>
            <NewsFeedProv
              newsFeed={newsFeed}
              fetch={fetchNews}
              invalidate={invalidateNews}
              pageletName="UCI_STUDENT_FINANCES_NEWS"
              />
          </div>
          <div className="small-12 medium-8 large-4 columns">
            <TodoListProv
              checklist={checklist}
              fetchChecklist={fetchChecklist}
              invalidateChecklist={invalidateChecklist}
              activityGuide={activityGuide}
              fetchActivityGuide={fetchActivityGuide}
              invalidateActivityGuide={invalidateActivityGuide}
            />
            <br/>
            <ServiceIndicatorsProv
              serviceIndicators={serviceIndicators}
              fetch={fetchServiceIndicators}
              invalidate={invalidateServiceIndicators}
            />
            <br />
            <Card>
              <CardTitle
                title={<span style={{color: '#e00122'}}>Need Help?</span>}
                style={{
                  borderBottomWidth: 1,
                  borderBottomStyle: 'solid',
                  borderBottomColor: '#E0E0E0'
                }}
              />
                <div style={{margin: 20 }}>
                <li><a target="_new" href="http://www.uc.edu/catalyst/tips-tricks.html">Catalyst tips and tricks</a> provide how-to videos and step-by-step instructions to help you navigate Catalyst.</li>
                <li><strong>Catalyst tutorials</strong> (<em>see Quick Links on on My Dashboard</em>) contain helpful videos.</li>
                </div>
            </Card>
            <br/>
          </div>
        </div>
      </div>
    );
  }
}

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

export default connect(mapStateToProps, mapDispatchToProps)(FinanceTabProvider);
export { FinanceTabProvider as FinanceTabProviderDumb };