function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var _excluded = ["src", "data", "params", "readOnly", "preview", "watermark", "onChange"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
import Instance from "./instance.js";
import BridgeBrowser from "./../../utils/Bridge/browser";
import LocaleUtil from "./../../utils/LocaleUtil";
var loaded = 0; // eslint-disable-line

var Vott = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var src = _ref.src,
    _ref$data = _ref.data,
    data = _ref$data === void 0 ? [] : _ref$data,
    _ref$params = _ref.params,
    params = _ref$params === void 0 ? {} : _ref$params,
    _ref$readOnly = _ref.readOnly,
    readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly,
    _ref$preview = _ref.preview,
    preview = _ref$preview === void 0 ? true : _ref$preview,
    watermark = _ref.watermark,
    onChange = _ref.onChange,
    props = _objectWithoutProperties(_ref, _excluded);
  var rootRef = useRef(null);
  var instance = useRef(null);
  useImperativeHandle(ref, function () {
    return {
      rootDOM: rootRef.current,
      instance: instance.current,
      getRootDOM: function getRootDOM() {
        return rootRef.current;
      },
      getInstance: function getInstance() {
        return instance.current;
      }
    };
  });
  useEffect(function () {
    if (instance.current) instance.current.updateParams(params);
    // eslint-disable-next-line
  }, [JSON.stringify(params)]);
  useEffect(function () {
    if (instance.current) instance.current.setReadOnly(readOnly);
  }, [readOnly]);
  useEffect(function () {
    if (instance.current) {
      instance.current.updateParams({
        src: src
      });
      loaded = 0;
      instance.current.update();
    }
  }, [src]);
  useEffect(function () {
    if (instance.current) {
      instance.current.updateParams({
        data: data
      });
      loaded = 0;
      instance.current.update();
    }
  }, [data]);
  useEffect(function () {
    instance.current = new Instance(rootRef.current, _objectSpread({
      readOnly: readOnly,
      data: data,
      src: src,
      // 图片加载成功
      onSuccess: handleSuccess,
      onChange: handleChange
    }, params));
  }, []); // eslint-disable-line

  // 更新句柄, 防止synchronization模式, 每次组件在render的时候都生成上次render的state、function、effects
  if (instance.current) {
    instance.current.params.onChange = handleChange;
  }
  function handleChange(s, item, list) {
    if (rootRef.current) s.currentTarget = rootRef.current;
    if (onChange) onChange(list, {
      current: item,
      instance: s
    });
  }
  function handleSuccess() {
    loaded = 1;
  }
  function handleClick() {
    previewImage();
  }
  function previewImage() {
    if (!readOnly || !preview || !loaded) return;
    // 克隆Wrapper
    var wrapper = instance.current.wrapper;
    var previewHTML = "<div class=\"preview-layer\"> <div class=\"vott-wrapper\">".concat(wrapper.innerHTML, "</div></div>");
    BridgeBrowser.previewImage({
      urls: [src],
      layerHTML: previewHTML,
      success: function success(s) {
        var layer = s.container.querySelector('.preview-layer');
        wrapper = s.container.querySelector('.vott-wrapper');
        var svg = wrapper.querySelector('.vott-svg');
        svg.style.backgroundImage = 'initial';
        // 计算宽高
        var width = svg.style.width.replace('px', '');
        var height = svg.style.height.replace('px', '');
        var scale = 1;
        if (width > height) {
          // 宽图计算
          scale = layer.clientWidth / width;
        } else {
          // 长图计算
          scale = layer.clientHeight / height;
        }
        wrapper.style.WebkitTransform = "scale(".concat(scale, ") translate(-50%,-50%)");
        wrapper.style.WebkitTransformOrigin = "0 0";
      }
    });
  }
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: "vott-container".concat(props.className ? ' ' + props.className : ''),
    ref: rootRef
  }), /*#__PURE__*/React.createElement("div", {
    className: "vott-wrapper",
    onClick: handleClick
  }, /*#__PURE__*/React.createElement("svg", {
    className: "vott-svg",
    preserveAspectRatio: "none"
  }), watermark && /*#__PURE__*/React.createElement("div", {
    className: "vott-watermark",
    style: {
      backgroundImage: "url(".concat(watermark, ")")
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "vott-loading active"
  }, /*#__PURE__*/React.createElement("div", {
    className: "vott-loading-icon"
  })), /*#__PURE__*/React.createElement("div", {
    className: "vott-error"
  }, /*#__PURE__*/React.createElement("div", {
    className: "vott-error-icon"
  }), /*#__PURE__*/React.createElement("div", {
    className: "vott-error-text"
  }, LocaleUtil.locale('图片加载失败', 'SeedsUI_image_load_failed'))));
});
export default Vott;