/* eslint-disable */
import React, { Component, PropTypes } from 'react';
import moment from 'moment';
import { AppBar, IconMenu, Card, CardHeader, FontIcon, IconButton, CardText, CardTitle, List, ListItem, ListDivider, Toolbar, ToolbarGroup, DropDownMenu, Paper } from 'material-ui';

const { object } = PropTypes;

export default class ServiceIndicator extends Component {
	render() {
    const { data } = this.props;

    let iconName = 'block';

    if (data.amount !== ''){
      iconName = 'local_atm'
    }

    let icon = null;

    if (data.posSrvcIndicator === 'N'){
      let iconName = 'block';

      if (data.amount !== '0'){
        iconName = 'local_atm'
      }

      icon = (<FontIcon className="material-icons icons-red">{iconName}</FontIcon>);
    }

    if (data.posSrvcIndicator === 'Y'){
      let iconName = 'check_circle';

      if (data.amount !== '0'){
        iconName = 'local_atm'
      }

      icon = (<FontIcon className="material-icons icons-green">{iconName}</FontIcon>);
    }

		return (
      <div>
	  	  <ListItem
	  	    primaryText={data.srvcIndCdDescr}
	  	    secondaryText={data.srvcIndReasonDescr}
	        disableTouchRipple={true}
	  	    leftIcon={icon}
	  	    initiallyOpen={false}
	  	    nestedItems={[
	  	      <Card style={{backgroundColor:'#EEEEEE'}}>
							<CardText>
								<Card>
		            <CardTitle style={{backgroundColor:'#e0e0e0'}} className="ih-holds-cardHeader" title={data.srvcIndCdDescr} subtitle={data.srvcIndReasonDescr}/>
		              <CardText style={{fontSize:'14px'}}>
		                <table>
		                  <tr>
		                    <td style={{color: 'rgba(0, 0, 0, 0.54)'}}>Amount:</td>
		                    <td>{data.amount ? '$' + data.amount : ''}</td>
		                  </tr>
		                  <tr>
		                    <td style={{color: 'rgba(0, 0, 0, 0.54)'}}>Start Term:</td>
		                    <td>{data.srvcIndActTermDescr}</td>
		                  </tr>
		                  <tr>
		                    <td style={{color: 'rgba(0, 0, 0, 0.54)'}}>End Term:</td>
		                    <td>{data.srvcIndEndTermDescr}</td>
		                  </tr>
		                  <tr>
		                    <td style={{color: 'rgba(0, 0, 0, 0.54)'}}>Start Date:</td>
		                    <td>{data.srvcIndActiveDt ? moment(data.srvcIndActiveDt).format('MM/DD/YYYY') : ' '}</td>
		                  </tr>
		                  <tr>
		                    <td style={{color: 'rgba(0, 0, 0, 0.54)'}}>End Date:</td>
		                    <td>{data.sccSiEndDt ? moment(data.sccSiEndDt).format('MM/DD/YYYY') : ' '}</td>
		                  </tr>
		                  <tr>
		                    <td style={{color: 'rgba(0, 0, 0, 0.54)'}}>Contact:</td>
		                    <td>{data.contact}</td>
		                  </tr>
		                  <tr>
		                    <td style={{color: 'rgba(0, 0, 0, 0.54)'}}>Department:</td>
		                    <td>{data.deptidDescr}</td>
		                  </tr>
		                </table>
		              </CardText>
		            <ListDivider/>
		            <CardTitle subtitle="Instructions">
		              <CardText>
		                <div className="hold-contentArea">
                      {data.instructions}
		                </div>
		              </CardText>
		            </CardTitle>
		  	      </Card>,
						</CardText>
					</Card>
	  	    ]}
	        className="ih-hold-item"
	  	  />
      </div>
		);
	}
}

ServiceIndicator.propTypes = {
	data: object.isRequired,
};