import React, { Component, PropTypes } from 'react';
import {districtColors, partyData} from './Constants';
import {contiguous} from './util';

class DistrictRow extends Component {
  districtName(id) {
    if (id === 0) {
      return "Unassigned";
    } else {
      return `District ${id}`;
    }
  }

  render () {
    const {id, size, idealSize, parties, winner, precincts} = this.props;
    let incorrectReason;
    if (idealSize) {
      if (!contiguous(precincts)) {
        incorrectReason = "District is not contiguous";
      } else if (size > idealSize) {
        incorrectReason = "District too large";
      } else if (size < idealSize) {
        incorrectReason = "District too small";
      }
    } else {
      if (size !== 0) {
        incorrectReason = "Not all precincts assigned";
      }
    }
    return <tr style={{backgroundColor: districtColors[id]}}>
      {/* TODO: maybe a fancier tooltip */}
      <td title={incorrectReason}>{incorrectReason ? "❌" : "✔"}</td>
      <th>{this.districtName(id)}</th>
      <td>{size}{idealSize && `/${idealSize}`}</td>
      {/* TODO: colors; generalize */}
      <td>{winner === undefined ? "" :
           winner === null ? "tie" : partyData[winner].name}</td>
      <td>{parties.R} {partyData.R.name}/{parties.D} {partyData.D.name}</td>
    </tr>
  }
}

DistrictRow.propTypes = {
  id: PropTypes.number.isRequired,
  size: PropTypes.number.isRequired,
  idealSize: PropTypes.number,
  parties: PropTypes.objectOf(PropTypes.number),
  winner: PropTypes.string,
}

export default DistrictRow;

@@ -386,16 +386,17 @@
 .props;%0A
+%0A
     let 
@@ -806,24 +806,25 @@
     %7D%0A    %7D%0A
+%0A
     return %3C
@@ -1130,16 +1130,25 @@
 %3Ctd%3E
+%0A        
 %7Bwinner 
 === 
@@ -1143,17 +1143,17 @@
 %7Bwinner 
-=
+!
 == undef
@@ -1161,25 +1161,157 @@
 ned 
-? %22%22 :%0A          
+&&%0A          %3Cspan style=%7B%7Bcolor: winner ? partyData%5Bwinner%5D.color : %22black%22%7D%7D%3E%0A            %E2%9A%AB%0A          %3C/span%3E%7D%0A        %7Bwinner === undefined ? %22%22 :
  win
@@ -1330,14 +1330,24 @@
  ? %22
-t
+T
 ie%22 :
+%0A         
  par
@@ -1362,24 +1362,31 @@
 inner%5D.name%7D
+%0A      
 %3C/td%3E%0A      

Add colored dot for winner