import { createVNode as _createVNode } from "vue";
import { defineComponent, watchEffect, ref } from 'vue';
import useConfigInject from '../_util/hooks/useConfigInject';
function getRatio(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;
}
export var watermarkProps = function watermarkProps() {
  return {
    cross: {
      type: Boolean,
      default: false
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    width: {
      type: Number,
      default: 32
    },
    height: {
      type: Number,
      default: 32
    },
    zIndex: {
      type: Number,
      default: 10
    },
    xGap: {
      type: Number,
      default: 0
    },
    yGap: {
      type: Number,
      default: 0
    },
    yOffset: {
      type: Number,
      default: 0
    },
    xOffset: {
      type: Number,
      default: 0
    },
    rotate: {
      type: Number,
      default: 0
    },
    image: {
      type: String,
      default: undefined
    },
    imageOpacity: {
      type: Number,
      default: 1
    },
    imageHeight: {
      type: Number,
      default: undefined
    },
    imageWidth: {
      type: Number,
      default: undefined
    },
    content: {
      type: String,
      default: undefined
    },
    class: {
      type: String,
      default: undefined
    },
    selectable: {
      type: Boolean,
      default: true
    },
    fontSize: {
      type: Number,
      default: 14
    },
    fontFamily: String,
    fontStyle: {
      type: String,
      default: 'normal'
    },
    fontVariant: {
      type: String,
      default: ''
    },
    fontWeight: {
      type: Number,
      default: 400
    },
    fontColor: {
      type: String,
      default: 'rgba(128, 128, 128, .3)'
    },
    fontStretch: {
      type: String,
      default: ''
    },
    lineHeight: {
      type: Number,
      default: 14
    },
    globalRotate: {
      type: Number,
      default: 0
    }
  };
};
var Watermark = defineComponent({
  name: 'PfWatermark',
  props: watermarkProps(),
  setup: function setup(props, _ref) {
    var _window;
    var slots = _ref.slots;
    var base64UrlRef = ref('');
    var canvas = (_window = window) !== null && _window !== void 0 && _window.innerHeight ? document.createElement('canvas') : null;
    var ctx = canvas ? canvas.getContext('2d') : null;
    var fontsReadyRef = ref(false);
    watchEffect(function () {
      if (!canvas) return;
      void fontsReadyRef.value;
      var ratio = getRatio(ctx);
      var xGap = props.xGap,
        yGap = props.yGap,
        width = props.width,
        height = props.height,
        yOffset = props.yOffset,
        xOffset = props.xOffset,
        rotate = props.rotate,
        image = props.image,
        content = props.content,
        fontColor = props.fontColor,
        fontStyle = props.fontStyle,
        fontVariant = props.fontVariant,
        fontStretch = props.fontStretch,
        fontWeight = props.fontWeight,
        fontFamily = props.fontFamily,
        fontSize = props.fontSize,
        lineHeight = props.lineHeight;
      var canvasWidth = (xGap + width) * ratio;
      var canvasHeight = (yGap + height) * ratio;
      var canvasOffsetLeft = xOffset * ratio;
      var canvasOffsetTop = yOffset * ratio;
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
      if (ctx) {
        ctx.translate(0, 0);
        // const markWidth = width * ratio
        // const markHeight = height * ratio
        ctx.rotate(rotate * (Math.PI / 180));
        if (image) {
          var img = new Image();
          img.crossOrigin = 'anonymous';
          img.referrerPolicy = 'no-referrer';
          img.src = image;
          img.onload = function () {
            ctx.globalAlpha = props.imageOpacity;
            var imageWidth = props.imageWidth,
              imageHeight = props.imageHeight;
            ctx.drawImage(img, canvasOffsetLeft, canvasOffsetTop, (props.imageWidth || (imageHeight ? img.width * imageHeight / img.height : img.width)) * ratio, (props.imageHeight || (imageWidth ? img.height * imageWidth / img.width : img.height)) * ratio);
            base64UrlRef.value = canvas.toDataURL();
          };
        } else if (content) {
          ctx.font = "".concat(fontStyle, " ").concat(fontVariant, " ").concat(fontWeight, " ").concat(fontStretch, " ").concat(fontSize * ratio, "px/").concat(lineHeight * ratio, "px ").concat(fontFamily || 'SimSun, sans-serif');
          ctx.fillStyle = fontColor;
          ctx.fillText(content, canvasOffsetLeft, canvasOffsetTop + lineHeight * ratio);
          base64UrlRef.value = canvas.toDataURL();
        }
      } else {
        console.error('watermark', 'Canvas is not supported in the browser.');
      }
    });
    return function () {
      var _slots$default;
      var globalRotate = props.globalRotate,
        fullscreen = props.fullscreen,
        zIndex = props.zIndex,
        propsClass = props.class;
      var _useConfigInject = useConfigInject('watermark', props),
        prefixCls = _useConfigInject.prefixCls;
      var mergedClsPrefix = prefixCls.value;
      var isFullScreenGlobalRotate = globalRotate !== 0 && fullscreen;
      var rotatedImageOffset = 'max(142vh, 142vw)';
      var watermarkNode = _createVNode("div", {
        "class": ["".concat(mergedClsPrefix), globalRotate !== 0 && "".concat(mergedClsPrefix, "-global-rotate"), fullscreen && "".concat(mergedClsPrefix, "-fullscreen"), "".concat(propsClass)],
        "style": {
          transform: globalRotate ? "translateX(-50%) translateY(-50%) rotate(".concat(globalRotate, "deg)") : undefined,
          zIndex: isFullScreenGlobalRotate ? undefined : zIndex,
          backgroundSize: "".concat(props.xGap + props.width, "px"),
          backgroundPosition: globalRotate === 0 ? props.cross ? "".concat(props.width / 2, "px ").concat(props.height / 2, "px, 0 0") : '' : props.cross ? "calc(".concat(rotatedImageOffset, " + ").concat(props.width / 2, "px) calc(").concat(rotatedImageOffset, " + ").concat(props.height / 2, "px), ").concat(rotatedImageOffset, " ").concat(rotatedImageOffset) : rotatedImageOffset,
          backgroundImage: props.cross ? "url(".concat(base64UrlRef.value, "), url(").concat(base64UrlRef.value, ")") : "url(".concat(base64UrlRef.value, ")")
        }
      }, null);
      if (props.fullscreen && !globalRotate) return watermarkNode;
      return _createVNode("div", {
        "class": ["".concat(mergedClsPrefix, "-container"), globalRotate !== 0 && "".concat(mergedClsPrefix, "-container-global-rotate"), fullscreen && "".concat(mergedClsPrefix, "-container-fullscreen"), props.selectable && "".concat(mergedClsPrefix, "-container-selectable")],
        "style": {
          zIndex: isFullScreenGlobalRotate ? zIndex : undefined
        }
      }, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots), watermarkNode]);
    };
  }
});
export default Watermark;