import moment from 'moment';
import React from 'react';
import { Button, Col, Popover, Row, Well } from 'react-bootstrap';
import Popup from 'reactjs-popup';
import {
  LATEST_EVENT_VERSION,
  MIDDLE_EVENT_VERSION,
  ORIGINAL_EVENT_VERSION,
} from '../../constants/eventTypes';
import { getPreviousVersionNumber } from '../../helpers/eventHelpers';
import EventVersionPanel from './EventVersionPanel';

/**
 * Render the popup which displays all event versions of the event
 * @param {*} event the event under investigation
 */
export default function EventVersions(event) {
  let e = event;

  /* build the different lines representing the previous versions */
  const lines = [];
  while (e.previousVersionEvent != null) {
    if (lines.length === 0) {
      lines.push(<EventVersionItem event={e} type="edition" mostRecent />);
    } else {
      lines.push(
        <EventVersionItem event={e} type="edition" mostRecent={false} />
      );
    }
    e = e.previousVersionEvent;
  }
  lines.push(<EventVersionItem event={e} type="creation" />);

  /* build the popover */
  return (
    <Popover id="mypopover">
      <div>
        <p style={{ marginBottom: 5 }}>
          {' '}
          This log has {getPreviousVersionNumber(event) + 1} versions.{' '}
        </p>
        <hr style={{ marginTop: 5 }} />
        {lines.map((item, index) => (
          <Popup
            key={index}
            trigger={<div> {item} </div>}
            modal
            closeOnDocumentClick={false}
            contentStyle={{ width: '90%', height: '90%' }}
          >
            {(close) => (
              <div className="fullPage">
                <button type="button" className="close" onClick={close}>
                  &times;
                </button>
                <div className="content">
                  <EventVersionPanel
                    event={item.props.event}
                    version={
                      index === 0
                        ? LATEST_EVENT_VERSION
                        : index === lines.length - 1
                        ? ORIGINAL_EVENT_VERSION
                        : MIDDLE_EVENT_VERSION
                    }
                  />
                </div>
              </div>
            )}
          </Popup>
        ))}
        <hr style={{ marginBottom: 5 }} />

        <Popup
          trigger={
            <div style={{ display: 'inline' }}>
              {' '}
              <Button bsStyle="link"> See all versions </Button>{' '}
            </div>
          }
          modal
          closeOnDocumentClick={false}
          contentStyle={{ width: '90%', height: '90%' }}
        >
          {(close) => (
            <div className="fullPage">
              <button type="button" className="close" onClick={close}>
                &times;
              </button>
              <div className="content">
                <CompleteEventHistory event={event} />
              </div>
            </div>
          )}
        </Popup>
      </div>
    </Popover>
  );
}

/**
 * React component which represents on item of the event history
 * @param {*} props  the props passed to this component
 */
class EventVersionItem extends React.Component {
  render() {
    function buildTheDisplay(event, type, mostRecent) {
      return (
        <Well bsSize="small" style={{ marginBottom: 5, cursor: 'pointer' }}>
          <b> {event.username} </b>
          {type === 'creation' ? 'created on ' : ''}
          {type === 'edition' ? 'edited on ' : ''}
          {moment(event.creationDate).format('MMMM DD HH:mm')}
          {mostRecent ? ' (most recent)' : ''}
          {event.machine ? (
            <span style={{ color: '#777', fontStyle: 'italic' }}>
              {' '}
              from {event.machine}{' '}
            </span>
          ) : (
            ''
          )}
        </Well>
      );
    }

    return buildTheDisplay(
      this.props.event,
      this.props.type,
      this.props.mostRecent
    );
  }
}

/**
 * React component which displays the complete event history
 */
const CompleteEventHistory = (props) => {
  let { event } = props;
  const eventVersions = [];
  /* first push the current event which is the latest version of the event */
  eventVersions.push(
    <EventVersionPanel event={event} version={LATEST_EVENT_VERSION} />
  );
  /* then display the previous version of this event */
  while (event.previousVersionEvent != null) {
    event = event.previousVersionEvent;
    eventVersions.push(
      <div className="margin-bottom-10">
        <Row>
          <Col xs={1}> </Col>
          <Col xs={11}>
            <EventVersionPanel
              event={event}
              version={
                event.previousVersionEvent === null
                  ? ORIGINAL_EVENT_VERSION
                  : MIDDLE_EVENT_VERSION
              }
            />
          </Col>
        </Row>
      </div>
    );
  }

  return eventVersions;
};
