import React, { Component, PropTypes } from 'react';
import moment from 'moment';
import { Card, CardActions, CardText, CardTitle, RaisedButton } from 'material-ui';

export default class EventCard extends Component {
  constructor(props) {
    super(props);

    this.killClick = this.killClick.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.markRead = this.markRead.bind(this);
    this.markUnread = this.markUnread.bind(this);
  }

  killClick(evt) {
    evt.preventDefault();
    evt.stopPropagation();
  }

  handleClick(evt) {
    const status = this.props.readStatus === 'U' ? 'R' : 'U';
    this.props.changeReadStatus(status);
    evt.preventDefault();
    evt.stopPropagation();
  }

  markRead(isExpanded) {
    if (isExpanded === true) {
      this.props.changeReadStatus('R');
    }
  }

  markUnread() {
    this.props.changeReadStatus('U');
  }

  render() {
    let markReadButton = null;
    let titleStyle = { fontSize: '18px', fontWeight: '300' };

    const subtitle = moment(this.props.messageDate, 'MM-DD-YYYY, H:mm:ss:SSS').fromNow();

    if (this.props.readStatus === 'U') {
      titleStyle = { fontSize: '18px', fontWeight: '800' };
    }

    if (this.props.readStatus === 'R') {
      markReadButton = (
        <CardActions expandable>
          <RaisedButton
            fullWidth
            backgroundColor={'#e00122'}
            labelColor={'#ffffff'}
            label="Mark Unread"
            onClick={this.markUnread}
            style={{ align: 'right' }}
          />
        </CardActions>
      );
    }
    return (
      <Card initiallyExpanded={false} onClick={this.killClick} onExpandChange={this.markRead}>
        <CardTitle
          titleStyle={titleStyle}
          className="notifCard-title"
          title={this.props.title}
          subtitle={subtitle}
          showExpandableButton
        />
        <CardText expandable>
          <div dangerouslySetInnerHTML={{ __html: this.props.message }} />
        </CardText>
        {markReadButton}
      </Card>
    );
  }
}

EventCard.propTypes = {
  title: PropTypes.string,
  message: PropTypes.string.isRequired,
  changeReadStatus: PropTypes.func.isRequired,
  messageDate: PropTypes.string.isRequired,
  readStatus: PropTypes.string.isRequired,
  serviceIndicatorType: PropTypes.string,
  goto: PropTypes.string,
};