import React, { Component, PropTypes } from 'react';
import { ListItem } from 'material-ui';
import AcceptIcon from 'material-ui/svg-icons/action/check-circle';
import BlockIcon from 'material-ui/svg-icons/content/block';
import CancelIcon from 'material-ui/svg-icons/navigation/cancel';
import PriorityHighIcon from 'material-ui/svg-icons/notification/priority-high';
import numeral from 'numeral';

export default class AwardDetailItem extends Component {
  render() {
    const { awardName, awardStatus, offeredBalance, statusDescription } = this.props;
    let awardIcon = <PriorityHighIcon />;
    if (awardStatus === 'A') {
      awardIcon = <AcceptIcon />;
    }
    if (awardStatus === 'D') {
      awardIcon = <BlockIcon />;
    }
    if (awardStatus === 'C') {
      awardIcon = <CancelIcon />;
    }
    return (
      <ListItem
        key={`li-${awardName}`}
        primaryText={awardName}
        leftAvatar={awardIcon}
        primaryTogglesNestedList
        secondaryText={`${statusDescription} - ${numeral(offeredBalance).format('$0,0.00')}`}
      />
    );
  }
}

AwardDetailItem.propTypes = {
  awardName: PropTypes.string.isRequired,
  statusDescription: PropTypes.string.isRequired,
  awardStatus: PropTypes.string.isRequired,
  offeredBalance: PropTypes.any,
  acceptedBalance: PropTypes.any,
  disbursedBalance: PropTypes.any,
};

AwardDetailItem.defaultProps = {
  offeredBalance: 0,
  acceptedBalance: 0,
  disbursedBalance: 0,
};