'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 _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 _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.original,
    alt: item.originalAlt,
    srcSet: item.srcSet,
    sizes: item.sizes,
    title: item.originalTitle,
    '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 = {
  carouselDerivative: _propTypes2.default.string,
  thumbnailDerivative: _propTypes2.default.string,
  popupDerivative: _propTypes2.default.string,
  config: _propTypes2.default.object.isRequired,
  isSearchPending: _propTypes2.default.bool,
  listType: _propTypes2.default.string,
  ownBlobCsid: _propTypes2.default.string,
  searchResult: _propTypes2.default.instanceOf(_immutable2.default.Map)
};

const defaultProps = {
  carouselDerivative: _blobHelpers.DERIVATIVE_MEDIUM,
  thumbnailDerivative: _blobHelpers.DERIVATIVE_THUMBNAIL,
  popupDerivative: _blobHelpers.DERIVATIVE_ORIGINAL,
  listType: 'common'
};

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

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

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


    if (target.nodeName === 'IMG') {
      var _props = this.props;
      const config = _props.config,
            popupDerivative = _props.popupDerivative;


      const popupImagePath = (0, _blobHelpers.getDerivativePath)(target.dataset.csid, popupDerivative);

      window.open((0, _blobHelpers.getImageViewerPath)(config, popupImagePath), _blobHelpers.VIEWER_WINDOW_NAME);
    }
  }

  createGalleryImage(blobCsid) {
    var _props2 = this.props;
    const carouselDerivative = _props2.carouselDerivative,
          thumbnailDerivative = _props2.thumbnailDerivative;


    return {
      blobCsid,
      original: (0, _blobHelpers.getDerivativePath)(blobCsid, carouselDerivative),
      thumbnail: (0, _blobHelpers.getDerivativePath)(blobCsid, thumbnailDerivative)
    };
  }

  render() {
    var _props3 = this.props;
    const config = _props3.config,
          isSearchPending = _props3.isSearchPending,
          listType = _props3.listType,
          ownBlobCsid = _props3.ownBlobCsid,
          searchResult = _props3.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,
          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;