import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useEffect, useRef, useState } from 'react';
import Loading from "../Loading";
import { HtmlWrap } from "./HtmlWrap";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Html = function Html(_ref) {
  var media = _ref.media,
    mediaVisible = _ref.mediaVisible,
    _ref$isDetail = _ref.isDetail,
    isDetail = _ref$isDetail === void 0 ? true : _ref$isDetail;
  var contentElement = useRef(null);
  var _useState = useState(media),
    _useState2 = _slicedToArray(_useState, 2),
    url = _useState2[0],
    setUrl = _useState2[1];
  var _useState3 = useState(),
    _useState4 = _slicedToArray(_useState3, 2),
    iframeVisible = _useState4[0],
    setIframeVisible = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    isLoaded = _useState6[0],
    setIsLoaded = _useState6[1];
  useEffect(function () {
    var a = media.lastIndexOf('http');
    if (a === -1) {
      return;
    }
    var b = media.slice(a);
    try {
      var c = decodeURIComponent(decodeURIComponent(b));
      if (c.includes('</svg>')) {
        setIframeVisible(false);
        setUrl("data:image/svg+xml;base64,".concat(window.btoa(unescape(encodeURIComponent(media)))));
        return;
      }
      setIframeVisible(true);
      setUrl(c);
    } catch (_unused) {
      try {
        if (media.includes('</svg>')) {
          setIframeVisible(false);
          setUrl("data:image/svg+xml;base64,".concat(window.btoa(unescape(encodeURIComponent(media)))));
        }
      } catch (_unused2) {}
    }
  }, [media]);
  return /*#__PURE__*/_jsx(HtmlWrap, {
    mediaVisible: mediaVisible,
    children: /*#__PURE__*/_jsxs("div", {
      ref: contentElement,
      className: "hideScrollbar",
      children: [/*#__PURE__*/_jsx(Loading, {
        cssStyle: "\n          display: ".concat(isDetail && isLoaded && 'none', ";\n          z-index: ").concat(!isDetail && isLoaded ? '-1' : '1', ";\n          background: ").concat(isDetail && 'white', ";\n        ")
      }), iframeVisible ? /*#__PURE__*/_jsx("iframe", {
        title: "iframe",
        src: url,
        allowFullScreen: true,
        name: "mapFrame",
        scrolling: "no",
        frameBorder: "0",
        width: "100%",
        height: "100%",
        onLoad: function onLoad() {
          return setIsLoaded(true);
        },
        className: "htmlIframe"
      }) : /*#__PURE__*/_jsx("img", {
        src: url,
        onLoad: function onLoad() {
          return setIsLoaded(true);
        },
        className: "htmlImg"
      })]
    })
  });
};
export default Html;