'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 _palette = require('../../../palette');

var _palette2 = _interopRequireDefault(_palette);

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

var timeFormat = _interopRequireWildcard(_d3TimeFormat);

var _icon_eh_warning = require('../../../assets/icon_eh_warning.svg');

var _icon_eh_warning2 = _interopRequireDefault(_icon_eh_warning);

var _icon_eh_error = require('../../../assets/icon_eh_error.svg');

var _icon_eh_error2 = _interopRequireDefault(_icon_eh_error);

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({}, timeFormat);

var array = _propTypes2.default.array,
    func = _propTypes2.default.func,
    number = _propTypes2.default.number,
    string = _propTypes2.default.string;


var Rect = function Rect(props) {
  var borderRadius = props.borderRadius,
      data = props.data,
      fill = props.fill,
      innerHeight = props.innerHeight,
      xScale = props.xScale,
      yScale = props.yScale;


  var rects = data.map(function (d, i) {
    var xDataKey = d.x;
    var xDateLabel = '';
    var iconUri = '';
    var fillColor = fill;
    if (props.xDataType === 'date') {
      xDataKey = d3.timeFormat('%m/%d/%Y (%H:%M)')(d.x);
      xDateLabel = d3.timeFormat('%m/%d')(d.x);
    }
    if (d.currentState === 'warning') {
      fillColor = _palette2.default.yellow;
      iconUri = _icon_eh_warning2.default;
    } else if (d.currentState === 'critical') {
      fillColor = _palette2.default.red;
      iconUri = _icon_eh_error2.default;
    }

    var filledInRectangleHeight = innerHeight - yScale(d.y);
    var iconY = innerHeight / 1.5;
    if (yScale(d.y) > 83) {
      iconY = yScale(d.y) - 8 - 25;
    }

    return _react2.default.createElement(
      'g',
      { key: i + '-g' },
      _react2.default.createElement('rect', {
        x: xScale(d.x),
        y: yScale(d.y),
        width: xScale.bandwidth(),
        height: filledInRectangleHeight,
        className: 'shadow',
        fill: fillColor,
        'data-tooltip-pos': filledInRectangleHeight,
        key: i,
        rx: borderRadius,
        ry: borderRadius,
        'data-key': xDataKey,
        'data-value': d.y
      }),
      _react2.default.createElement('rect', {
        x: xScale(d.x),
        y: 0,
        width: xScale.bandwidth(),
        height: innerHeight,
        fill: fillColor,
        fillOpacity: 0,
        'data-tooltip-pos': filledInRectangleHeight,
        key: i + '-container',
        rx: borderRadius,
        ry: borderRadius,
        'data-key': xDataKey,
        'data-value': d.y,
        'data-tooltip-x': xScale(d.x) + 5,
        'data-tooltip-y': innerHeight,
        onMouseEnter: props.showToolTip,
        onMouseOut: props.hideToolTip
      }),
      props.showIcon ? _react2.default.createElement('image', {
        xmlns: 'http://www.w3.org/2000/svg',
        x: xScale(d.x),
        y: iconY,
        width: xScale.bandwidth(),
        height: '50px',
        xlinkHref: iconUri,
        key: i + '-i',
        className: 'svgicon',
        pointerEvents: 'none'
      }) : '',
      props.showXLabel ? _react2.default.createElement(
        'text',
        {
          fontSize: props.XLabelFontSize,
          x: xScale(d.x) + xScale.bandwidth() / 2,
          key: i + '-t',
          width: xScale.bandwidth(),
          y: innerHeight + 13,
          fill: _palette2.default.grey,
          textAnchor: 'middle'
        },
        xDateLabel
      ) : ''
    );
  });

  return _react2.default.createElement(
    'g',
    null,
    rects
  );
};

Rect.propTypes = {
  borderRadius: number,
  data: array.isRequired,
  fill: string,
  innerHeight: number.isRequired,
  hideToolTip: func.isRequired,
  showToolTip: func.isRequired,
  xDataType: string.isRequired,
  xScale: func.isRequired,
  yScale: func.isRequired,
  showXLabel: _propTypes2.default.bool,
  showIcon: _propTypes2.default.bool,
  XLabelFontSize: string
};

Rect.defaultProps = {
  borderRadius: 3,
  fill: _palette2.default.blue,
  showXLabel: false,
  showIcon: false,
  XLabelFontSize: '16'
};

exports.default = Rect;
//# sourceMappingURL=Rect.js.map