import PropTypes from 'prop-types';
import React from 'react';
import { Col, Grid, Panel, Row } from 'react-bootstrap';
import {
  EVENT_CATEGORY_COMMANDLINE,
  LATEST_EVENT_VERSION,
  MIDDLE_EVENT_VERSION,
  ORIGINAL_EVENT_VERSION,
} from '../../constants/eventTypes';
import {
  getContent,
  getContentAsHTML,
  getEventHistoryCreationDate,
} from '../../helpers/eventHelpers';
import TagListInLine from './Tag/TagListInLine';

/*
 * React component which renders a panel showing the provided event details using version context provided by the version property.
 */
class EventVersionPanel extends React.Component {
  constructor(props) {
    super(props);

    this.getEventHeaderTextByVersion = this.getEventHeaderTextByVersion.bind(
      this
    );
    this.getEventFooterTextByVersion = this.getEventFooterTextByVersion.bind(
      this
    );
  }

  render() {
    const { event, version } = this.props;

    return (
      <div className="margin-bottom-10">
        <Panel>
          <Panel.Heading>
            {' '}
            <b> {this.getEventHeaderTextByVersion(event, version)} </b>{' '}
          </Panel.Heading>
          <Panel.Body>
            <Row>
              <Col xs={12}>
                <EventText event={event} />
              </Col>
            </Row>
          </Panel.Body>
          <Panel.Footer>
            <Grid fluid>
              <Row>
                <Col xs={12} md={6}>
                  <span
                    className="padding-left-5"
                    style={{ fontStyle: 'italic' }}
                  >
                    {this.getEventFooterTextByVersion(event, version)}
                  </span>
                </Col>
                <Col xs={12} md={6}>
                  <TagListInLine tags={event.tag} />
                </Col>
              </Row>
            </Grid>
          </Panel.Footer>
        </Panel>
      </div>
    );
  }

  getEventHeaderTextByVersion(event, version) {
    if (event && version) {
      if (version === ORIGINAL_EVENT_VERSION) {
        return `On ${getEventHistoryCreationDate(
          event
        )}, the original message was: `;
      }
      if (version === LATEST_EVENT_VERSION) {
        return `Written on ${getEventHistoryCreationDate(
          event
        )}, the latest version of the comment is:`;
      }
      if (version === MIDDLE_EVENT_VERSION) {
        return `Written on ${getEventHistoryCreationDate(
          event
        )}, the comment was:`;
      }
    } else return '';
  }

  getEventFooterTextByVersion(event, version) {
    if (event && version) {
      if (version === ORIGINAL_EVENT_VERSION) {
        return `Created by ${event.username}`;
      }
      if (version === LATEST_EVENT_VERSION || MIDDLE_EVENT_VERSION) {
        return `Commented by ${event.username}`;
      }
    } else {
      return '';
    }
  }
}

EventVersionPanel.propTypes = {
  /** the event */
  event: PropTypes.object,
  /** event version */
  version: PropTypes.string,
};

export default EventVersionPanel;

class EventText extends React.Component {
  render() {
    const { event } = this.props;

    if (event) {
      if (event.category.toLowerCase() === EVENT_CATEGORY_COMMANDLINE) {
        const plainTextText = getContent(event.content, 'plainText');
        const htmlText = getContent(event.content, 'html');

        if (plainTextText && !htmlText) {
          return (
            <pre>
              <div dangerouslySetInnerHTML={{ __html: plainTextText }} />
            </pre>
          );
        }
      }

      const htmlText = getContentAsHTML(event.content);
      if (htmlText) {
        return <div dangerouslySetInnerHTML={{ __html: htmlText }} />;
      }
      return null;
    }
  }
}

EventText.propTypes = {
  /** Logbook event */
  event: PropTypes.object,
};
