content: /**
   * Rutilus
   *
   * @homepage https://gmrutilus.github.io
   * @license Apache-2.0
   */
  
  import React from 'react';
  import { Glyphicon, Panel } from 'react-bootstrap';
  
  /**
   * @param {{
   *   versions: {
   *      analytics: {
   *          current: String,
   *          latest: String,
   *      },
   *      logger: {
   *          current: String,
   *          latest: String,
   *      },
   *      observer: {
   *          current: String,
   *          latest: String,
   *      },
   *      latestVisit: String|Number,
   *      latestAffinity: String|Number,
   *   }
   * }} stats
   * @return {XML}
   */
  const StatsBox = ({ stats }) => {
  
      const { versions } = stats;
  
      const analyticsVersion = getVersionComponent(
          versions.analytics.current,
          versions.analytics.latest,
      );
      const loggerVersion = getVersionComponent(
          versions.logger.current,
          versions.logger.latest,
      );
      const observerVersion = getVersionComponent(
          versions.observer.current,
          versions.observer.latest,
      );
      const latestVisit    = getDateComponent(stats.latestVisit);
      const latestAffinity = getDateComponent(stats.latestAffinity);
  
      return (
          <div className="stats-box">
              <Panel header={<span><Glyphicon glyph="stats" /> Statistics</span>}>
                  {makeRow('Analytics version', analyticsVersion)}
                  {makeRow('Logger version', loggerVersion)}
                  {makeRow('Observer version', observerVersion)}
                  {makeRow('Latest visit recorded', latestVisit)}
                  {makeRow('Latest affinity calculated', latestAffinity)}
              </Panel>
          </div>
      );
  
  
      /**
       * Makes a row for the stats
       * @param label
       * @param content
       * @returns {XML}
       */
      function makeRow(label, content) {
          return (
              <div style={{ marginBottom: '20px' }}>
                  <div><b>{label}</b></div>
                  <div style={{ marginLeft: '30px' }}>{content}</div>
              </div>
          );
      }
  
  
      /**
       * Builds a Version component
       * @return {XML}
       */
      function getVersionComponent(current, latest) {
          if (current === latest) {
              return (
                  <span className="text-success">
                      {current} <Glyphicon glyph="ok" />
                  </span>
              );
          }
          else {
              return (
                  <span>
                      {current} ({latest}) <Glyphicon glyph="remove" />
                  </span>
              );
          }
      }
  
  
      /**
       * Builds a date component
       * @param {String|Number} date
       */
      function getDateComponent(date) {
          let parsedDate = +date;
          if (isNaN(parsedDate)) {
              return (
                  <span className="text-danger">?</span>
              );
          }
          else {
              parsedDate = new Date(parsedDate);
              parsedDate = parsedDate.toLocaleString();
  
              return (
                  <span>{parsedDate}</span>
              );
          }
      }
  
  };
  
  export default StatsBox;