/** @jsx React.DOM */
/* global conjur, React */

(function(conjur, React) {
    'use strict';

    this.AnnotationsBox = React.createClass({
        render: function() {
            if (!this.props.annotations || this.props.annotations.length === 0) {
                return (
                  <div>
                    <span>None</span>
                  </div>
                );
            }

            // TODO: sort by date (optionally)
            // TODO: table view
            var annotationsList = [];

            this.props.annotations.sort(function(a, b) {
                return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
            }).forEach(function(item) {
                var itemName = item.name,
                    itemValue = item.value,
                    term = 'annotation_' + itemName + '_key',
                    description = 'annotation_' + itemName + '_value';

                annotationsList.push(<dt key={term}>{itemName}</dt>);
                annotationsList.push(<dd key={description}>{itemValue}</dd>);
            });

            return (
              <div>
                <dl className="annotations">
                  {annotationsList}
                </dl>
              </div>
            );
        }
    });

}).bind(conjur.views)
(
    conjur,
    React
);