import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from 'react';
import Loading from "../Loading";
import { ImageWrap } from "./ImageWrap";
import { jsonProxy2, revokeJsonProxy, revokeJsonProxy2 } from "../..\\utils\\constants";
import compress from "../..\\utils\\compress";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Image = function Image(_ref) {
  var media = _ref.media,
    _ref$cssStyle = _ref.cssStyle,
    cssStyle = _ref$cssStyle === void 0 ? '' : _ref$cssStyle,
    _ref$imgCssStyle = _ref.imgCssStyle,
    imgCssStyle = _ref$imgCssStyle === void 0 ? '' : _ref$imgCssStyle,
    mediaMimeType = _ref.mediaMimeType,
    needCompress = _ref.needCompress,
    _onLoad = _ref.onLoad,
    isDetail = _ref.isDetail,
    _ref$height = _ref.height,
    height = _ref$height === void 0 ? 'auto' : _ref$height,
    _ref$width = _ref.width,
    width = _ref$width === void 0 ? 300 : _ref$width;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    hasChangedProxy = _useState2[0],
    setHasChangedProxy = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    hasRemovedProxy = _useState4[0],
    setHasRemovedProxy = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    isLoaded = _useState6[0],
    setIsLoaded = _useState6[1];
  var isGif = mediaMimeType === null || mediaMimeType === void 0 ? void 0 : mediaMimeType.includes('image/gif');
  return /*#__PURE__*/_jsx(ImageWrap, {
    cssStyle: cssStyle,
    imgCssStyle: imgCssStyle,
    height: height,
    width: width,
    children: /*#__PURE__*/_jsxs("div", {
      className: "imageContainer",
      children: [/*#__PURE__*/_jsx(Loading, {
        cssStyle: "\n          display: ".concat(isDetail && isLoaded && 'none !important', ";\n          ").concat(cssStyle, "\n        ")
      }), /*#__PURE__*/_jsx("img", {
        className: "image",
        src: media,
        onLoad: function onLoad(el) {
          if (isGif || !needCompress || media.includes('https://images.mirror-media.xyz/')) {
            el.target.style.visibility = 'visible';
            _onLoad === null || _onLoad === void 0 ? void 0 : _onLoad();
            setIsLoaded === null || setIsLoaded === void 0 ? void 0 : setIsLoaded(true);
            return;
          }
          compress(el.currentTarget.src, el.currentTarget, undefined, _onLoad, setIsLoaded);
        },
        onError: function onError(el) {
          if (!hasChangedProxy) {
            var newImage = jsonProxy2(revokeJsonProxy(media));
            setHasChangedProxy(true);
            if (isGif || !needCompress) {
              el.currentTarget.src = newImage;
              return;
            }
            compress(newImage, el.currentTarget, true);
          } else if (!hasRemovedProxy) {
            var _newImage = revokeJsonProxy2(media);
            setHasRemovedProxy(true);
            if (isGif || !needCompress) {
              el.currentTarget.src = _newImage;
              return;
            }
            compress(_newImage, el.currentTarget, true);
          }
        }
      })]
    })
  });
};
export default Image;