"use strict";

require("core-js/modules/es.symbol.js");
require("core-js/modules/es.array.filter.js");
require("core-js/modules/es.array.iterator.js");
require("core-js/modules/es.array.push.js");
require("core-js/modules/es.object.define-properties.js");
require("core-js/modules/es.object.define-property.js");
require("core-js/modules/es.object.get-own-property-descriptor.js");
require("core-js/modules/es.object.get-own-property-descriptors.js");
require("core-js/modules/es.object.keys.js");
require("core-js/modules/es.string.iterator.js");
require("core-js/modules/es.weak-map.js");
require("core-js/modules/esnext.iterator.filter.js");
require("core-js/modules/esnext.weak-map.delete-all.js");
require("core-js/modules/esnext.weak-map.emplace.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WaterMark = void 0;
require("core-js/modules/es.array.concat.js");
require("core-js/modules/es.array.for-each.js");
require("core-js/modules/es.array.is-array.js");
require("core-js/modules/es.number.constructor.js");
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.for-each.js");
require("core-js/modules/web.dom-collections.for-each.js");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
require("./index.css");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2["default"])(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; }
/**
 * 返回当前显示设备的物理像素分辨率与CSS像素分辨率之比
 *
 * @param context
 * @see api 有些废弃了，其实类型 CanvasRenderingContext2D
 */
var getPixelRatio = function getPixelRatio(context) {
  if (!context) {
    return 1;
  }
  var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
  return (window.devicePixelRatio || 1) / backingStore;
};
var getSingleFontSize = function getSingleFontSize(width) {
  var fontSize = 36;
  if (width >= 1920) {
    fontSize = 50;
  } else if (width > 1200 && width < 1920) {
    fontSize = 40;
  } else if (width >= 400 && width < 600) {
    fontSize = 24;
  } else if (width >= 220 && width < 400) {
    fontSize = 14;
  } else if (width < 220) {
    fontSize = 12;
  }
  return fontSize;
};
var getMultiFontSize = function getMultiFontSize(width) {
  var fontSize = 24;
  if (width < 600) {
    fontSize = 16;
  } else if (width >= 600 && width < 1000) {
    fontSize = 20;
  }
  return fontSize;
};
var WaterMark = exports.WaterMark = function WaterMark(props) {
  var _props$multiLine = props.multiLine,
    multiLine = _props$multiLine === void 0 ? true : _props$multiLine,
    children = props.children,
    style = props.style,
    className = props.className,
    markStyle = props.markStyle,
    markClassName = props.markClassName,
    _props$zIndex = props.zIndex,
    zIndex = _props$zIndex === void 0 ? 9 : _props$zIndex,
    _props$gapX = props.gapX,
    gapX = _props$gapX === void 0 ? multiLine ? 180 : 0 : _props$gapX,
    _props$gapY = props.gapY,
    gapY = _props$gapY === void 0 ? multiLine ? 190 : 0 : _props$gapY,
    _props$width = props.width,
    width = _props$width === void 0 ? 120 : _props$width,
    _props$height = props.height,
    height = _props$height === void 0 ? 64 : _props$height,
    _props$rotate = props.rotate,
    rotate = _props$rotate === void 0 ? -18 : _props$rotate,
    image = props.image,
    content = props.content,
    offsetLeft = props.offsetLeft,
    offsetTop = props.offsetTop,
    _props$fontStyle = props.fontStyle,
    fontStyle = _props$fontStyle === void 0 ? 'normal' : _props$fontStyle,
    _props$fontWeight = props.fontWeight,
    fontWeight = _props$fontWeight === void 0 ? 'normal' : _props$fontWeight,
    _props$fontColor = props.fontColor,
    fontColor = _props$fontColor === void 0 ? 'rgba(180,184,200,.8)' : _props$fontColor,
    _props$fontSize = props.fontSize,
    fontSize = _props$fontSize === void 0 ? multiLine ? getMultiFontSize(width) : getSingleFontSize(width) : _props$fontSize,
    _props$fontFamily = props.fontFamily,
    fontFamily = _props$fontFamily === void 0 ? 'sans-serif' : _props$fontFamily,
    customizePrefixCls = props.prefixCls;
  var wrapperCls = (0, _classnames["default"])("fcr-watermark-wrapper", className);
  var waterMakrCls = (0, _classnames["default"])('watermark', markClassName);
  var _useState = (0, _react.useState)(''),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    base64Url = _useState2[0],
    setBase64Url = _useState2[1];
  (0, _react.useEffect)(function () {
    if (width == 0 || height == 0) {
      return;
    }
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var ratio = getPixelRatio(ctx);
    var widthNum = (gapX + width) * ratio;
    var heightNum = (gapY + height) * ratio;
    var canvasWidth = "".concat(widthNum, "px");
    var canvasHeight = "".concat(heightNum, "px");
    var canvasOffsetLeft = offsetLeft || gapX / 2;
    var canvasOffsetTop = offsetTop || gapY / 2;
    canvas.setAttribute('width', canvasWidth);
    canvas.setAttribute('height', canvasHeight);
    if (ctx) {
      var markWidth = width * ratio;
      var markHeight = height * ratio;
      // 旋转字符 rotate
      if (multiLine) {
        ctx.translate(canvasOffsetLeft * ratio, canvasOffsetTop * ratio);
      } else {
        ctx.translate(markWidth / 2, markHeight / 2);
      }
      ctx.rotate(Math.PI / 180 * Number(rotate));
      if (image) {
        var img = new Image();
        img.crossOrigin = 'anonymous';
        img.referrerPolicy = 'no-referrer';
        img.src = image;
        img.onload = function () {
          ctx.drawImage(img, 0, 0, markWidth, markHeight);
          setBase64Url(canvas.toDataURL());
        };
      } else if (content) {
        var markSize = Number(fontSize) * ratio;
        ctx.font = "".concat(fontStyle, " normal ").concat(fontWeight, " ").concat(markSize, "px/").concat(markHeight, "px ").concat(fontFamily);
        ctx.fillStyle = fontColor;
        if (Array.isArray(content)) {
          content === null || content === void 0 || content.forEach(function (item, index) {
            if (multiLine) {
              ctx.fillText(item, 0, index * Number(fontSize) * 2);
            } else {
              var textMe = ctx.measureText(item);
              var drawWidth = textMe.width;
              var count = Math.floor(widthNum / drawWidth);
              var gap = (widthNum - drawWidth * count) / 2;
              var oneLineGap = 4 * ratio;
              if (gap < oneLineGap) {
                gap = 6;
                count = count--;
              }
              if (count === 1) {
                ctx.fillText(item, -textMe.width / 2, index * Number(fontSize) * 2);
              } else {
                var mostLeft = -widthNum / 2 - 10;
                var mostBottom = 0;
                var prevHeight = -mostBottom / 2 + 0 * ratio;
                var prevWidth = mostLeft;
                for (var i = 0; i < count; i++) {
                  var _x = mostLeft;
                  var _y = prevHeight;
                  if (i === 0) {
                    _x = mostLeft;
                  } else {
                    _x = prevWidth + drawWidth + gap;
                    prevHeight = _y;
                    prevWidth = _x;
                  }
                  ctx.fillText(item, _x, _y);
                }
              }
            }
          });
        } else {
          ctx.fillText(content, 0, 0);
        }
        setBase64Url(canvas.toDataURL());
      }
    } else {
      console.error('当前环境不支持Canvas');
    }
  }, [gapX, gapY, offsetLeft, offsetTop, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: _objectSpread({}, style),
    className: wrapperCls,
    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: waterMakrCls,
      style: _objectSpread({
        zIndex: zIndex,
        position: 'absolute',
        left: 0,
        top: 0,
        width: '100%',
        height: '100%',
        backgroundSize: "".concat(gapX + width, "px"),
        pointerEvents: 'none',
        backgroundRepeat: "".concat(multiLine ? 'repeat' : 'no-repeat'),
        backgroundImage: "url('".concat(base64Url, "')")
      }, markStyle)
    })]
  });
};