// Utilities
import React from 'react';
import { map } from 'lodash';
import { RestApiClient } from '@dosomething/gateway';
import { calculateAge, displayName, displayCityState } from '../../helpers';

// Components
import InboxItem from '../InboxItem';
import HistoryModal from '../HistoryModal';
import ModalContainer from '../ModalContainer';
import UserInformation from '../Users/UserInformation';

// Styles
import './signup.scss';


class Signup extends React.Component {
  constructor(props) {
    super(props);


    this.state = {
      displayHistoryModal: false,
      historyModalId: null,
    };

    this.api = new RestApiClient;
    this.showHistory = this.showHistory.bind(this);
    this.hideHistory = this.hideHistory.bind(this);
  }

  // Open the history modal of the given post
  showHistory(id, event) {
    event.preventDefault()

    this.setState({
      displayHistoryModal: true,
      historyModalId: id,
    });
  }

  // Close the open history modal
  hideHistory(event) {
    if (event) {
      event.preventDefault();
    }

    this.setState({
      displayHistoryModal: false,
      historyModalId: null,
    });
  }

  render() {
    const user = this.props.user;
    const signup = this.props.signup;
    const campaign = this.props.campaign;
    const posts = this.props.signup.posts;

    return (
      <div className="signup">
        <div className="container__row">
          <div className="container__block -half">
            <UserInformation user={user} includeMeta={true} meta={{title: 'Why Statement', details: [signup.why_participated] }}/>
          </div>

          <div className="container__block -half">
            <div className="container__block">

              <a href="#" onClick={e => this.showHistory(signup['signup_id'], e)}>Edit | Show History</a>

              <ModalContainer>
                {this.state.displayHistoryModal ? <HistoryModal id={this.state.historyModalId} onUpdate={this.updateQuantity} onClose={e => this.hideHistory(e)} details={{campaign: campaign, signups: this.state.signups }}/> : null}
              </ModalContainer>
            </div>

            <div className="container__block meta">
              <h4 className="heading">Meta</h4>
              <p>
                <span>Signup ID: {signup.id}<br/></span>
                <span>Northstar ID: {user.id}<br/></span>
                <span>Signup Source: {signup.source}<br/></span>
                <span>Created At: {new Date(signup.created_at).toDateString()}<br/></span>
              </p>
            </div>
          </div>
        </div>

        <div className="container__row">
            <h2>Accepted</h2>

        </div>

        <div className="container__row">
            <h2>Pending</h2>
            {
              map(posts, (post, key) => {
                if (post['status'] === 'pending') {
                  return <InboxItem allowReview={true} key={key} post={post} campaign={campaign} signup={signup} />;
                }
              })
            }
        </div>

        <div className="container__row">
            <h2>Rejected</h2>
            {
              map(posts, (post, key) => {
                if (post['status'] === 'rejected') {
                  return <InboxItem allowReview={true} key={key} post={post} campaign={campaign} signup={signup} />;
                }
              })
            }
        </div>
      </div>
    )
  }
}

export default Signup;

@@ -1689,23 +1689,24 @@
 ontainer
-__block
+ -padded
 %22%3E%0A%0A    
@@ -2160,23 +2160,16 @@
 ontainer
-__block
  meta%22%3E%0A
@@ -2631,28 +2631,353 @@
     
-  %3Ch2%3EAccepted%3C/h2%3E%0A
+%3Cdiv className=%22container__block%22%3E%0A              %3Ch2%3EAccepted%3C/h2%3E%0A          %3C/div%3E%0A%0A          %7B%0A            map(posts, (post, key) =%3E %7B%0A              if (post%5B'status'%5D === 'accepted') %7B%0A                return %3CInboxItem allowReview=%7Btrue%7D key=%7Bkey%7D post=%7Bpost%7D campaign=%7Bcampaign%7D signup=%7Bsignup%7D /%3E;%0A              %7D%0A            %7D)%0A          %7D
 %0A   
@@ -3022,32 +3022,77 @@
 ontainer__row%22%3E%0A
+          %3Cdiv className=%22container__block%22%3E%0A
             %3Ch2%3E
@@ -3105,35 +3105,48 @@
 g%3C/h2%3E%0A     
+     %3C/div%3E%0A
        
-%7B%0A
   
+ %7B%0A
             
@@ -3179,34 +3179,32 @@
 %7B%0A              
-  
 if (post%5B'status
@@ -3219,26 +3219,24 @@
 pending') %7B%0A
-  
             
@@ -3344,38 +3344,34 @@
 ;%0A              
-  %7D%0A  
+%7D%0A
             %7D)%0A 
@@ -3361,34 +3361,32 @@
 %0A            %7D)%0A
-  
           %7D%0A    
@@ -3430,32 +3430,77 @@
 ontainer__row%22%3E%0A
+          %3Cdiv className=%22container__block%22%3E%0A
             %3Ch2%3E
@@ -3517,24 +3517,37 @@
 h2%3E%0A    
+      %3C/div%3E%0A
         
 %7B%0A      
@@ -3530,36 +3530,36 @@
  %3C/div%3E%0A        
-%7B%0A
   
+%7B%0A
             map(
@@ -3588,34 +3588,32 @@
 %7B%0A              
-  
 if (post%5B'status
@@ -3625,34 +3625,32 @@
 = 'rejected') %7B%0A
-  
                 
@@ -3754,38 +3754,34 @@
 ;%0A              
-  %7D%0A  
+%7D%0A
             %7D)%0A 
@@ -3771,34 +3771,32 @@
 %0A            %7D)%0A
-  
           %7D%0A    

Fix some layout issues