import React, { Component, PropTypes } from 'react';
import { Card, CardText, CardTitle, ListItem, Divider } from 'material-ui';
import BlockIcon from 'material-ui/svg-icons/content/block';
import CheckCircleIcon from 'material-ui/svg-icons/action/check-circle';
import LocalAtmIcon from 'material-ui/svg-icons/maps/local-atm';
import { red500, green500 } from 'material-ui/styles/colors';
import moment from 'moment';

export default class ServiceIndicator extends Component {

  constructor(props) {
    super(props);

    this.renderIcon = this.renderIcon.bind(this);
  }

  renderIcon() {
    const { data } = this.props;

    let icon = <BlockIcon />;

    if (data.amount !== '') {
      icon = <LocalAtmIcon />;
    }

    if (data.posSrvcIndicator === 'N') {
      if (data.amount !== '0') {
        return (<LocalAtmIcon color={red500} />);
      }

      return (<BlockIcon color={red500} />);
    }


    if (data.posSrvcIndicator === 'Y') {
      if (data.amount !== '0') {
        return (<LocalAtmIcon color={green500} />);
      }

      return (<CheckCircleIcon color={green500} />);
    }

    return icon;
  }

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

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