import React, { Component, PropTypes } from 'react';
import { Card, CardText, ListItem, RaisedButton } from 'material-ui';
import DoneIcon from 'material-ui/svg-icons/action/done';
import CheckBoxIcon from 'material-ui/svg-icons/action/report-problem';
import moment from 'moment';

const { string } = PropTypes;

export default class ChecklistItem extends Component { // Could be a stateless function instead

  render() {
    // let itemKey = 0;
    let icon = <CheckBoxIcon />;
    let url = null;
    let dueDate = null;
    let dueDateSubtitle = ' ';

    let statusJsx = null;
    let contactJsx = null;
    let dueDateJsx = null;

    if (this.props.itemStatusDescription !== 'Initiated') {
      icon = <DoneIcon />;
    }

    if (this.props.url) {
      icon = <CheckBoxIcon />;
      url = (
        <div style={{ padding: 20, textAlign: 'center' }}>
          <RaisedButton
            backgroundColor="#e00122"
            label="Review & Complete"
            primary
            href={this.props.url}
          />
        </div>
      );
    }

    if (this.props.dueDt) {
      dueDate = moment(this.props.dueDt).format('MM/DD/YYYY');
      dueDateSubtitle = `Due by ${moment(this.props.dueDt).format('MM/DD')}`;
    }

    if (this.props.itemStatusDescription) {
      statusJsx = (<div>
        <span className="ih-checklist-cardTxt">Status:</span>{this.props.itemStatusDescription}<br />
      </div>);
    }

    if (this.props.responsibleName) {
      contactJsx = (<div>
        <span className="ih-checklist-cardTxt">Contact:</span>{this.props.responsibleName}<br />
      </div>);
    }

    if (dueDate) {
      dueDateJsx = (<div>
        <span className="ih-checklist-cardTxt">Due:</span>{dueDate}<br />
      </div>);
    }

    return (
      <ListItem
        primaryText={this.props.title}
        secondaryText={dueDateSubtitle}
        leftAvatar={icon}
        disableTouchRipple
        primaryTogglesNestedList
        nestedItems={[
          <ListItem
            key={'ap'}
            value={2}
          >
            <Card key="ChecklistItems" style={{ backgroundColor: '#EEEEEE' }}>
              <CardText>
                <Card style={{ backgroundColor: 'white' }} initiallyExpanded={false}>
                  <CardText >
                    {statusJsx}
                    {contactJsx}
                    {dueDateJsx}
                    <br />
                    <div
                      className="content"
                      dangerouslySetInnerHTML={{
                        __html: this.props.information,
                      }}
                    />
                    {url}
                  </CardText>
                </Card>
              </CardText>
            </Card>
          </ListItem>,
        ]}
      />
    );
  }
}

ChecklistItem.propTypes = {
  title: string.isRequired,
  dueDt: string.isRequired,
  itemStatusDescription: string,
  responsibleName: string,
  information: string,
  url: string,
};