'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _immutable = require('immutable');

var _immutable2 = _interopRequireDefault(_immutable);

var _get = require('lodash/get');

var _get2 = _interopRequireDefault(_get);

var _reactImageGallery = require('react-image-gallery');

var _reactImageGallery2 = _interopRequireDefault(_reactImageGallery);

var _cspaceInput = require('cspace-input');

var _ImageContainer = require('../../containers/media/ImageContainer');

var _ImageContainer2 = _interopRequireDefault(_ImageContainer);

var _contentHelpers = require('../../helpers/contentHelpers');

var _blobHelpers = require('../../helpers/blobHelpers');

var _MediaViewer = require('../../../styles/cspace-ui/MediaViewer.css');

var _MediaViewer2 = _interopRequireDefault(_MediaViewer);

require('!style-loader!css-loader!react-image-gallery/styles/css/image-gallery-no-icon.css');

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

/* eslint-enable import/imports-first, import/no-unresolved */

const MiniButton = _cspaceInput.baseComponents.MiniButton;

/* eslint-disable import/imports-first, import/no-unresolved */
/* global window */

const renderItem = item => _react2.default.createElement(
  'div',
  { className: 'image-gallery-image' },
  _react2.default.createElement(_ImageContainer2.default, {
    src: item.snapshot,
    alt: item.snapshotAlt,
    srcSet: item.srcSet,
    sizes: item.sizes,
    title: item.snapshotTitle,
    'data-csid': item.blobCsid
  })
);

const renderThumbInner = item => _react2.default.createElement(
  'div',
  null,
  _react2.default.createElement(_ImageContainer2.default, {
    src: item.thumbnail,
    alt: item.thumbnailAlt,
    title: item.thumbnailTitle
  }),
  _react2.default.createElement(
    'div',
    { className: 'image-gallery-thumbnail-label' },
    item.thumbnailLabel
  )
);

const renderLeftNav = (onClick, disabled) => _react2.default.createElement(
  MiniButton,
  { name: 'mediaViewerPrev', disabled: disabled, onClick: onClick },
  '<'
);

const renderRightNav = (onClick, disabled) => _react2.default.createElement(
  MiniButton,
  { name: 'mediaViewerNext', disabled: disabled, onClick: onClick },
  '>'
);

const propTypes = {
  config: _propTypes2.default.object.isRequired,
  isSearchPending: _propTypes2.default.bool,
  listType: _propTypes2.default.string,
  ownBlobCsid: _propTypes2.default.string,
  searchResult: _propTypes2.default.instanceOf(_immutable2.default.Map),
  readRecord: _propTypes2.default.func
};

const defaultProps = {
  listType: 'common',
  readRecord: () => Promise.resolve()
};

class MediaViewer extends _react.Component {
  constructor() {
    super();

    this.handleImageGalleryClick = this.handleImageGalleryClick.bind(this);
  }

  getPopupImagePath(blobCsid) {
    var _props = this.props;
    const config = _props.config,
          readRecord = _props.readRecord;


    const recordTypeConfig = (0, _get2.default)(config, ['recordTypes', 'blob']);
    const popupSubresource = (0, _get2.default)(recordTypeConfig, ['content', 'popup', 'subresource']);

    return readRecord(config, recordTypeConfig, undefined, blobCsid).then(blobData => (0, _contentHelpers.getContentPath)(config, 'blob', undefined, blobCsid, popupSubresource, blobData));
  }

  handleImageGalleryClick(event) {
    const target = event.target;


    if (target.nodeName === 'IMG') {
      this.getPopupImagePath(target.dataset.csid).then(popupImagePath => {
        window.open((0, _blobHelpers.getImageViewerPath)(this.props.config, popupImagePath), _blobHelpers.VIEWER_WINDOW_NAME);
      });
    }
  }

  createGalleryImage(blobCsid) {
    const config = this.props.config;


    const content = (0, _get2.default)(config, ['recordTypes', 'blob', 'content']);
    const snapshotSubresource = (0, _get2.default)(content, ['snapshot', 'subresource']);
    const thumbnailSubresource = (0, _get2.default)(content, ['thumbnail', 'subresource']);

    return {
      blobCsid,
      snapshot: (0, _contentHelpers.getContentPath)(config, 'blob', undefined, blobCsid, snapshotSubresource),
      thumbnail: (0, _contentHelpers.getContentPath)(config, 'blob', undefined, blobCsid, thumbnailSubresource)
    };
  }

  render() {
    var _props2 = this.props;
    const config = _props2.config,
          isSearchPending = _props2.isSearchPending,
          listType = _props2.listType,
          ownBlobCsid = _props2.ownBlobCsid,
          searchResult = _props2.searchResult;


    const images = [];

    if (ownBlobCsid) {
      images.push(this.createGalleryImage(ownBlobCsid));
    }

    if (searchResult) {
      const listTypeConfig = config.listTypes[listType];

      const listNodeName = listTypeConfig.listNodeName,
            itemNodeName = listTypeConfig.itemNodeName;


      const list = searchResult.get(listNodeName);
      const totalItems = parseInt(list.get('totalItems'), 10);

      if (!isNaN(totalItems)) {
        let items = list.get(itemNodeName);

        if (items) {
          if (!_immutable2.default.List.isList(items)) {
            items = _immutable2.default.List.of(items);
          }

          items.forEach(item => {
            const blobCsid = item.get('blobCsid');

            if (blobCsid) {
              images.push(this.createGalleryImage(blobCsid));
            }
          });
        }
      }
    }

    if (images.length > 0) {
      return _react2.default.createElement(
        'div',
        { className: _MediaViewer2.default.normal },
        _react2.default.createElement(_reactImageGallery2.default, {
          items: images,
          disableArrowKeys: true,
          lazyLoad: true,
          renderLeftNav: renderLeftNav,
          renderRightNav: renderRightNav,
          showThumbnails: images.length > 1,
          showFullscreenButton: false,
          showPlayButton: false,
          onClick: this.handleImageGalleryClick,
          renderItem: renderItem,
          renderThumbInner: renderThumbInner
        })
      );
    }

    if (isSearchPending) {
      return null;
    }

    return _react2.default.createElement('div', { className: _MediaViewer2.default.empty });
  }
}

exports.default = MediaViewer;
MediaViewer.propTypes = propTypes;
MediaViewer.defaultProps = defaultProps;