function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
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."); }
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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useMemo, useEffect, useState, useCallback, useRef } from 'react';
import classNames from 'classnames';
import "./PreviewStyles/ImagePreview.less";
// @ts-ignore
// import ReactHtmlParser from "react-html-parser"; // react16上使用,react18上不能使用否则会报警
import HtmlReactParse from 'html-react-parser'; // react18上使用
import Thumbnail from "./Thumbnail";
import SliderContent from "./SliderContent";
import { useUniqueId } from "./hook/uniqueId";
var delay = 40;
var ImagePreview = function ImagePreview(props) {
  var open = props.open,
    children = props.children,
    onClose = props.onClose,
    current = props.current,
    hasThumbnail = props.hasThumbnail,
    mode = props.mode,
    galleryItems = props.galleryItems;
  var prefixCls = 'spec-image-preview';
  var coreId = useUniqueId(prefixCls);
  var $outer = useRef();
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showDelay = _useState2[0],
    setShowDelay = _useState2[1];
  var _useState3 = useState(0),
    _useState4 = _slicedToArray(_useState3, 2),
    thumbCurrent = _useState4[0],
    setThumbCurrent = _useState4[1];
  var _useState5 = useState(0),
    _useState6 = _slicedToArray(_useState5, 2),
    thumbSlidePrev = _useState6[0],
    setThumbSlidePrev = _useState6[1];
  var _useState7 = useState(0),
    _useState8 = _slicedToArray(_useState7, 2),
    thumbSlideNext = _useState8[0],
    setThumbSlideNext = _useState8[1];
  var galleryCount = useMemo(function () {
    if (galleryItems) {
      return galleryItems.length;
    }
    return React.Children.count(children);
  }, [children, galleryItems]);
  var onClickClose = function onClickClose() {
    if (mode !== 'inline') {
      setShowDelay(false);
      setTimeout(function () {
        onClose === null || onClose === void 0 || onClose();
      }, 300);
    }
  };

  // 切换上下图片
  var handleTurning = useCallback(function (key, index) {
    setThumbSlidePrev(thumbCurrent);
    var newCurrent = 0;
    if (key === 'prev') {
      newCurrent = thumbCurrent === 0 ? galleryCount - 1 : thumbCurrent - 1;
    }
    if (key === 'next') {
      newCurrent = thumbCurrent === galleryCount - 1 ? 0 : thumbCurrent + 1;
    }
    if (key === 'number') {
      newCurrent = index;
    }
    setThumbCurrent(newCurrent);
    setTimeout(function () {
      setThumbSlideNext(newCurrent);
    }, 50);
  }, [galleryCount, thumbCurrent]);

  // const enableThumbDrag =()=> {
  //   let thumbDragUtils: ThumbDragUtils = {
  //     cords: {
  //       startX: 0,
  //       endX: 0,
  //     },
  //     isMoved: false,
  //     newTranslateX: 0,
  //     startTime: new Date(),
  //     endTime: new Date(),
  //     touchMoveTime: 0,
  //   };
  //   if (thumbOuter.current) {
  //     thumbOuter.current.classList.add('spec-image-preview-grab')
  //   }
  // }
  useEffect(function () {
    if (mode === 'inline') {
      setShowDelay(true);
    } else {
      if (open) {
        setTimeout(function () {
          setShowDelay(true);
        }, delay);
      }
    }
    return function () {};
  }, [open, mode]);
  useEffect(function () {
    if (mode === 'inline') {
      setThumbCurrent(current || 0);
    } else {
      if (open) {
        setThumbCurrent(current || 0);
      }
    }
  }, [open, current, mode]);

  // const componentClassName = 'spec-image-preview';
  // const [wrapSSR, hashId] = useStyle(componentClassName);
  return /*#__PURE__*/React.createElement("div", {
    id: coreId,
    className: classNames('spec-image-preview-container', mode === 'inline' ? 'spec-image-preview-inline' : '', mode === 'inline' || open ? 'spec-image-preview-show' : '', showDelay ? 'spec-image-preview-show-in' : '')
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames('spec-image-preview-backdrop', mode === 'inline' || showDelay ? 'in' : '')
  }), /*#__PURE__*/React.createElement("div", {
    className: classNames('spec-image-preview-outer spec-image-preview-use-css3  spec-image-preview-css3 spec-image-preview-fade spec-image-preview-grab spec-image-preview-animate-thumb', showDelay ? 'spec-image-preview-components-open' : '', showDelay ? 'spec-image-preview-zoom-from-image' : ''),
    ref: $outer
  }, /*#__PURE__*/React.createElement(SliderContent, {
    hasThumbnail: hasThumbnail && galleryCount > 1,
    thumbCurrent: thumbCurrent,
    onTurning: handleTurning,
    thumbSlidePrev: thumbSlidePrev,
    thumbSlideNext: thumbSlideNext,
    coreId: coreId,
    galleryCount: galleryCount,
    outerRef: $outer,
    onUpdateTurning: function onUpdateTurning(index) {
      return handleTurning('number', index);
    },
    onClose: onClickClose
  }, children), /*#__PURE__*/React.createElement("div", {
    className: 'spec-image-preview-toolbar'
  }, /*#__PURE__*/React.createElement("div", {
    className: 'spec-image-preview-counter'
  }, /*#__PURE__*/React.createElement("span", {
    className: 'spec-image-preview-counter-current'
  }, thumbCurrent + 1), " /", /*#__PURE__*/React.createElement("span", {
    className: 'spec-image-preview-counter-all'
  }, galleryCount)), mode === 'inline' ? null : /*#__PURE__*/React.createElement("a", {
    className: 'spec-image-preview-close spec-image-preview-icon',
    onClick: onClickClose
  })), /*#__PURE__*/React.createElement("div", {
    className: classNames('spec-image-preview-components')
  }, /*#__PURE__*/React.createElement("div", {
    className: 'spec-image-preview-sub-html'
  }, React.Children.map(children, function (item, index) {
    if (thumbCurrent === index) {
      // react16用法
      // return item.props['data-sub-html'] ? ReactHtmlParser(item.props['data-sub-html']) : null
      // react18用法
      return item.props['data-sub-html'] ? HtmlReactParse(item.props['data-sub-html']) : null;
    }
    return null;
  })), hasThumbnail && galleryCount > 1 && /*#__PURE__*/React.createElement(Thumbnail, {
    galleryCount: galleryCount,
    thumbCurrent: thumbCurrent,
    coreId: coreId,
    onClickThumbItem: function onClickThumbItem(key, index) {
      return handleTurning(key, index);
    }
  }, children))));
};
export default ImagePreview;