import React from 'react';
import Gravatar from 'react-gravatar';

import BaseComponent from '../utils/BaseComponent';
import BugStore from '../stores/BugStore';
import BugToPRStore from '../stores/BugToPRStore';

/**
 * Renders most of the bug UI. Should contain the Queue, Ready, and Not Ready
 * sections.
 * @class
 */
export default class TimelineApp extends BaseComponent {
  get stores() {
    return [BugStore, BugToPRStore];
  }

  getNewState() {
    return {
      bugs: BugStore.getAll(),
      bugToPRs: BugToPRStore.getAll(),
    };
  }

  render() {
    return (
      <div>
        <table className="BugTable">
          <thead>
            <tr>
              <th className="BugTable__head--number">
                ID
              </th>
              <th className="BugTable__head">
                Summary
              </th>
              <th className="BugTable__head">
                Assigned to
              </th>
              <th className="BugTable__head">
                Status
              </th>
              <th className="BugTable__head--number">
                Points
              </th>
              <th className="BugTable__head--number">
                PR
              </th>
            </tr>
          </thead>

          <tbody>
            {this.state.bugs.map((bug) => {
              return <BugRow
                key={`bug-${bug.get('id')}`}
                bug={bug}
                prs={BugToPRStore.get(bug.get('id'))}/>;
            })}
          </tbody>
        </table>
      </div>
    );
  }
}


/**
 * Renders a single <tr> in a bug table.
 */
class BugRow extends React.Component {
  render() {
    let bug = this.props.bug;
    let prs = this.props.prs;
    let bugUrl = `https://bugzilla.mozilla.org/show_bug.cgi?id=${bug.get('id')}`;

    return (
      <tr>
        <td className="BugTable__data--number">
          <a href={bugUrl}>
            {bug.get('id')}
          </a>
        </td>
        <td className="BugTable__data">
          {bug.get('summary')}
        </td>
        <td className="BugTable__data">
          <AssignedTo user={bug.get('assigned_to_detail')}/>
        </td>
        <td className="BugTable__data">
          {bug.get('status')}
        </td>
        <td className="BugTable__data--number">
          {bug.getIn(['whiteboard_parsed', 'p'])}
        </td>
        <td className="BugTable__data--number">
          {prs.map((pr) => <a href={pr.get('html_url')}>#{pr.get('number')}</a>)}
        </td>
      </tr>
    );
  }
}


/**
 * Renders a small chip for a user. Shows a name and a Gravatar.
 *
 * TODO: This is probably useful enough to move somewhere public
 */
class AssignedTo extends React.Component {
  render() {
    const user = this.props.user;
    if (user.get('email') === 'nobody@mozilla.org') {
      return <span/>;
    } else {
      return <span>
        <Gravatar email={user.get('email')} https size={32}/>
        {user.get('real_name', user.get('name'))}
      </span>;
    }
  }
}

@@ -58,16 +58,51 @@
 avatar';
+%0Aimport Immutable from 'immutable';
 %0A%0Aimport
@@ -240,16 +240,69 @@
 RStore';
+%0Aimport BugStateStore from '../stores/BugStateStore';
 %0A%0A/**%0A *
@@ -512,16 +512,31 @@
 oPRStore
+, BugStateStore
 %5D;%0A  %7D%0A%0A
@@ -632,24 +632,65 @@
 e.getAll(),%0A
+      bugStates: BugStateStore.getAll(),%0A
     %7D;%0A  %7D%0A%0A
@@ -1347,32 +1347,120 @@
           %3C/th%3E%0A
+              %3Cth className=%22BugTable__head%22%3E%0A                State%0A              %3C/th%3E%0A
             %3C/tr
@@ -1543,16 +1543,57 @@
 g) =%3E %7B%0A
+              let bugId = bug.get('id');%0A
         
@@ -1644,26 +1644,18 @@
 ug-$%7Bbug
-.get('id')
+Id
 %7D%60%7D%0A    
@@ -1701,38 +1701,118 @@
 rs=%7B
-BugToPRStore.get(bug.get('id')
+this.state.bugToPRs.get(bugId, new Immutable.List())%7D%0A                bugState=%7Bthis.state.bugStates.get(bugId
 )%7D/%3E
@@ -2767,16 +2767,43 @@
 r) =%3E %3Ca
+ key=%7B%60pr-$%7Bpr.get('id')%7D%60%7D
  href=%7Bp
@@ -2857,24 +2857,136 @@
       %3C/td%3E%0A
+        %3Ctd className=%22BugTable__data%22%3E%0A          %7B(this.props.bugState %7C%7C 'Unknown').toString()%7D%0A        %3C/td%3E%0A
       %3C/tr%3E%0A

Add ugly but functional bug state to UI.