'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _flexboxReact = require('flexbox-react');

var _flexboxReact2 = _interopRequireDefault(_flexboxReact);

require('../../styles/components/notification-item.css');

var _warningYellow = require('../../assets/warning-yellow.svg');

var _warningYellow2 = _interopRequireDefault(_warningYellow);

var _alertIcon = require('../../assets/alert-icon.svg');

var _alertIcon2 = _interopRequireDefault(_alertIcon);

var _icon_activity_notification = require('../../assets/icon_activity_notification.svg');

var _icon_activity_notification2 = _interopRequireDefault(_icon_activity_notification);

var _d3TimeFormat = require('d3-time-format');

var d3TimeFormat = _interopRequireWildcard(_d3TimeFormat);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var d3 = Object.assign({}, d3TimeFormat);

var parseDate = d3.timeParse('%m-%d-%Y %H:%M:%S');
var timeFormat = d3.timeFormat('%I');
var currentTime = '';
var sameTimeGroup = false;

var NotificationItem = function NotificationItem(props) {
  var notificationClass = 'octagon notification__item';
  var iconUrl = '';
  if (props.notification.state === 'critical') {
    iconUrl = _alertIcon2.default;
  } else if (props.notification.state === 'warning') {
    iconUrl = _warningYellow2.default;
  } else if (props.notification.state === 'viewall') {
    iconUrl = '';
  } else {
    iconUrl = _icon_activity_notification2.default;
  }
  if (iconUrl !== '') {
    iconUrl = _react2.default.createElement('img', { src: iconUrl, alt: 'icon' });
  } else {
    iconUrl = _react2.default.createElement('div', { style: { minWidth: 18 + 'px' } });
  }

  var notificationCount = props.notification.detail.length;
  if (!props.notification.detail.length) {
    notificationCount = null;
  }
  var notificationTimestamp = parseDate(props.notification.timestamp);
  var timeFormatted = timeFormat(notificationTimestamp);
  timeFormatted = timeFormatted.replace(/^0+/, '');
  if (currentTime === timeFormatted) {
    sameTimeGroup = true;
  } else {
    currentTime = timeFormatted;
    sameTimeGroup = false;
  }
  currentTime = timeFormatted;
  if (props.data.length === 1) {
    currentTime = '';
  }
  if (props.notification.id === props.currentTargetNotificationId) {
    notificationClass += ' currentTarget';
  }

  return _react2.default.createElement(
    'li',
    { className: ' ' + notificationClass, key: props.notification.id },
    _react2.default.createElement(
      _flexboxReact2.default,
      {
        alignItems: 'center',
        className: 'notification__selection notification__state-' + props.notification.state + '\n        same-timegroup-' + sameTimeGroup
      },
      _react2.default.createElement(
        _flexboxReact2.default,
        { flexDirection: 'row', flexGrow: 3 },
        sameTimeGroup ? _react2.default.createElement(_flexboxReact2.default, { className: 'no-timegroup', paddingRight: '30px' }) : _react2.default.createElement(
          _flexboxReact2.default,
          { flexDirection: 'row', className: 'notification__timegroup' },
          _react2.default.createElement(
            _flexboxReact2.default,
            {
              className: 'notification__time',
              alignItems: 'center',
              paddingLeft: '15px',
              paddingRight: '15px'
            },
            timeFormatted,
            'H'
          ),
          _react2.default.createElement(_flexboxReact2.default, {
            className: 'notification__connection__dot notification__connection__dot_' + props.notification.state,
            alignItems: 'center',
            marginRight: '15px'
          })
        ),
        _react2.default.createElement('span', { className: 'notification__vertical__line' }),
        _react2.default.createElement(
          _flexboxReact2.default,
          {
            className: 'notification__connection__state',
            alignItems: 'center'
          },
          iconUrl
        ),
        _react2.default.createElement(
          _flexboxReact2.default,
          { className: 'notification__detail', alignItems: 'center' },
          notificationCount,
          '\xA0',
          props.notification.name
        )
      ),
      _react2.default.createElement(
        _flexboxReact2.default,
        {
          flexDirection: 'column',
          height: '100%',
          alignItems: 'flex-end',
          justifyContent: 'center',
          className: 'icon-right icon-right-' + props.notification.state
        },
        _react2.default.createElement('i', { className: 'arrow_carrot-right' })
      )
    )
  );
};
NotificationItem.propTypes = {
  notification: _propTypes2.default.object,
  data: _propTypes2.default.array
};
exports.default = NotificationItem;
//# sourceMappingURL=NotificationItem.js.map