'use strict';

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

var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var Backdrop = require('@prom-ui/core/Backdrop');
var KeyPress = require('@prom-ui/core/KeyPress');
var Portal = require('@prom-ui/core/Portal');
var ScrollControls = require('@prom-ui/core/ScrollControls');
var Icon = require('@prom-ui/core/Icon');
var Play = require('@prom-ui/icons/Play');
var Button = require('@prom-ui/core/Button');
var useBodyTTag = require('@prom-ui/core/useBodyTTag');
var Close2 = require('@prom-ui/icons/Close2');

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

function _iterableToArrayLimit(arr, i) {
  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
  if (null != _i) {
    var _s,
      _e,
      _x,
      _r,
      _arr = [],
      _n = !0,
      _d = !1;
    try {
      if (_x = (_i = _i.call(arr)).next, 0 === i) {
        if (Object(_i) !== _i) return;
        _n = !1;
      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
    } catch (err) {
      _d = !0, _e = err;
    } finally {
      try {
        if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
      } finally {
        if (_d) throw _e;
      }
    }
    return _arr;
  }
}
function _taggedTemplateLiteral(strings, raw) {
  if (!raw) {
    raw = strings.slice(0);
  }
  return Object.freeze(Object.defineProperties(strings, {
    raw: {
      value: Object.freeze(raw)
    }
  }));
}
function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}
function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;
  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
  return arr2;
}
function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

var reqMap = new Map();
var scrollInToViewElement = function scrollInToViewElement(target, parent) {
  var isAnimate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
  if (reqMap.has(parent)) {
    cancelAnimationFrame(reqMap.get(parent));
    reqMap["delete"](parent);
  }
  var reqId = requestAnimationFrame(function () {
    var parentRect = parent.getBoundingClientRect();
    var targetRect = target.getBoundingClientRect();
    var scrollTop = targetRect.top + parent.scrollTop - parentRect.top - parentRect.height / 2 + targetRect.height / 2;
    var scrollLeft = targetRect.left + parent.scrollLeft - parentRect.left - parentRect.width / 2 + targetRect.width / 2;
    if (scrollLeft < 0) {
      scrollLeft = 0;
    }
    if (scrollTop < 0) {
      scrollTop = 0;
    }
    parent.scrollTo({
      behavior: isAnimate ? 'smooth' : 'instant',
      top: scrollTop,
      left: scrollLeft
    });
  });
  reqMap.set(parent, reqId);
};
var getIndexFromScroll = function getIndexFromScroll(target, size) {
  var scrollLeft = target.scrollLeft;
  var scrollWidth = target.scrollWidth;
  var scrollIndex = scrollLeft / scrollWidth * size;
  return Math.round(scrollIndex);
};
var getVideoEmbedId = function getVideoEmbedId(videoUrl) {
  var regExp = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
  var matches = regExp.exec(videoUrl);
  return matches && matches[1];
};
var getEmbedVideoUrl = function getEmbedVideoUrl(videoUrl) {
  var embedId = getVideoEmbedId(videoUrl);
  return "https://youtube.com/embed/".concat(embedId, "?enablejsapi=1&rel=0");
};
var getVideoPreviewImage = function getVideoPreviewImage(videoUrl) {
  var embedId = getVideoEmbedId(videoUrl);
  return "https://img.youtube.com/vi/".concat(embedId, "/0.jpg");
};

// fork rfom https://github.com/manuelstofer/pinchzoom
// @ts-nocheck

// utils
var buildElement = function buildElement(str) {
  // empty string as title argument required by IE and Edge
  var tmp = document.implementation.createHTMLDocument('');
  tmp.body.innerHTML = str;
  return Array.from(tmp.body.children)[0];
};
var definePinchZoom = function definePinchZoom() {
  /**
   * Pinch zoom
   * @param el
   * @param options
   * @constructor
   */
  var PinchZoom = function PinchZoom(el, options) {
      this.el = el;
      this.zoomFactor = 1;
      this.lastScale = 1;
      this.offset = {
        x: 0,
        y: 0
      };
      this.initialOffset = {
        x: 0,
        y: 0
      };
      this.options = Object.assign({}, this.defaults, options);
      this.setupMarkup();
      this.bindEvents();
      this.update();

      // The image may already be loaded when PinchZoom is initialized,
      // and then the load event (which trigger update) will never fire.
      if (this.isImageLoaded(this.el)) {
        this.updateAspectRatio();
        this.setupOffsets();
      }
      this.enable();
    },
    sum = function sum(a, b) {
      return a + b;
    },
    isCloseTo = function isCloseTo(value, expected) {
      return value > expected - 0.01 && value < expected + 0.01;
    };
  PinchZoom.prototype = {
    defaults: {
      tapZoomFactor: 2,
      zoomOutFactor: 1.3,
      animationDuration: 300,
      maxZoom: 4,
      minZoom: 0.5,
      draggableUnzoomed: true,
      lockDragAxis: false,
      setOffsetsOnce: false,
      use2d: true,
      useMouseWheel: false,
      verticalPadding: 0,
      horizontalPadding: 0,
      onZoomStart: null,
      onZoomEnd: null,
      onZoomUpdate: null,
      onDragStart: null,
      onDragEnd: null,
      onDragUpdate: null,
      onDoubleTap: null,
      onMouseWheel: null
    },
    /**
     * Event handler for 'dragstart'
     * @param event
     */
    handleDragStart: function handleDragStart(event) {
      if (typeof this.options.onDragStart == 'function') {
        this.options.onDragStart(this, event);
      }
      this.stopAnimation();
      this.lastDragPosition = false;
      this.hasInteraction = true;
      this.handleDrag(event);
    },
    /**
     * Event handler for 'drag'
     * @param event
     */
    handleDrag: function handleDrag(event) {
      var touch = event.type === 'touchmove' ? this.getTouches(event)[0] : this.getPointer(event);
      this.drag(touch, this.lastDragPosition);
      this.offset = this.sanitizeOffset(this.offset);
      this.lastDragPosition = touch;
    },
    handleDragEnd: function handleDragEnd() {
      if (typeof this.options.onDragEnd == 'function') {
        this.options.onDragEnd(this, event);
      }
      this.end();
    },
    /**
     * Event handler for 'zoomstart'
     * @param event
     */
    handleZoomStart: function handleZoomStart(event) {
      if (typeof this.options.onZoomStart == 'function') {
        this.options.onZoomStart(this, event);
      }
      this.stopAnimation();
      this.lastScale = 1;
      this.nthZoom = 0;
      this.lastZoomCenter = false;
      this.hasInteraction = true;
    },
    /**
     * Event handler for 'zoom'
     * @param event
     */
    handleZoom: function handleZoom(event, newScale) {
      // a relative scale factor is used
      var touchCenter = this.getTouchCenter(this.getTouches(event)),
        scale = newScale / this.lastScale;
      this.lastScale = newScale;

      // the first touch events are thrown away since they are not precise
      this.nthZoom += 1;
      if (this.nthZoom > 3) {
        this.scale(scale, touchCenter);
        this.drag(touchCenter, this.lastZoomCenter);
      }
      this.lastZoomCenter = touchCenter;
    },
    handleZoomEnd: function handleZoomEnd() {
      if (typeof this.options.onZoomEnd == 'function') {
        this.options.onZoomEnd(this, event);
      }
      this.end();
    },
    /**
     * Event handler for 'doubletap'
     * @param event
     */
    handleDoubleTap: function handleDoubleTap(event) {
      var center = this.getTouches(event)[0],
        zoomFactor = this.zoomFactor > 1 ? 1 : this.options.tapZoomFactor,
        startZoomFactor = this.zoomFactor,
        updateProgress = function (progress) {
          this.scaleTo(startZoomFactor + progress * (zoomFactor - startZoomFactor), center);
        }.bind(this);
      if (this.hasInteraction) {
        return;
      }
      this.isDoubleTap = true;
      if (startZoomFactor > zoomFactor) {
        center = this.getCurrentZoomCenter();
      }
      this.animate(this.options.animationDuration, updateProgress, this.swing);
      if (typeof this.options.onDoubleTap == 'function') {
        this.options.onDoubleTap(this, event);
      }
    },
    /**
     * Event handler for 'mousewheel'
     * @param event
     */
    handleMouseWheel: function handleMouseWheel(event) {
      var center = this.getPointer(event),
        newScale = Math.min(Math.max(this.options.minZoom, this.lastScale + event.deltaY * -0.01), this.options.maxZoom),
        scale = newScale / this.lastScale;
      this.scale(scale, center);
      this.lastScale = newScale;
      this.update();
      if (typeof this.options.onMouseWheel == 'function') {
        this.options.onMouseWheel(this, event);
      }
    },
    /**
     * Compute the initial offset
     *
     * the element should be centered in the container upon initialization
     */
    computeInitialOffset: function computeInitialOffset() {
      this.initialOffset = {
        x: -Math.abs(this.el.offsetWidth * this.getInitialZoomFactor() - this.container.offsetWidth) / 2,
        y: -Math.abs(this.el.offsetHeight * this.getInitialZoomFactor() - this.container.offsetHeight) / 2
      };
    },
    /**
     * Reset current image offset to that of the initial offset
     */
    resetOffset: function resetOffset() {
      this.offset.x = this.initialOffset.x;
      this.offset.y = this.initialOffset.y;
    },
    /**
     * Determine if image is loaded
     */
    isImageLoaded: function isImageLoaded(el) {
      if (el.nodeName === 'IMG') {
        return el.complete && el.naturalHeight !== 0;
      } else {
        return Array.from(el.querySelectorAll('img')).every(this.isImageLoaded);
      }
    },
    setupOffsets: function setupOffsets() {
      if (this.options.setOffsetsOnce && this._isOffsetsSet) {
        return;
      }
      this._isOffsetsSet = true;
      this.computeInitialOffset();
      this.resetOffset();
    },
    /**
     * Max / min values for the offset
     * @param offset
     * @return {Object} the sanitized offset
     */
    sanitizeOffset: function sanitizeOffset(offset) {
      var elWidth = this.el.offsetWidth * this.getInitialZoomFactor() * this.zoomFactor;
      var elHeight = this.el.offsetHeight * this.getInitialZoomFactor() * this.zoomFactor;
      var maxX = elWidth - this.getContainerX() + this.options.horizontalPadding,
        maxY = elHeight - this.getContainerY() + this.options.verticalPadding,
        maxOffsetX = Math.max(maxX, 0),
        maxOffsetY = Math.max(maxY, 0),
        minOffsetX = Math.min(maxX, 0) - this.options.horizontalPadding,
        minOffsetY = Math.min(maxY, 0) - this.options.verticalPadding;
      return {
        x: Math.min(Math.max(offset.x, minOffsetX), maxOffsetX),
        y: Math.min(Math.max(offset.y, minOffsetY), maxOffsetY)
      };
    },
    /**
     * Scale to a specific zoom factor (not relative)
     * @param zoomFactor
     * @param center
     */
    scaleTo: function scaleTo(zoomFactor, center) {
      this.scale(zoomFactor / this.zoomFactor, center);
    },
    /**
     * Scales the element from specified center
     * @param scale
     * @param center
     */
    scale: function scale(_scale, center) {
      _scale = this.scaleZoomFactor(_scale);
      this.addOffset({
        x: (_scale - 1) * (center.x + this.offset.x),
        y: (_scale - 1) * (center.y + this.offset.y)
      });
      if (typeof this.options.onZoomUpdate == 'function') {
        this.options.onZoomUpdate(this, event);
      }
    },
    /**
     * Scales the zoom factor relative to current state
     * @param scale
     * @return the actual scale (can differ because of max min zoom factor)
     */
    scaleZoomFactor: function scaleZoomFactor(scale) {
      var originalZoomFactor = this.zoomFactor;
      this.zoomFactor *= scale;
      this.zoomFactor = Math.min(this.options.maxZoom, Math.max(this.zoomFactor, this.options.minZoom));
      return this.zoomFactor / originalZoomFactor;
    },
    /**
     * Determine if the image is in a draggable state
     *
     * When the image can be dragged, the drag event is acted upon and cancelled.
     * When not draggable, the drag event bubbles through this component.
     *
     * @return {Boolean}
     */
    canDrag: function canDrag() {
      return this.options.draggableUnzoomed || !isCloseTo(this.zoomFactor, 1);
    },
    /**
     * Drags the element
     * @param center
     * @param lastCenter
     */
    drag: function drag(center, lastCenter) {
      if (lastCenter) {
        if (this.options.lockDragAxis) {
          // lock scroll to position that was changed the most
          if (Math.abs(center.x - lastCenter.x) > Math.abs(center.y - lastCenter.y)) {
            this.addOffset({
              x: -(center.x - lastCenter.x),
              y: 0
            });
          } else {
            this.addOffset({
              y: -(center.y - lastCenter.y),
              x: 0
            });
          }
        } else {
          this.addOffset({
            y: -(center.y - lastCenter.y),
            x: -(center.x - lastCenter.x)
          });
        }
        if (typeof this.options.onDragUpdate == 'function') {
          this.options.onDragUpdate(this, event);
        }
      }
    },
    /**
     * Calculates the touch center of multiple touches
     * @param touches
     * @return {Object}
     */
    getTouchCenter: function getTouchCenter(touches) {
      return this.getVectorAvg(touches);
    },
    /**
     * Calculates the average of multiple vectors (x, y values)
     */
    getVectorAvg: function getVectorAvg(vectors) {
      return {
        x: vectors.map(function (v) {
          return v.x;
        }).reduce(sum) / vectors.length,
        y: vectors.map(function (v) {
          return v.y;
        }).reduce(sum) / vectors.length
      };
    },
    /**
     * Adds an offset
     * @param offset the offset to add
     * @return return true when the offset change was accepted
     */
    addOffset: function addOffset(offset) {
      this.offset = {
        x: this.offset.x + offset.x,
        y: this.offset.y + offset.y
      };
    },
    sanitize: function sanitize() {
      if (this.zoomFactor < this.options.zoomOutFactor) {
        this.zoomOutAnimation();
      } else if (this.isInsaneOffset(this.offset)) {
        this.sanitizeOffsetAnimation();
      }
    },
    /**
     * Checks if the offset is ok with the current zoom factor
     * @param offset
     * @return {Boolean}
     */
    isInsaneOffset: function isInsaneOffset(offset) {
      var sanitizedOffset = this.sanitizeOffset(offset);
      return sanitizedOffset.x !== offset.x || sanitizedOffset.y !== offset.y;
    },
    /**
     * Creates an animation moving to a sane offset
     */
    sanitizeOffsetAnimation: function sanitizeOffsetAnimation() {
      var targetOffset = this.sanitizeOffset(this.offset),
        startOffset = {
          x: this.offset.x,
          y: this.offset.y
        },
        updateProgress = function (progress) {
          this.offset.x = startOffset.x + progress * (targetOffset.x - startOffset.x);
          this.offset.y = startOffset.y + progress * (targetOffset.y - startOffset.y);
          this.update();
        }.bind(this);
      this.animate(this.options.animationDuration, updateProgress, this.swing);
    },
    /**
     * Zooms back to the original position,
     * (no offset and zoom factor 1)
     */
    zoomOutAnimation: function zoomOutAnimation() {
      if (this.zoomFactor === 1) {
        return;
      }
      var startZoomFactor = this.zoomFactor,
        zoomFactor = 1,
        center = this.getCurrentZoomCenter(),
        updateProgress = function (progress) {
          this.scaleTo(startZoomFactor + progress * (zoomFactor - startZoomFactor), center);
        }.bind(this);
      this.animate(this.options.animationDuration, updateProgress, this.swing);
    },
    /**
     * Updates the container aspect ratio
     *
     * Any previous container height must be cleared before re-measuring the
     * parent height, since it depends implicitly on the height of any of its children
     */
    updateAspectRatio: function updateAspectRatio() {
      this.unsetContainerY();
      this.setContainerY(this.container.parentElement.offsetHeight);
    },
    /**
     * Calculates the initial zoom factor (for the element to fit into the container)
     * @return {number} the initial zoom factor
     */
    getInitialZoomFactor: function getInitialZoomFactor() {
      var xZoomFactor = this.container.offsetWidth / this.el.offsetWidth;
      var yZoomFactor = this.container.offsetHeight / this.el.offsetHeight;
      return Math.min(xZoomFactor, yZoomFactor);
    },
    /**
     * Calculates the aspect ratio of the element
     * @return the aspect ratio
     */
    getAspectRatio: function getAspectRatio() {
      return this.el.offsetWidth / this.el.offsetHeight;
    },
    /**
     * Calculates the virtual zoom center for the current offset and zoom factor
     * (used for reverse zoom)
     * @return {Object} the current zoom center
     */
    getCurrentZoomCenter: function getCurrentZoomCenter() {
      var offsetLeft = this.offset.x - this.initialOffset.x;
      var centerX = -1 * this.offset.x - offsetLeft / (1 / this.zoomFactor - 1);
      var offsetTop = this.offset.y - this.initialOffset.y;
      var centerY = -1 * this.offset.y - offsetTop / (1 / this.zoomFactor - 1);
      return {
        x: centerX,
        y: centerY
      };
    },
    /**
     * Returns the touches of an event relative to the container offset
     * @param event
     * @return array touches
     */
    getTouches: function getTouches(event) {
      var rect = this.container.getBoundingClientRect();
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
      var posTop = rect.top + scrollTop;
      var posLeft = rect.left + scrollLeft;
      return Array.prototype.slice.call(event.touches).map(function (touch) {
        return {
          x: touch.pageX - posLeft,
          y: touch.pageY - posTop
        };
      });
    },
    /**
     * Returns the pointer of an event relative to the container offset
     * @param event
     * @return pointer
     */
    getPointer: function getPointer(event) {
      var rect = this.container.getBoundingClientRect();
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
      var posTop = rect.top + scrollTop;
      var posLeft = rect.left + scrollLeft;
      return {
        x: event.pageX - posLeft,
        y: event.pageY - posTop
      };
    },
    /**
     * Animation loop
     * does not support simultaneous animations
     * @param duration
     * @param framefn
     * @param timefn
     * @param callback
     */
    animate: function animate(duration, framefn, timefn, callback) {
      var startTime = new Date().getTime(),
        renderFrame = function () {
          if (!this.inAnimation) {
            return;
          }
          var frameTime = new Date().getTime() - startTime,
            progress = frameTime / duration;
          if (frameTime >= duration) {
            framefn(1);
            if (callback) {
              callback();
            }
            this.update();
            this.stopAnimation();
            this.update();
          } else {
            if (timefn) {
              progress = timefn(progress);
            }
            framefn(progress);
            this.update();
            requestAnimationFrame(renderFrame);
          }
        }.bind(this);
      this.inAnimation = true;
      requestAnimationFrame(renderFrame);
    },
    /**
     * Stops the animation
     */
    stopAnimation: function stopAnimation() {
      this.inAnimation = false;
    },
    /**
     * Swing timing function for animations
     * @param p
     * @return {Number}
     */
    swing: function swing(p) {
      return -Math.cos(p * Math.PI) / 2 + 0.5;
    },
    getContainerX: function getContainerX() {
      return this.container.offsetWidth;
    },
    getContainerY: function getContainerY() {
      return this.container.offsetHeight;
    },
    setContainerY: function setContainerY(y) {
      return this.container.style.height = y + 'px';
    },
    unsetContainerY: function unsetContainerY() {
      this.container.style.height = null;
    },
    /**
     * Creates the expected html structure
     */
    setupMarkup: function setupMarkup() {
      // this.container = buildElement('<div class="pinch-zoom-container"></div>');
      this.container = buildElement('<div class="pinch-zoom-container" style="height: 100%;"></div>');
      this.el.parentNode.insertBefore(this.container, this.el);
      this.container.appendChild(this.el);
      this.container.style.overflow = 'hidden';
      this.container.style.position = 'relative';
      this.el.style.webkitTransformOrigin = '0% 0%';
      this.el.style.mozTransformOrigin = '0% 0%';
      this.el.style.msTransformOrigin = '0% 0%';
      this.el.style.oTransformOrigin = '0% 0%';
      this.el.style.transformOrigin = '0% 0%';
      this.el.style.position = 'absolute';
      this.el.style.backfaceVisibility = 'hidden';
      this.el.style.willChange = 'transform';
    },
    end: function end() {
      this.hasInteraction = false;
      this.sanitize();
      this.update();
    },
    /**
     * Binds all required event listeners
     */
    bindEvents: function bindEvents() {
      var self = this;
      detectGestures(this.container, this);
      this.resizeHandler = this.update.bind(this);
      window.addEventListener('resize', this.resizeHandler);
      Array.from(this.el.querySelectorAll('img')).forEach(function (imgEl) {
        imgEl.addEventListener('load', self.update.bind(self));
      });
      if (this.el.nodeName === 'IMG') {
        this.el.addEventListener('load', this.update.bind(this));
      }
    },
    /**
     * Updates the css values according to the current zoom factor and offset
     */
    update: function update(event) {
      if (event && event.type === 'resize') {
        this.updateAspectRatio();
        this.setupOffsets();
      }
      if (event && event.type === 'load') {
        this.updateAspectRatio();
        this.setupOffsets();
      }
      if (this.updatePlanned) {
        return;
      }
      this.updatePlanned = true;
      window.setTimeout(function () {
        this.updatePlanned = false;
        var zoomFactor = this.getInitialZoomFactor() * this.zoomFactor,
          offsetX = -this.offset.x / zoomFactor,
          offsetY = -this.offset.y / zoomFactor,
          transform3d = 'scale3d(' + zoomFactor + ', ' + zoomFactor + ',1) ' + 'translate3d(' + offsetX + 'px,' + offsetY + 'px,0px)',
          transform2d = 'scale(' + zoomFactor + ', ' + zoomFactor + ') ' + 'translate(' + offsetX + 'px,' + offsetY + 'px)',
          removeClone = function () {
            if (this.clone) {
              this.clone.parentNode.removeChild(this.clone);
              delete this.clone;
            }
          }.bind(this);

        // Scale 3d and translate3d are faster (at least on ios)
        // but they also reduce the quality.
        // PinchZoom uses the 3d transformations during interactions
        // after interactions it falls back to 2d transformations
        if (!this.options.use2d || this.hasInteraction || this.inAnimation) {
          this.is3d = true;
          removeClone();
          this.el.style.webkitTransform = transform3d;
          this.el.style.mozTransform = transform2d;
          this.el.style.msTransform = transform2d;
          this.el.style.oTransform = transform2d;
          this.el.style.transform = transform3d;
        } else {
          // When changing from 3d to 2d transform webkit has some glitches.
          // To avoid this, a copy of the 3d transformed element is displayed in the
          // foreground while the element is converted from 3d to 2d transform
          if (this.is3d) {
            this.clone = this.el.cloneNode(true);
            this.clone.style.pointerEvents = 'none';
            this.container.appendChild(this.clone);
            window.setTimeout(removeClone, 200);
          }
          this.el.style.webkitTransform = transform2d;
          this.el.style.mozTransform = transform2d;
          this.el.style.msTransform = transform2d;
          this.el.style.oTransform = transform2d;
          this.el.style.transform = transform2d;
          this.is3d = false;
        }
      }.bind(this), 0);
    },
    /**
     * Enables event handling for gestures
     */
    enable: function enable() {
      this.enabled = true;
    },
    /**
     * Disables event handling for gestures
     */
    disable: function disable() {
      this.enabled = false;
    },
    /**
     * Unmounts the zooming container and global event listeners
     */
    destroy: function destroy() {
      window.removeEventListener('resize', this.resizeHandler);
      if (this.container) {
        this.container.remove();
        this.container = null;
      }
    },
    reset: function reset() {
      this.zoomOutAnimation();
    }
  };
  var detectGestures = function detectGestures(el, target) {
    var interaction = null,
      fingers = 0,
      lastTouchStart = null,
      startTouches = null,
      setInteraction = function setInteraction(newInteraction, event) {
        if (interaction !== newInteraction) {
          if (interaction && !newInteraction) {
            switch (interaction) {
              case 'zoom':
                target.handleZoomEnd(event);
                break;
              case 'drag':
                target.handleDragEnd(event);
                break;
            }
          }
          switch (newInteraction) {
            case 'zoom':
              target.handleZoomStart(event);
              break;
            case 'drag':
              target.handleDragStart(event);
              break;
          }
        }
        interaction = newInteraction;
      },
      updateInteraction = function updateInteraction(event) {
        if (fingers === 2) {
          setInteraction('zoom');
        } else if (fingers === 1 && target.canDrag()) {
          setInteraction('drag', event);
        } else {
          setInteraction(null, event);
        }
      },
      targetTouches = function targetTouches(touches) {
        return Array.from(touches).map(function (touch) {
          return {
            x: touch.pageX,
            y: touch.pageY
          };
        });
      },
      getDistance = function getDistance(a, b) {
        var x, y;
        x = a.x - b.x;
        y = a.y - b.y;
        return Math.sqrt(x * x + y * y);
      },
      calculateScale = function calculateScale(startTouches, endTouches) {
        var startDistance = getDistance(startTouches[0], startTouches[1]),
          endDistance = getDistance(endTouches[0], endTouches[1]);
        return endDistance / startDistance;
      },
      cancelEvent = function cancelEvent(event) {
        event.stopPropagation();
        event.preventDefault();
      },
      detectDoubleTap = function detectDoubleTap(event) {
        var time = new Date().getTime();
        if (fingers > 1) {
          lastTouchStart = null;
        }
        if (time - lastTouchStart < 300) {
          cancelEvent(event);
          target.handleDoubleTap(event);
          switch (interaction) {
            case 'zoom':
              target.handleZoomEnd(event);
              break;
            case 'drag':
              target.handleDragEnd(event);
              break;
          }
        } else {
          target.isDoubleTap = false;
        }
        if (fingers === 1) {
          lastTouchStart = time;
        }
      },
      firstMove = true;
    el.addEventListener('touchstart', function (event) {
      if (target.enabled) {
        firstMove = true;
        fingers = event.touches.length;
        detectDoubleTap(event);
      }
    }, {
      passive: false
    });
    el.addEventListener('touchmove', function (event) {
      if (target.enabled && !target.isDoubleTap) {
        if (firstMove) {
          updateInteraction(event);
          if (interaction) {
            cancelEvent(event);
          }
          startTouches = targetTouches(event.touches);
        } else {
          switch (interaction) {
            case 'zoom':
              if (startTouches.length == 2 && event.touches.length == 2) {
                target.handleZoom(event, calculateScale(startTouches, targetTouches(event.touches)));
              }
              break;
            case 'drag':
              target.handleDrag(event);
              break;
          }
          if (interaction) {
            cancelEvent(event);
            target.update();
          }
        }
        firstMove = false;
      }
    }, {
      passive: false
    });
    el.addEventListener('touchend', function (event) {
      if (target.enabled) {
        fingers = event.touches.length;
        updateInteraction(event);
      }
    });
    if (target.options.useMouseWheel) {
      el.addEventListener('mousewheel', function (event) {
        if (target.enabled) {
          cancelEvent(event);
          target.handleMouseWheel(event);
        }
      });
      el.addEventListener('mousedown', function (event) {
        if (target.enabled) {
          firstMove = true;
          fingers = 1;
        }
      }, {
        passive: true
      });
      el.addEventListener('mousemove', function (event) {
        if (target.enabled) {
          if (firstMove) {
            updateInteraction(event);
            if (interaction) {
              cancelEvent(event);
            }
          } else {
            if (interaction === 'drag') {
              target.handleDrag(event);
            }
            if (interaction) {
              cancelEvent(event);
              target.update();
            }
          }
          firstMove = false;
        }
      }, {
        passive: false
      });
      el.addEventListener('mouseup', function (event) {
        if (target.enabled) {
          fingers = 0;
          updateInteraction(event);
        }
      }, {
        passive: true
      });
    }
  };
  return PinchZoom;
};
var PinchZoom = definePinchZoom();

var css = {"scrolling":"PhotoGallery__scrolling___q1DKc","root":"PhotoGallery__root___KiBKq","layout":"PhotoGallery__layout___JBDok","layoutHeader":"PhotoGallery__layoutHeader___tVG4b","layoutContent":"PhotoGallery__layoutContent___O43ff","layoutSection":"PhotoGallery__layoutSection___CvZb6","layoutAside":"PhotoGallery__layoutAside___fdKgJ","header":"PhotoGallery__header___xfAad","headerTitle":"PhotoGallery__headerTitle___QiOEy","headerClose":"PhotoGallery__headerClose___qdl3x","mainPhotoScrollControls":"PhotoGallery__mainPhotoScrollControls___PeY3Y","mainPhoto":"PhotoGallery__mainPhoto___QIMHy PhotoGallery__scrolling___q1DKc","mainPhotoItem":"PhotoGallery__mainPhotoItem___aZCyk","mainPhotoImage":"PhotoGallery__mainPhotoImage___2aEr5","mainPhotoIframe":"PhotoGallery__mainPhotoIframe___kThdT","preview":"PhotoGallery__preview___F-k0z PhotoGallery__scrolling___q1DKc","previewItem":"PhotoGallery__previewItem___jf683","previewButton":"PhotoGallery__previewButton___VAXOP","previewImage":"PhotoGallery__previewImage___Mx2Y-","videoPlayLabel":"PhotoGallery__videoPlayLabel___jQiDN","videoPlayLabelIcon":"PhotoGallery__videoPlayLabelIcon___wSdjd","enter":"PhotoGallery__enter___Lnosr","exit":"PhotoGallery__exit___NW-xY","enterActive":"PhotoGallery__enterActive___LrirU","exitActive":"PhotoGallery__exitActive___L6st-"};

var MainPhotosImage = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
  var src = _ref.src,
    videoSrc = _ref.videoSrc,
    triggerInteraction = _ref.triggerInteraction;
  var videoIframeRef = React__namespace.useRef(null);
  var pinchZoomRef = React__namespace.useRef(null);
  var imgRef = React__namespace.useRef(null);
  var isVideo = !!videoSrc;
  var reset = function reset() {
    var _pinchZoomRef$current, _videoIframeRef$curre;
    (_pinchZoomRef$current = pinchZoomRef.current) === null || _pinchZoomRef$current === void 0 ? void 0 : _pinchZoomRef$current.reset();
    (_videoIframeRef$curre = videoIframeRef.current) === null || _videoIframeRef$curre === void 0 || (_videoIframeRef$curre = _videoIframeRef$curre.contentWindow) === null || _videoIframeRef$curre === void 0 ? void 0 : _videoIframeRef$curre.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
  };
  React__namespace.useEffect(function () {
    requestAnimationFrame(function () {
      if (imgRef.current && !isVideo) {
        pinchZoomRef.current = new PinchZoom(imgRef.current, {
          draggableUnzoomed: false,
          animationDuration: 200,
          setOffsetsOnce: false,
          onDoubleTap: function onDoubleTap(target) {
            // @ts-ignore
            if ((target === null || target === void 0 ? void 0 : target.zoomFactor) === 1) {
              triggerInteraction('maybeZoomImage');
            }
          }
        });
      }
    });
    return function () {
      var _pinchZoomRef$current2;
      (_pinchZoomRef$current2 = pinchZoomRef.current) === null || _pinchZoomRef$current2 === void 0 ? void 0 : _pinchZoomRef$current2.destroy();
    };
  }, [videoSrc]);
  React__namespace.useEffect(function () {
    var onBlur = function onBlur() {
      if (isVideo && document.activeElement && document.activeElement.nodeName.toLowerCase() === 'iframe' && videoIframeRef.current && videoIframeRef.current === document.activeElement) {
        triggerInteraction('maybePlayVideo');
      }
    };
    window.addEventListener('blur', onBlur);
    return function () {
      window.removeEventListener('blur', onBlur);
    };
  }, [videoSrc]);
  React__namespace.useImperativeHandle(ref, function () {
    return {
      reset: reset
    };
  }, []);
  if (isVideo) {
    return /*#__PURE__*/React__namespace.createElement("iframe", {
      ref: videoIframeRef,
      className: css.mainPhotoIframe,
      src: videoSrc,
      width: "100%",
      height: "100%",
      allowFullScreen: true,
      title: "",
      loading: "lazy",
      "data-qaid": "photo_gallery_main_video",
      "data-testid": "photo_gallery_main_video"
    });
  }
  return /*#__PURE__*/React__namespace.createElement("img", {
    ref: imgRef,
    className: css.mainPhotoImage,
    src: src,
    width: "100%",
    height: "100%",
    alt: "",
    decoding: "async",
    loading: "lazy",
    "data-qaid": "photo_gallery_main_image",
    "data-testid": "photo_gallery_main_image"
  });
});

var MainPhotos = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
  var items = _ref.items,
    onChange = _ref.onChange,
    triggerInteraction = _ref.triggerInteraction;
  var touchScreenX = React__namespace.useRef(null);
  var mainPhotoRefs = React__namespace.useRef([]);
  var scrollIndex = React__namespace.useRef(0);
  var localScrollRef = React__namespace.useRef(null);
  var destroyMainPhoto = function destroyMainPhoto() {
    mainPhotoRefs.current.forEach(function (currentRef) {
      currentRef === null || currentRef === void 0 ? void 0 : currentRef.reset();
    });
  };
  var scrollToIndex = function scrollToIndex(index) {
    var _localScrollRef$curre;
    var isAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
    var childNode = (_localScrollRef$curre = localScrollRef.current) === null || _localScrollRef$curre === void 0 ? void 0 : _localScrollRef$curre.children[index];
    destroyMainPhoto();
    if (childNode) {
      scrollInToViewElement(childNode, localScrollRef.current, isAnimate);
    }
  };
  React__namespace.useImperativeHandle(ref, function () {
    return {
      scrollToIndex: scrollToIndex
    };
  }, []);
  var onScroll = function onScroll() {
    if (!localScrollRef.current) return;
    var indexFromScroll = getIndexFromScroll(localScrollRef.current, items.length);
    if (scrollIndex.current !== indexFromScroll) {
      scrollIndex.current = indexFromScroll;
      onChange(indexFromScroll);
      destroyMainPhoto();
    }
  };
  var onTouchStart = function onTouchStart(e) {
    var currentTouchScreenX = e.changedTouches[0].screenX;
    touchScreenX.current = currentTouchScreenX;
  };
  var onTouchEnd = function onTouchEnd(e) {
    var currentTouchScreenX = e.changedTouches[0].screenX;
    if (touchScreenX.current) {
      if (touchScreenX.current > currentTouchScreenX) {
        triggerInteraction('maybeSwipeLeft');
      } else if (touchScreenX.current < currentTouchScreenX) {
        triggerInteraction('maybeSwipeRight');
      }
      touchScreenX.current = null;
    }
  };
  return /*#__PURE__*/React__namespace.createElement(ScrollControls.ScrollControls, {
    ref: localScrollRef,
    className: css.mainPhotoScrollControls,
    showOnHover: true,
    hideOnDisabled: true,
    onClickPrev: function onClickPrev() {
      return triggerInteraction('clickPrevButton');
    },
    onClickNext: function onClickNext() {
      return triggerInteraction('clickNextButton');
    }
  }, function (scrollRef) {
    return /*#__PURE__*/React__namespace.createElement("div", {
      ref: scrollRef,
      className: css.mainPhoto,
      onScroll: onScroll,
      onTouchStart: onTouchStart,
      onTouchEnd: onTouchEnd
    }, items.map(function (_ref2, index) {
      var type = _ref2.type,
        src = _ref2.src;
      var isVideo = type === 'video';
      var previewSrc = isVideo ? getVideoPreviewImage(src) : src;
      var videoSrc = isVideo ? getEmbedVideoUrl(src) : undefined;
      return /*#__PURE__*/React__namespace.createElement("div", {
        key: index,
        className: css.mainPhotoItem,
        "data-qaid": "photo_gallery_main_item",
        "data-testid": "photo_gallery_main_item"
      }, /*#__PURE__*/React__namespace.createElement(MainPhotosImage, {
        ref: function ref(el) {
          return mainPhotoRefs.current[index] = el;
        },
        src: previewSrc,
        videoSrc: videoSrc,
        triggerInteraction: triggerInteraction
      }));
    }));
  });
});

var PreviewPhotos = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
  var items = _ref.items,
    selectedIndex = _ref.selectedIndex,
    onChange = _ref.onChange,
    triggerInteraction = _ref.triggerInteraction;
  var localScrollRef = React__namespace.useRef(null);
  var scrollToIndex = function scrollToIndex(index) {
    var _localScrollRef$curre;
    var isAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
    var childNode = (_localScrollRef$curre = localScrollRef.current) === null || _localScrollRef$curre === void 0 ? void 0 : _localScrollRef$curre.children[index];
    if (childNode) {
      scrollInToViewElement(childNode, localScrollRef.current, isAnimate);
    }
  };
  React__namespace.useImperativeHandle(ref, function () {
    return {
      scrollToIndex: scrollToIndex
    };
  }, []);
  var _onClick = function onClick(index) {
    onChange(index);
  };
  return /*#__PURE__*/React__namespace.createElement("div", {
    ref: localScrollRef,
    className: css.preview
  }, items.map(function (_ref2, index) {
    var type = _ref2.type,
      src = _ref2.src;
    var isVideo = type === 'video';
    var previewSrc = isVideo ? getVideoPreviewImage(src) : src;
    var iteractionEventName = isVideo ? 'clickPreviewVideo' : 'clickPreviewImage';
    return /*#__PURE__*/React__namespace.createElement("div", {
      key: index,
      className: css.previewItem,
      "data-qaid": "photo_gallery_preview_item",
      "data-testid": "photo_gallery_preview_item"
    }, /*#__PURE__*/React__namespace.createElement("button", {
      className: css.previewButton,
      type: "button",
      onClick: function onClick() {
        triggerInteraction(iteractionEventName);
        _onClick(index);
      },
      disabled: selectedIndex === index,
      "data-qaid": "photo_gallery_preview_button",
      "data-testid": "photo_gallery_preview_button"
    }, /*#__PURE__*/React__namespace.createElement("img", {
      className: css.previewImage,
      src: previewSrc,
      width: 58,
      height: 58,
      alt: "",
      decoding: "async",
      loading: "lazy",
      "data-qaid": "photo_gallery_preview_image",
      "data-testid": "photo_gallery_preview_image"
    }), isVideo && /*#__PURE__*/React__namespace.createElement("div", {
      className: css.videoPlayLabel,
      "data-qaid": "photo_gallery_preview_play",
      "data-testid": "photo_gallery_preview_play"
    }, /*#__PURE__*/React__namespace.createElement(Icon.Icon, {
      className: css.videoPlayLabelIcon,
      "icon-as": Play.SvgPlay
    }))));
  }));
});

var _templateObject;
var Header = function Header(_ref) {
  var title = _ref.title,
    onClose = _ref.onClose,
    selectedIndex = _ref.selectedIndex,
    itemsLength = _ref.itemsLength,
    triggerInteraction = _ref.triggerInteraction;
  var _useBodyTTag = useBodyTTag.useBodyTTag(),
    t = _useBodyTTag.t;
  var visibleSelectedIndex = selectedIndex + 1;
  var visibleTitle = t(_templateObject || (_templateObject = _taggedTemplateLiteral(["\u0424\u043E\u0442\u043E ", " \u0438\u0437 ", ""])), visibleSelectedIndex, itemsLength);
  return /*#__PURE__*/React__namespace.createElement("div", {
    className: css.header
  }, /*#__PURE__*/React__namespace.createElement("div", {
    className: css.headerTitle,
    "data-qaid": "photo_gallery_title",
    "data-testid": "photo_gallery_title"
  }, title || visibleTitle), /*#__PURE__*/React__namespace.createElement("div", {
    className: css.headerClose
  }, /*#__PURE__*/React__namespace.createElement(Button.Button, {
    "button-padding": "xxs",
    "button-theme": "black-inherit",
    type: "button",
    onClick: function onClick() {
      triggerInteraction('clickCloseButton');
      onClose();
    },
    "data-qaid": "photo_gallery_close_button",
    "data-testid": "photo_gallery_close_button"
  }, /*#__PURE__*/React__namespace.createElement(Icon.Icon, {
    "icon-as": Close2.SvgClose2,
    style: {
      width: 24,
      height: 24
    }
  }))));
};

var PhotoGallery = function PhotoGallery(_ref) {
  var isOpen = _ref.isOpen,
    title = _ref.title,
    _ref$visibleIndex = _ref.visibleIndex,
    visibleIndex = _ref$visibleIndex === void 0 ? 0 : _ref$visibleIndex,
    items = _ref.items,
    _ref$zIndex = _ref.zIndex,
    zIndex = _ref$zIndex === void 0 ? 5000 : _ref$zIndex,
    onClose = _ref.onClose,
    onChange = _ref.onChange,
    onInteraction = _ref.onInteraction;
  var refIsAllowChangePreviewPhoto = React__namespace.useRef(true);
  var refMainPhotos = React__namespace.useRef(null);
  var refPreviewPhotos = React__namespace.useRef(null);
  var _React$useState = React__namespace.useState(visibleIndex),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    selectedIndex = _React$useState2[0],
    setSelectedIndex = _React$useState2[1];
  var triggerInteraction = function triggerInteraction(eventName) {
    if (typeof onInteraction === 'function') {
      onInteraction(eventName);
    }
  };
  React__namespace.useEffect(function () {
    if (isOpen && typeof onChange === 'function') {
      onChange(selectedIndex);
    }
  }, [selectedIndex]);
  React__namespace.useEffect(function () {
    if (isOpen) {
      var _refPreviewPhotos$cur, _refMainPhotos$curren;
      setSelectedIndex(visibleIndex);
      (_refPreviewPhotos$cur = refPreviewPhotos.current) === null || _refPreviewPhotos$cur === void 0 ? void 0 : _refPreviewPhotos$cur.scrollToIndex(visibleIndex, false);
      (_refMainPhotos$curren = refMainPhotos.current) === null || _refMainPhotos$curren === void 0 ? void 0 : _refMainPhotos$curren.scrollToIndex(visibleIndex, false);
    }
  }, [isOpen]);
  React__namespace.useEffect(function () {
    var _window;
    if (!isOpen) return function () {};
    var timer = null;
    var clearTimeoutHandle = function clearTimeoutHandle() {
      if (timer) {
        clearTimeout(timer);
      }
    };
    var resizeHandle = function resizeHandle() {
      clearTimeoutHandle();
      timer = setTimeout(function () {
        var _refPreviewPhotos$cur2, _refMainPhotos$curren2;
        (_refPreviewPhotos$cur2 = refPreviewPhotos.current) === null || _refPreviewPhotos$cur2 === void 0 ? void 0 : _refPreviewPhotos$cur2.scrollToIndex(selectedIndex, false);
        (_refMainPhotos$curren2 = refMainPhotos.current) === null || _refMainPhotos$curren2 === void 0 ? void 0 : _refMainPhotos$curren2.scrollToIndex(selectedIndex, false);
      }, 100);
    };
    window.addEventListener('resize', resizeHandle);
    (_window = window) === null || _window === void 0 || (_window = _window.matchMedia('(orientation: portrait)')) === null || _window === void 0 ? void 0 : _window.addEventListener('change', resizeHandle);
    return function () {
      var _window2;
      clearTimeoutHandle();
      window.removeEventListener('resize', resizeHandle);
      (_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.matchMedia('(orientation: portrait)')) === null || _window2 === void 0 ? void 0 : _window2.removeEventListener('change', resizeHandle);
    };
  }, [isOpen, selectedIndex]);
  var onChangePreviewPhoto = function onChangePreviewPhoto(index) {
    var _refPreviewPhotos$cur3, _refMainPhotos$curren3;
    refIsAllowChangePreviewPhoto.current = false;
    setSelectedIndex(index);
    (_refPreviewPhotos$cur3 = refPreviewPhotos.current) === null || _refPreviewPhotos$cur3 === void 0 ? void 0 : _refPreviewPhotos$cur3.scrollToIndex(index);
    (_refMainPhotos$curren3 = refMainPhotos.current) === null || _refMainPhotos$curren3 === void 0 ? void 0 : _refMainPhotos$curren3.scrollToIndex(index);
  };
  var onChangeMainPhoto = function onChangeMainPhoto(index) {
    if (refIsAllowChangePreviewPhoto.current) {
      var _refPreviewPhotos$cur4;
      setSelectedIndex(index);
      (_refPreviewPhotos$cur4 = refPreviewPhotos.current) === null || _refPreviewPhotos$cur4 === void 0 ? void 0 : _refPreviewPhotos$cur4.scrollToIndex(index);
    }
    if (!refIsAllowChangePreviewPhoto.current && selectedIndex === index) {
      refIsAllowChangePreviewPhoto.current = true;
    }
  };
  var onPrevPhoto = function onPrevPhoto() {
    if (selectedIndex === 0) return;
    triggerInteraction('keyPressPrev');
    onChangePreviewPhoto(selectedIndex - 1);
  };
  var onNextPhoto = function onNextPhoto() {
    if (selectedIndex === items.length - 1) return;
    triggerInteraction('keyPressNext');
    onChangePreviewPhoto(selectedIndex + 1);
  };
  var onCloseHandle = function onCloseHandle() {
    onClose(selectedIndex);
  };
  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Backdrop.Backdrop, {
    isOpen: isOpen,
    onClick: onCloseHandle,
    zIndex: zIndex,
    isBodyScrollLock: true
  }), /*#__PURE__*/React__namespace.createElement(reactTransitionGroup.CSSTransition, {
    "in": isOpen,
    timeout: 240,
    classNames: css,
    unmountOnExit: true
    // onEnter={() => triggerInteraction('open')}
    // onExit={() => triggerInteraction('close')}
    ,
    onEntered: function onEntered() {
      return triggerInteraction('opened');
    },
    onExited: function onExited() {
      return triggerInteraction('closed');
    }
  }, /*#__PURE__*/React__namespace.createElement(Portal.Portal, null, /*#__PURE__*/React__namespace.createElement("div", {
    className: css.root,
    "data-qaid": "photo_gallery",
    "data-testid": "photo_gallery",
    style: {
      zIndex: zIndex
    }
  }, /*#__PURE__*/React__namespace.createElement(KeyPress.KeyPress, {
    code: "Escape",
    onKeyUp: function onKeyUp() {
      triggerInteraction('keyPressClose');
      onCloseHandle();
    }
  }), /*#__PURE__*/React__namespace.createElement(KeyPress.KeyPress, {
    code: "ArrowLeft",
    onKeyUp: onPrevPhoto
  }), /*#__PURE__*/React__namespace.createElement(KeyPress.KeyPress, {
    code: "ArrowRight",
    onKeyUp: onNextPhoto
  }), /*#__PURE__*/React__namespace.createElement("div", {
    className: css.layout
  }, /*#__PURE__*/React__namespace.createElement("header", {
    className: css.layoutHeader
  }, /*#__PURE__*/React__namespace.createElement(Header, {
    title: title,
    selectedIndex: selectedIndex,
    itemsLength: items.length,
    onClose: onCloseHandle,
    triggerInteraction: triggerInteraction
  })), /*#__PURE__*/React__namespace.createElement("div", {
    className: css.layoutContent
  }, /*#__PURE__*/React__namespace.createElement("section", {
    className: css.layoutSection
  }, /*#__PURE__*/React__namespace.createElement(MainPhotos, {
    ref: refMainPhotos,
    items: items,
    onChange: onChangeMainPhoto,
    triggerInteraction: triggerInteraction
  })), items.length > 1 && /*#__PURE__*/React__namespace.createElement("aside", {
    className: css.layoutAside
  }, /*#__PURE__*/React__namespace.createElement(PreviewPhotos, {
    ref: refPreviewPhotos,
    items: items,
    selectedIndex: selectedIndex,
    onChange: onChangePreviewPhoto,
    triggerInteraction: triggerInteraction
  }))))))));
};
PhotoGallery.displayName = 'PhotoGallery';

exports.PhotoGallery = PhotoGallery;

require('./style.development.v2.css');
