import React from 'react';
import Reflux from 'reflux';
import SocialStore from '../stores/socialStore';
import Card from './shared/card.js'


var Social = React.createClass({
  mixins: [Reflux.connect(SocialStore, 'socialstore')],

  render: function() {
    if(this.state.socialstore){
      var tempSocialStore = this.state.socialstore
    }else{
      var tempSocialStore = [];
    }

    return <div className="android-be-together-section">
        <div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
          <header className="mdl-layout__header">
            <div className="mdl-layout__header-row">
              <span className="mdl-layout-title">Portfolio</span>
            </div>
            <div className="mdl-layout__tab-bar mdl-js-ripple-effect">
              <a href="#scroll-tab-1" className="mdl-layout__tab is-active">Stackoverflow</a>
              <a href="#scroll-tab-2" className="mdl-layout__tab">GitHub</a>
              <a href="#scroll-tab-3" className="mdl-layout__tab">Twitter</a>
              <a href="#scroll-tab-4" className="mdl-layout__tab">Instagram</a>
            </div>
          </header>
          <main className="mdl-layout__content">
            <section className="mdl-layout__tab-panel is-active" id="scroll-tab-1">
              <div className="page-content">
                <div className="content">
                  {
                    tempSocialStore.map(function (item){
                      return  <Card title={item.title_description} description={item.summary_description} btnTitle="View" link={item.id_description} />
                    })
                  }
                </div>
              </div>
            </section>
            <section className="mdl-layout__tab-panel" id="scroll-tab-2">
              <div className="page-content">content 2</div>
            </section>
            <section className="mdl-layout__tab-panel" id="scroll-tab-3">
              <div className="page-content">content 3</div>
            </section>
            <section className="mdl-layout__tab-panel" id="scroll-tab-4">
              <div className="page-content">content 4</div>
            </section>
          </main>
        </div>
    </div>
  }
});

export default Social;