"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _slateReact = require("slate-react");
var _reactImageLightbox = _interopRequireDefault(require("@seafile/react-image-lightbox"));
var _helper = require("../helper");
require("@seafile/react-image-lightbox/style.css");
require("./style.css");
const ImagePreviewer = _ref => {
  let {
    imgUrl,
    toggleImagePreviewer
  } = _ref;
  const editor = (0, _slateReact.useSlateStatic)();
  let images = (0, _helper.getImagesUrlList)(editor.children);
  const [imageIndex, setImageIndex] = (0, _react.useState)(images.findIndex(item => item === imgUrl));
  const mainSrc = images[imageIndex];
  const moveToPrevImage = () => {
    const currentImageIndex = (imageIndex + images.length - 1) % images.length;
    setImageIndex(currentImageIndex);
  };
  const moveToNextImage = () => {
    const newImageIndex = (imageIndex + 1) % images.length;
    setImageIndex(newImageIndex);
  };
  return /*#__PURE__*/_react.default.createElement(_reactImageLightbox.default, {
    imageItems: images,
    currentIndex: imageIndex,
    setImageIndex: setImageIndex,
    wrapperClassName: "sf-editor-image-previewer",
    imageTitle: /*#__PURE__*/_react.default.createElement(ImageTitleElement, {
      mainSrc: mainSrc,
      imageIndex: imageIndex,
      images: images
    }),
    mainSrc: mainSrc,
    toolbarButtons: [],
    nextSrc: images[(imageIndex + 1) % images.length],
    prevSrc: images[(imageIndex + images.length - 1) % images.length],
    onCloseRequest: toggleImagePreviewer,
    reactModalProps: {
      shouldReturnFocusAfterClose: true,
      preventScroll: true
    },
    onMovePrevRequest: moveToPrevImage,
    onMoveNextRequest: moveToNextImage,
    imagePadding: 70,
    reactModalStyle: {
      overlay: {
        zIndex: 1071
      }
    }
  });
};
var _default = exports.default = ImagePreviewer;
const ImageTitleElement = props => {
  const {
    mainSrc,
    imageIndex,
    images
  } = props;
  const getImgTitle = () => {
    try {
      return mainSrc ? decodeURI(mainSrc.slice(mainSrc.lastIndexOf('/') + 1)) : '';
    } catch (error) {
      console.log('error', error);
      return '';
    }
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
    className: "d-flex"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "text-truncate"
  }, getImgTitle()), /*#__PURE__*/_react.default.createElement("span", {
    className: "flex-shrink-0"
  }, "(", imageIndex + 1, "/", images.length, ")")));
};