'use strict';

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

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Grid = require('react-virtualized/dist/commonjs/Grid/Grid');

var _Grid2 = _interopRequireDefault(_Grid);

var _AutoSizer = require('react-virtualized/dist/commonjs/AutoSizer');

var _AutoSizer2 = _interopRequireDefault(_AutoSizer);

var _getScrollbarWidth = require('get-scrollbar-width');

var _getScrollbarWidth2 = _interopRequireDefault(_getScrollbarWidth);

var _objectAssign = require('object-assign');

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _reactRedux = require('react-redux');

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

require('insert-css')('.ReactVirtualized__Table__headerRow{font-weight:700;text-transform:uppercase;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.ReactVirtualized__Table__row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.ReactVirtualized__Table__headerTruncatedText{display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.ReactVirtualized__Table__headerColumn,.ReactVirtualized__Table__rowColumn{margin-right:10px;min-width:0px;}.ReactVirtualized__Table__rowColumn{text-overflow:ellipsis;white-space:nowrap;}.ReactVirtualized__Table__headerColumn:first-of-type,.ReactVirtualized__Table__rowColumn:first-of-type{margin-left:10px;}.ReactVirtualized__Table__sortableHeaderColumn{cursor:pointer;}.ReactVirtualized__Table__sortableHeaderIconContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.ReactVirtualized__Table__sortableHeaderIcon{-webkit-box-flex:0;-ms-flex:0 0 24px;flex:0 0 24px;height:1em;width:1em;fill:currentColor;}');

var pixelRatio = window.devicePixelRatio || 1;

var styles = {
  image: {
    border: '1px solid white',
    boxSizing: 'border-box',
    display: 'block',
    height: '100%',
    objectFit: 'cover',
    width: '100%',
    cursor: 'pointer',
    backgroundColor: 'rgb(240, 240, 240)'
  }
};
var grid = null;

var ImageGrid = function (_React$Component) {
  (0, _inherits3.default)(ImageGrid, _React$Component);

  function ImageGrid() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, ImageGrid);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ImageGrid.__proto__ || (0, _getPrototypeOf2.default)(ImageGrid)).call.apply(_ref, [this].concat(args))), _this), _this._renderCell = function (width, _ref2) {
      var columnIndex = _ref2.columnIndex,
          rowIndex = _ref2.rowIndex,
          key = _ref2.key,
          style = _ref2.style;
      var _this$props = _this.props,
          images = _this$props.images,
          thumbSize = _this$props.thumbSize,
          resizer = _this$props.resizer;

      var columnsCount = Math.floor(width / thumbSize);
      var image = images[rowIndex * columnsCount + columnIndex];
      if (!image) return;
      var imgSize = thumbSize * pixelRatio;
      var imageUrl = resizer(image.url, imgSize);
      return _react2.default.createElement('img', {
        src: imageUrl,
        key: key,
        style: (0, _objectAssign2.default)({}, styles.image, style),
        onClick: function onClick() {
          return _this.handleImageClick(image.featureId);
        }
      });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(ImageGrid, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      this.scrollbarWidth = (0, _getScrollbarWidth2.default)();
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.images !== nextProps.images) {
        grid && grid.recomputeGridSize();
      }
    }
  }, {
    key: 'handleImageClick',
    value: function handleImageClick(featureId) {
      this.props.onImageClick(featureId);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          images = _props.images,
          thumbSize = _props.thumbSize;


      return _react2.default.createElement(
        'div',
        { style: { width: '100%', height: '100%', position: 'absolute' } },
        _react2.default.createElement(
          _AutoSizer2.default,
          null,
          function (_ref3) {
            var height = _ref3.height,
                width = _ref3.width;

            var columnsCount = Math.floor(width / thumbSize);
            var rowsCount = Math.ceil(images.length / columnsCount);
            var cellSize = width / columnsCount;
            var overflow = cellSize * rowsCount > height;
            if (overflow && _this2.scrollbarWidth) {
              cellSize = (width - _this2.scrollbarWidth) / columnsCount;
            }
            return _react2.default.createElement(_Grid2.default, {
              ref: function ref(inst) {
                grid = inst;
              },
              columnCount: columnsCount,
              columnWidth: cellSize,
              height: height,
              cellRenderer: function cellRenderer(d) {
                return _this2._renderCell(width, d);
              },
              rowCount: rowsCount,
              rowHeight: cellSize,
              width: width
            });
          }
        )
      );
    }
  }]);
  return ImageGrid;
}(_react2.default.Component);

ImageGrid.propTypes = {
  images: _propTypes2.default.array.isRequired,
  thumbSize: _propTypes2.default.number.isRequired,
  onImageClick: _propTypes2.default.func
};
ImageGrid.defaultProps = {
  thumbSize: 200
};
exports.default = (0, _reactRedux.connect)(function (state) {
  return { resizer: state.resizer };
})(ImageGrid);
//# sourceMappingURL=ImageGrid.js.map