import { isEqual } from 'lodash-es';
import PropTypes from 'prop-types';
import React from 'react';
import { Panel } from 'react-bootstrap';
import {
  ANNOTATION,
  LATEST_EVENT_VERSION,
  ORIGINAL_EVENT_VERSION,
} from '../../constants/eventTypes';
import {
  getOriginalEvent,
  getPreviousVersionNumber,
} from '../../helpers/eventHelpers';
import EventFooter from './EventFooter';
import EventVersionPanel from './EventVersionPanel';

/**
 * React component which renders a public event. It is used only when the logbook context has become public
 */
class PublicEventPanel extends React.Component {
  render() {
    const { event } = this.props;
    if (!this.props.event) {
      return null;
    }

    return (
      <Panel
        bsStyle="primary"
        style={{ marginBottom: 0, height: '100%', position: 'relative' }}
      >
        <Panel.Heading>
          {' '}
          <b> Public log details </b>{' '}
        </Panel.Heading>
        <div
          style={{
            position: 'absolute',
            top: 41,
            bottom: 42,
            width: '100%',
            overflowY: 'scroll',
            overflowX: 'hidden',
          }}
        >
          <div style={{ padding: 10 }}>
            {/* try to show latest version of the event */}
            {getPreviousVersionNumber(event) === 0 && (
              <p
                style={{
                  fontStyle: 'italic',
                  color: '888888',
                  paddingBottom: 10,
                }}
              >
                This event has never been commented.
              </p>
            )}

            {/* Always show the latest version*/}
            <EventVersionPanel event={event} version={LATEST_EVENT_VERSION} />

            {/* Show the original version if it exists for all except annotations */}
            {!isEqual(event.type, ANNOTATION) &&
              getPreviousVersionNumber(event) !== 0 && (
                <EventVersionPanel
                  event={getOriginalEvent(event)}
                  version={ORIGINAL_EVENT_VERSION}
                />
              )}
          </div>
        </div>
        <div style={{ position: 'absolute', bottom: 0, width: '100%' }}>
          <EventFooter
            isSaveButtonEnabled={false}
            isSaveButtonVisible={false}
            onCancelButtonClicked={() => this.props.onCloseButtonClicked()}
            cancelButtonLabel="Close"
          />
        </div>
      </Panel>
    );
  }
}

PublicEventPanel.propTypes = {
  /* event to edit. Null when a new event is being created. */
  event: PropTypes.object,
  /* Function triggered when the user clicks on the close button */
  onCloseButtonClicked: PropTypes.func,
};

export default PublicEventPanel;
