"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 _reactI18next = require("react-i18next");
var _classnames = _interopRequireDefault(require("classnames"));
var _helper = require("../helper");
var _imagePreviewer = _interopRequireDefault(require("./image-previewer"));
var _constants = require("../../../../constants");
require("./style.css");
/* eslint-disable react-hooks/rules-of-hooks */

const renderImage = (_ref, editor) => {
  var _element$data, _element$data2, _element$data3, _element$data4;
  let {
    attributes,
    children,
    element
  } = _ref;
  const [isLoadingImage, setIsLoadingImage] = (0, _react.useState)(element === null || element === void 0 ? void 0 : (_element$data = element.data) === null || _element$data === void 0 ? void 0 : _element$data.init);
  const [isError, setIsError] = (0, _react.useState)(false);
  const [isResizing, setIsResizing] = (0, _react.useState)(false);
  const [isFullScreening, setIsFullScreening] = (0, _react.useState)(false);
  const [imgSizeInfo, setImgSizeInfo] = (0, _react.useState)({
    height: 0,
    width: 0
  });
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
  const imgRef = (0, _react.useRef)(null);
  const resizerRef = (0, _react.useRef)();
  const isSelected = (0, _slateReact.useSelected)();
  (0, _react.useEffect)(() => {
    const {
      data = {}
    } = element;
    if (!data.init) return;
    const url = data.src;
    (0, _helper.lazyLoadImage)(url, image => {
      setIsLoadingImage(false);
      setIsError(false);
    }, () => {
      setIsLoadingImage(false);
      setIsError(true);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const handleStartResize = (0, _react.useCallback)(event => {
    event.stopPropagation();
    const {
      clientHeight: height,
      clientWidth: width
    } = imgRef.current;
    setIsResizing(true);
    setImgSizeInfo({
      width,
      height
    });
    const handleMouseMove = event => {
      event.preventDefault();
      event.stopPropagation();
      const img = imgRef.current;
      const resizer = resizerRef.current;
      if (!resizer) return;
      const changeX = event.clientX - resizer.getBoundingClientRect().left - 5;
      const imageWidth = img.width + changeX;
      const imageHeight = imageWidth / img.naturalWidth * img.naturalHeight;
      if (imageWidth < 20) return;
      img.width = imageWidth;
      img.height = imageHeight;
      setImgSizeInfo({
        width: img.clientWidth,
        height: img.clientHeight
      });
    };
    const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      if (!isResizing) {
        setIsResizing(false);
        const {
          clientHeight: height,
          clientWidth: width
        } = imgRef.current;
        (0, _helper.updateImage)(editor, {
          ...element.data,
          width,
          height
        });
      }
      document.removeEventListener('mouseup', handleMouseUp);
    };
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  }, [editor, element.data, isResizing]);
  const toggleImagePreviewer = (0, _react.useCallback)(event => {
    event.preventDefault();
    setIsFullScreening(false);
  }, []);
  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, attributes, {
    contentEditable: false,
    className: "sf-image-wrapper"
  }), isLoadingImage && /*#__PURE__*/_react.default.createElement("span", null, t('Image_is_uploading'), "..."), !isLoadingImage && /*#__PURE__*/_react.default.createElement("img", {
    ref: imgRef,
    className: (0, _classnames.default)('sf-image', {
      'selected': isSelected,
      'error': isError
    }),
    alt: (element === null || element === void 0 ? void 0 : (_element$data2 = element.data) === null || _element$data2 === void 0 ? void 0 : _element$data2.alt) || ' ' + t('Image_loading_failed'),
    src: element === null || element === void 0 ? void 0 : (_element$data3 = element.data) === null || _element$data3 === void 0 ? void 0 : _element$data3.src,
    width: element === null || element === void 0 ? void 0 : element.data.width,
    height: element === null || element === void 0 ? void 0 : element.data.height
  }), isSelected && !isLoadingImage && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
    ref: resizerRef,
    className: "resizer",
    onMouseDown: handleStartResize
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: "full-screen",
    contentEditable: false,
    onClick: () => setIsFullScreening(true)
  }, /*#__PURE__*/_react.default.createElement("i", {
    className: 'iconfont icon-fullscreen',
    title: t('Full_screen')
  }))), isResizing && /*#__PURE__*/_react.default.createElement("span", {
    className: "image-size-info-tooltip"
  }, `${t('Width')}:${imgSizeInfo.width}  ${t('Height')}:${imgSizeInfo.height}`), isFullScreening && /*#__PURE__*/_react.default.createElement(_imagePreviewer.default, {
    imgUrl: element === null || element === void 0 ? void 0 : (_element$data4 = element.data) === null || _element$data4 === void 0 ? void 0 : _element$data4.src,
    toggleImagePreviewer: toggleImagePreviewer
  }), children);
};
var _default = exports.default = renderImage;